THREE.JSGFX2014 ADVANCED GRAPHICS WORKSHOP

MARCH 2014

BANGALORE

GFX2014 Advanced Graphics Workshop, Bangalore

2014WHAT 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

Canvas

WebGL

Three.js

OpenGL ES2.0

Mes

hM

ater

ial

Imag

eUtil

sC

amer

aS

cene

2014DRAWING 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

2014RENDERERS

Two types of renderers GPU based OpenGL (WebGL) renderer

THREE.WebGLRenderer( context3dStore ); Canvas based 2D renderer fallback

THREE.CanvasRenderer( { canvas: theCanvas } );

2014THREE.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 );

2014IMPORTANT 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

2014IMPORTANT APIS (CONTD)

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

2014BLENDING 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 });

2014SPECIFYING TEXTURES

Load from source THREE.ImageUtils.loadTexture( sourceURL);

Other properties of texture texture.wrapT (THREE.RepeatWrapping) texture.wrapS (THREE.ClampToEdgeWrapping) texture.repeat texture.offset

GFX2014 Advanced Graphics Workshop, Bangalore 10

2014OFFSCREEN RENDERING WITH THREE.JS

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 offscreen\n");

goto err;

}

//Bind regular texture

GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));

GL_CHECK(glBindTexture(GL_TEXTURE_2D, regularTextureId));

add_texture(inTextureWidth, inTextureHeight, textureData, inPixelFormat);

GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));

GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));

//Draw with regular draw calls to FBO

GL_CHECK(_test17(1));

 

//Now get back display framebuffer and unbind the FBO

GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, 0));

GL_CHECK(glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, 0, 0));

if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)

{

printf("FB is not complete for rendering to display\n");

goto err;

}

//bind to texture

GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));

GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));

 

GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));

GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));

//draw to display buffer

_test17(0);

Taken from https://gist.github.com/prabindh/8173489

Captain Caveman © Hanna-Barbera

2014WITH 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

2014THREE.JS RENDERTARGET OBJECT

WebGLRenderTarget

Usage sample: rtTexture = new THREE.WebGLRenderTarget( width, height, { minFilter:

THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );

GFX2014 Advanced Graphics Workshop, Bangalore 14

2014PASSING 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