Intro to Three.js

After doing some test with WebGL, one would notice that a lot of code is needed just for drawing something as simple as a 2D square; moreover, you have to deal with GLSL Shaders and all the low level programming in OpenGL ES.

There are some libraries that abstract some low level OpenGL ES, and I have chosen one of the most used: THREE.js. When trying to implement something similar as the previous webGL example (sample 4) it takes around 400 lines of code, but doing it using three.js takes only 80 lines of code (5X less!!!)

Three.js allows to have a webGL or a Canvas render. The good thing about Canvas render is that the content is executed in non-webGL devices such as smartphones,

Canvas Render:

• Pros: Content visible in non-webGL devices
• Cons: Low performance in smartphones (1fps in iPhone 3GS). In a desktop, although it shows high FPS as the webGL version it has a higher CPU usage (7-8%) and animations are not smooth.

WebGL Render:

• Pros: Low CPU usage (1-2%) , Smooth animations, high FPS (60-80fps) in FF7
• Cons: Requires a WebGL browser

Please open the following link.

You need an HTML5/WebGL compatible Browser (IE does not work) Check WebGL.