Three.js is a JavaScript library for rendering 3D graphics in a web browser. It uses WebGL to render scenes made of objects like meshes, materials, lights and textures. A basic Three.js program creates a renderer, camera and scene, then adds objects to the scene and calls renderer.render() to display the scene. Key APIs include those for lights, geometries, materials, textures and offscreen rendering using render targets. Shaders can be passed to materials for custom rendering effects.

1. THREE.JS
GFX2014 ADVANCED GRAPHICS WORKSHOP
MARCH 2014
BANGALORE

2. 2014
WHAT IS THREE.JS ?
 A rendering library for rendering 3D, 2D objects – using Javascript
 Encapsulates all GL functionality discussed till now, in an easily usable API
 Employs a scenegraph concept
 Parent-child node relationships
GFX2014 Advanced Graphics Workshop, Bangalore
Canvas
WebGL
Three.js
OpenGL
ES2.0
Mesh
Material
ImageUtils
Camera
Scene

3. 2014
DRAWING WITH THREE.JS
 Drawing with Three.js consists of creating
 A renderer
 A camera
 A scene that contains many objects (meshes, materials,
lights, textures) and groups of objects

4. 2014
RENDERERS
 Two types of renderers
 GPU based OpenGL (WebGL) renderer
 THREE.WebGLRenderer( context3dStore );
 Canvas based 2D renderer fallback
 THREE.CanvasRenderer( { canvas: theCanvas } );

5. 2014
THREE.JS - PROGRAMMING FLOW
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera( fieldOfViewAngle, aspect,
near, far );
 renderer = new THREE.WebGLRenderer( { canvas: theCanvas,
antialias: true } );
 scene.add(triangle);
 renderer.render( scene, camera );

6. 2014
IMPORTANT APIS
 Lighting
 var light = new THREE.DirectionalLight( 0xffffff );
 Add the light to the scene just like any other object Scene.add(light);
 Objects
 Shape
 var heartShape = new THREE.Shape();
 heartShape.moveTo( x + 25, y + 25 );
 Geometry
 CubeGeometry
 PlaneGeometry
 SphereGeometry
 TorusGeometry
 IcosahedronGeometry

7. 2014
IMPORTANT APIS (CONTD)
 Materials
 MeshBasicMaterial (plain color)
 MeshLambertMaterial (lighting associated)
 MeshPhongMaterial (lighting associated)
 Associated with a mesh, along with Geometry
 new THREE.Mesh( tubeGeom, redMat );

8. 2014
BLENDING WITH THREE.JS
 Specify the blending property of material
 THREE.NormalBlending (default)
 THREE.NoBlending
 Example
 var material = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true,
opacity: .5, blending: THREE.NoBlending });

9. 2014
SPECIFYING TEXTURES
 Load from source
 THREE.ImageUtils.loadTexture( sourceURL);
 Other properties of texture
 texture.wrapT (THREE.RepeatWrapping)
 texture.wrapS (THREE.ClampToEdgeWrapping)
 texture.repeat
 texture.offset

10. 2014
OFFSCREEN RENDERING WITH THREE.JS
GFX2014 Advanced Graphics Workshop, Bangalore 10

11. DOING IT WITH GLES2 (CAVEMAN STYLE)
 //Bind offscreen texture
 GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
 GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));
 GL_CHECK(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
inTextureWidth, inTextureHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE,
NULL));
 GL_CHECK(glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MAG_FILTER, GL_LINEAR));
 GL_CHECK(glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER, GL_LINEAR));
 GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, fboId[i]));
 GL_CHECK(glFramebufferTexture2D(GL_FRAMEBUFFER,
GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, fboTextureId[i], 0));
 if(glCheckFramebufferStatus(GL_FRAMEBUFFER) !=
GL_FRAMEBUFFER_COMPLETE)
 {
 printf("FB is not complete for rendering offscreenn");
 goto err;
 }
Taken from
https://gist.github.com/prabindh/8173489
Captain Caveman © Hanna-Barbera

12. 2014
WITH THREE.JS (MODERN STYLE)
 Create
 rtTexture = new THREE.WebGLRenderTarget( window.innerWidth,
window.innerHeight, ..);
 Create screen, material, and mesh
 mtlScreen = new THREE.ShaderMaterial( { uniforms: { tDiffuse: { type:
"t", value: rtTexture } },
 mtl = new THREE.MeshBasicMaterial( { map: rtTexture } );
 mesh = new THREE.Mesh( plane, function(rtTexture) );
 scene.add( mesh );
 Use
 renderer.render( sceneRTT, cameraRTT, rtTexture, ..);
 renderer.render( scene, camera );
To offscreen
To display screen

13. 2014
THREE.JS RENDERTARGET OBJECT
 WebGLRenderTarget
 Usage sample:
 rtTexture = new THREE.WebGLRenderTarget( width, height, { minFilter:
THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );

14. 2014
PASSING SHADERS FOR MATERIALS
 var myMaterial = new THREE.ShaderMaterial({
 uniforms: uniforms,
 vertexShader: document.getElementById( ‘myvertexsh' ).textContent,
 fragmentShader: document.getElementById( ‘myfragsh' ).textContent
 });
 Note that “projectionMatrix” and “modelViewMatrix” are provided automatically
by three.js in the vertex shader so no need to pass on the data
GFX2014 Advanced Graphics Workshop, Bangalore 14