Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GFX part 8 - Three.js introduction and usage

1,757 views

Published on

GFX part 8 - Three.js introduction and usage

Published in: Technology, Art & Photos
  • Be the first to comment

GFX part 8 - Three.js introduction and usage

  1. 1. THREE.JS GFX2014 ADVANCED GRAPHICS WORKSHOP MARCH 2014 BANGALORE
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. 2014 OFFSCREEN RENDERING WITH THREE.JS GFX2014 Advanced Graphics Workshop, Bangalore 10
  11. 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. 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. 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. 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

×