GFX part 8 - Three.js introduction and usage

GFX part 8 - Three.js introduction and usage

• 1.
  THREE.JS GFX2014 ADVANCED GRAPHICSWORKSHOP 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 typesof renderers  GPU based OpenGL (WebGL) renderer  THREE.WebGLRenderer( context3dStore );  Canvas based 2D renderer fallback  THREE.CanvasRenderer( { canvas: theCanvas } );
• 5.
  2014 THREE.JS - PROGRAMMINGFLOW  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  Loadfrom 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 WITHTHREE.JS GFX2014 Advanced Graphics Workshop, Bangalore 10
• 11.
  DOING IT WITHGLES2 (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 (MODERNSTYLE)  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 FORMATERIALS  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