Nsryjdtyk

I am moving along well learning ThreeJS as an interface to WebGL. Thank you all for your previous help.

I am developing a new approach to 3D Dynamics and would like a 3D component to the textbook. Examples are found here: http://eon.sdsu.edu/~impellus/DMF/

They are not the best, but I am learning.

In parallel, I would like to investigate some animations in 2D Statics and 2D INTERACTIVE Free Body Diagrams. The goal is to present an object, slice aspects of it away and replace the discarded section with forces (basically: to interactively construct free body diagrams by removing contacts). Normally, I would consider Flash, but I have been advised against it.

You can see here that I used threejs to create a 2D tutorial on streamlines, streaklines, pathlines:

http://eon.sdsu.edu/~impellus/FLOW/

But my feeling is that it is not natural to use the power of threeJS for 2D interactive animations.

So may I ask if there is a Two JS version of Three JS? I think just asking the question should be evidence to what I am looking for, but let me be more clear. I am looking for an interface to webGL that is dedicated to 2D animations. Yes, I can use threeJS, but I think that would be a mistake. Could someone guide me?

pixi.js was released just recently - it's a 2D engine backed by WebGL for performance, but with a 2D canvas fallback for compatibility. I haven't used it myself but it's worth checking out.

Check out Jono Brandel's two.js!

https://github.com/jonobr1/two.js

Nice demo here:
http://jonobr1.github.io/two.js/

I also explored the use of a 2D engine but in the end just used Three.js. If you setup your camera to never move in the Z direction, and place all visual elements on the same z = constant plane then it is a 2D engine.

The only thing you would have to address is the z-order of elements on the plane. One way do this is assign each element a slightly different Z value:

For example if you’re drawing on the Z = 0 plane then you could set element 1 to be drawn at Z = 0 and element 2 at Z = 0.0001, so element 2 will always be drawn on top of element 1.

A better way to achieve z-order would be to hack the engine and set the drawing order for each element in order to force one element to be drawn before another.

Also another problem with using three.js is that (at the time of writing) it doesn't handle 2D sprites very well.

I found IvanK quite fast and feature complete it have alot more features than Pixijs.

Check it out (it have webgl,canvas,svg renderers with automatic fallback support).

http://lib.ivank.net/?p=demos

i found another library , fabricjs.com , quite powerful but slow.

Try your luck with this Javascript game engine list:

https://github.com/bebraw/jswiki/wiki/Game-Engines

Some of them are dedicated to 2D animations with sprites or Box2d physics.

Also there are commercial products for drawing 2D HTML5 animations, like http://www.sencha.com/products/animator/

If you are looking for 2D visualisation, your best option would be D3 or Two.js:

https://d3js.org

https://two.js.org

Sometimes, you need a simple knife to butter up things. Three.js is very much like a chainsaw when it comes to just achieve smooth graphics. It is more geared toward the 3 dimensional.