jonobr1

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

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.

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..!

Perhaps you're confusing dead and stable?

You're not the only one! The dev Branch has this fixed so you can pass your own epsilon.

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 renderers.

I'm currently developing a way to "cache" textures that don't change much so if you had a Two.Group that doesn't change much you can turn that into 1 texture. This will greatly increase performance as well. Thanks for checking it out!

#themoreyouknow

Some of my thinking behind rolling my own renderer: https://youtu.be/cOfEMWV_5Rc

It is! I work on the dev branch and other branches when I'm making new changes. EDIT: I mostly use the library though (I use it everyday) rather than constantly develop new features.

Unfortunately, this is a library authored and maintain by one person, me. I'd love to get to text at some point, but until then you'll have to stick with DOM. Also, depending on your renderer you have full access to SVG, Canvas, and WebGL so you can write text with those APIs...

Some projects that use just animated 2D:

+ http://patatap.com/ + http://anitype.com/ + http://tether.plaid.co.uk/ (broken, sorry!) + http://vr.chromeexperiments.com

Interface stuff:

+ http://justareflektor.com/tech + https://dl.dropboxusercontent.com/u/1595444/experiments/anim...

These projects have had multi-million uniques throughout their existence. 3 other large scale projects coming out later this year that use Two.js..! And these are projects just made by me :P

Roughly, self updating html5 compliant browser.

Textures are in the works... Wanted to focus on drawing vector stuff first. As you noted there are many libraries that handle textures really well!

Awesome monsters!

This project started 3 years ago. It's not that fast :)

No no, you can create shapes and render / extrude them in Three.js. The puzzle piece in this example is a 2D path made in Two.js and then extruded in Three.js: https://jonobr1.github.io/two.js/examples/three-extrusion.ht...

DO IT

I'd love to see how they use it! Please don't hesitate to share any findings you have through github issues: https://github.com/jonobr1/two.js/issues?state=open

It's the fastest way to notify me without giving out my email on this thread.

Taken from Paper.js' site: An open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

Taken from Two.js' site: Two.js is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

There are many differences in addition to this, but this starts to give you an idea.

This sounds similar: https://github.com/jonobr1/two.js/issues/4

I totally agree, I hope developers and designers start making more animated logos in html5. The UI polish is really nice!

Indeed! I just wanted to be clear and not over promise anything. If you're interested in make input components that talk with Two.js I recommend taking a peak at /src/shape.js and /src/vector.js this is where the bindings are created. I believe that this form of binding allows for a lot of creativity when it comes to visualizing positions.

Not familiar with forcast.io — thanks for sharing! Before I got into web development I worked at a company called Prologue doing motion graphics in After Effects and Photoshop. Even if you've never heard of them, you've probably seen their work: http://prologue.com/

This background is much of the motivation for the library.

Be careful — two.js is only for drawing things to the browser. It doesn't do much else. There are many game libraries/fraemworks available, both 3d and 2d.

What OS are you running on?

I'd love to see some benchmarks if you make any.

From my gut, I'd say that the WebGL renderer is fast at rendering lots of shapes with only translation / rotation transformations applied to them. SVG is highly optimized on Webkit and handles shape morphing really well and so the SVG renderer handles that really well. Canvas sits somewhere in between the two.

This is a test of a lot of shapes morphing. It visualizes SoundCloud songs: http://jonobr1.github.io/Neuronal-Synchrony/?url=https://sou...

It may take awhile to load...

duly noted, thanks!

yup ^^

I was not aware of these other event systems in JavaScript. Thanks for pointing these out!

I find this to be a very relevant article on render times between various contexts: http://smus.com/canvas-vs-svg-performance/

Along these lines I've written projects in canvas only to realize later I should've written in SVG. One of the aims of two.js is to afford a canonical API for the developer. So the idea is that if you're rendering lots of particles and not doing any manipulation to individual particles, canvas or webgl will render faster than svg. Two.js aims to make it easier to test and switch around between the contexts. However, I should caveat all of this with two.js is very nascent...

Thanks for the clarification!

From my understanding Raphael is specific to the SVG context. Two.js is renderer agnostic, you can choose whether it draws in SVG, canvas, or webgl. This is one of many differences between the two.