WebGL with Three.js

Little reminder, what is WebGL?

WebGL is an HTML5 graphics API that allows to display 3D directly in the browser via the canvas tag. It comes from the OpenGL ES 2.0, it is sSupported by all modern browsers.
webgl-browser-support
 

How to do WebGL? Or how to start well

three.js, “A JavaScript 3D Library which makes WebGL simpler”

  • THE most widely used and documented Open Source library for doing WebGL
  • Created by Ricardo Cabello aka mrDoob
  • github: v74 (v1 > 2010); watch 1 / star 572 / fork 23
  • Rendered in WebGL… + CSS3D & SVG for “old” browsers/mobiles.
  • Features: Scenes, Cameras, Geometry, 3D Model Loaders, Lights, Materials, Particles, Animation, Shaders…

Shaders ? Kesako?

Shaders are like “special effects” that create or modify material and color (really awesome). It's written in glsl (OpenGL Shading Language, looks like C).
 

Three.js in production

We can see that three.js is mainly used in production for event websites, experimental sites, showcase sites with 360° products and games:
[youtube https://www.youtube.com/watch?v=toHboGrzjO4&w=560&h=315]  
[youtube https://www.youtube.com/watch?v=DgPv6IIVDFQ&w=560&h=315]  
 

Three.js in practice

threejs-node-map
Note that the light as well as the meshes (objects) and the camera will be included in the scene and the latter will be included in the "rendering engine" with the camera. In code, this will give for example for a simple cube which turns on itself:


//using jade ;)
doctype html // html5 doctype
html
    head
        title Basic Three.js App
        style
            html, body { margin: 0; padding: 0; overflow: hidden; }
    body
        script(src="js/three.min.js")
        script
            // Init scene & camera
            var scene = new THREE.Scene();
            var aspect = window.innerWidth / window.innerHeight;
            var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            // Add cube
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshNormalMaterial();
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
            camera.position.z = 5;
            // Add animation
            var render = function () {
              requestAnimationFrame( render );
              cube.rotation.x += 0.1;
              cube.rotation.y += 0.1;
              renderer.render( scene, camera );
            };
            render();

 
 

Some links for three.js

 
PS: Did you know that we used three.js to the calendar ahead : )
Hervé Chaissac, UX-Scientist @UXRepublic

 

(pictures from David Scottlyons)