Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Two.js

jonobr1.github.io

Post reply on HN
Print view View original

81–90 of 92 posts

Re: Two.js

#81

Post by jonobr1 »

zlnimda wrote: post #75
jonobr1 wrote: post #39

Earlier quoted context omitted.

Yes! This is because when a shape is first created the WebGL Renderer draws the shape as a texture in Canvas2d and then uploads that texture to GL. The operations "Vertices" and "Scale" force each shape to be redrawn so there are a lot of textures being uploaded and deleted every frame this scenario. If you keep things to translation / rotation you can make the WebGL renderer push wayyyy more shapes than the other 2…

Why don't you draw directly your vertices in gl instead of create a tex ? And you could use optimisation of culling to be faster. (drawing object : front to back)

Because the eng team that implements WebGL on Chrome recommended this way. I have an implementation as you're describing as the first tag of Two.js. It actually was a 2D drawing API for Three.js initially..!

Re: Two.js

#82

Post by jonobr1 »

stared wrote: post #78

As someone using D3.js a lot (even for a puzzle game) - what is the benefit of using Two.js? Jumping between SVG and Canvas? (But then, is it worth the price of reducing possibilities to circles and squares?)

You can do quite a bit with "circles and squares". Two.js focuses on Path drawing and has robust SVG interpretation for complex vector shapes.

I've found the portability to be fantastic. For instance http://patatap.com runs svg on iOS and canvas on Android. Two.js makes it simple to run either on the fly.

Re: Two.js

#83

Post by jonobr1 »

arocks wrote: post #60

Is it possible to use this for creating videos with motion graphics? Even the possibility of a frame by frame render would be awesome.

Yes, I often screen capture my work or use a Chrome Extension called Render Target to save my frames out for static use. My dribble account is mostly Two.js output: https://dribbble.com/shots/2058034-9-Squares-r6?list=users&o...

The project Anitype dynamically creates and stores gifs of Two.js scenes: http://anitype.com/entries

Re: Two.js

#84

Post by mattdesl »

vegabook wrote: post #24

Awesome...but. No text? That suddenly wipes out my use case (data viz). I was super encouraged reading this post, multiple renderers including canvas / webgl (so I assume speed - unlike D3), smart, clean, indeed creative looking logo/site...suggests the author has taste...but no text kills this for me. I see no obvious use case for animated 2d that does not do textures (personally happy to do without) but also does n…

Text is actually pretty tricky in WebGL. Lots of ways to do it, all very dependent on your application. I think it would be better to keep it out of the library but allow plugins/etc to compose easily with the rest of two.js.

Maybe the author could utilize some npm modules to enable this. https://github.com/mattdesl/text-modules

Re: Two.js

#85

Post by philsnow »

mintwurm wrote: post #71
ramblerman wrote: post #70

Earlier quoted context omitted.

please stop trolling. I know you think you're on to something but you're really not.

How can someone who voices genuine concerns be a troll ? I was actually interested in this framework. Right now I'm torn between pixi.js and easel.js , this seemed like a viable alternative. But before I start to invest time in a technology, I want to know if it's still alive. This project is definitely not finished (text rendering), far from polished (slow webgl implementation, see this thread) and has not been impr…

You seem to have already concluded that a project that isn't seeing rapid, active development, is not suited for use.

There's a difference between "solid" and "moribund".

Re: Two.js

#87

Post by odbol »

rjusher wrote: post #26

What I am struggling with, is the use case of a library like this. Is this oriented towards gaming or substitude something like d3.js or is it has a simplier api, for the developer than other libraries. Or is it a library to showcase the cool stuff that can be done with new technologies. I think the main difference and the selling point is that it is "renderer agnostic" but I don't understand the benefits of that.

The author of two.js uses it for interactive art, like Patatap. It's great for creating fun motion design easily. I worked with him on a project where a live drummer plays drums and triggers sounds and shapes projected behind him: http://thecreatorsproject.vice.com/blog/introducing-drumpant...

Re: Two.js

#88

Post by niutech »

SomeCallMeTim wrote: post #33
rjusher wrote: post #26

What I am struggling with, is the use case of a library like this. Is this oriented towards gaming or substitude something like d3.js or is it has a simplier api, for the developer than other libraries. Or is it a library to showcase the cool stuff that can be done with new technologies. I think the main difference and the selling point is that it is "renderer agnostic" but I don't understand the benefits of that.

Renderer-agnostic is nice, actually, when you need to support lots of different browsers. Some mobile browsers can't do WebGL as fast as they do Canvas, for instance. Other browsers will have a huge speed advantage with WebGL. I'm not sure if any are faster with SVG, or the relative performance between SVG and canvas. But being able to do some test renders quickly in all three modes should allow you to select the fas…

Even Dojo Toolkit's dojox.gfx from 2007 supported multiple rendering contexts: SVG, canvas, VML, Silverlight. https://dojotoolkit.org/documentation/tutorials/1.10/gfx/

Re: Two.js

#89

Post by bburky »

amelius wrote: post #77
jacobolus wrote: post #47

Earlier quoted context omitted.

You can do this pretty easily with SVG, assuming your browser supports SVG, and your “caligraphic stroke” means you want the envelope of an ellipse translated along the path. Or do you need the precise bezier-curves for the stroke outline? For that you need to do some computation.

Yes, I want the second, because I want to use the outline in further computations. It would be interesting to know how to compute the calligraphic stroke outline in terms of bezier curves from a given bezier curve.

I have this bookmarked for some reason, it may help: http://stackoverflow.com/questions/3205819/bezier-path-widen...

Half the links are dead now. This is the openjdk Stroker.java code: http://grepcode.com/file/repository.grepcode.com/java/root/j...

Re: Two.js

#90

Post by amelius »

bburky wrote: post #89
amelius wrote: post #77

Earlier quoted context omitted.

Yes, I want the second, because I want to use the outline in further computations. It would be interesting to know how to compute the calligraphic stroke outline in terms of bezier curves from a given bezier curve.

I have this bookmarked for some reason, it may help: http://stackoverflow.com/questions/3205819/bezier-path-widen... Half the links are dead now. This is the openjdk Stroker.java code: http://grepcode.com/file/repository.grepcode.com/java/root/j...

Thanks!
Post reply on HN