Safari in Safari - An Introduction to 3D content on the Web

Overview

• What is THREE.js?
• How do I build this thing?
• Bringing it to life
• Under the hood

Slides: felixpalmer.github.io/safari-webgl/presentation.html

Why WebGL?

• Accessible 3D for all
• Excellent support across browsers now
• Combination of JavaScript & GLSL very effective

Some examples: http://threejs.org

THREE.js overview

• High level library for rendering 3D content
• Base class in 3D world is Object3D
• Most of the time we use a Mesh
• A Mesh is defined by a:
• Geometry - a collection of vertices defining the shape
• Material - defines how the surface is to be drawn

Scene graph

• Meshes can be positioned, rotated, scaled etc
• Meshes can be grouped by adding them to an Object3D
• To actually display Object3Ds, we add them to a Scene

Rendering a Scene

• To actually show something on screen, need a:
• Camera to view the Scene through
• Renderer to render into a canvas in the DOM

Hello (3D) World

var geom = new THREE.PlaneGeometry( 600, 600 );
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh( geom, material );
scene.add( mesh );

var camera = new THREE.PerspectiveCamera( 70 );
scene.add( camera );
var renderer = new THREE.WebGLRenderer();

THREE.js - The macro and the micro

• 3D graphics is pretty involved. THREE.js lets you:
• focus on the high level content (JavaScript land)
• ...with the access to the low level function (GLSL land)
• ...while handling all the fiddly bits in between

How do I build this thing?

• Geometries
• Materials

Geometry

• Scene is composed of a collection of Meshes
• Each has a Geometry
• Can be shared, e.g. needle is actually 2 Meshes with same Geometry

Geometry - Sphere

new THREE.SphereGeometry( 1, 32, 32 );

Geometry - Torus

new THREE.TorusGeometry( 1.3, 0.1, 16, 32 );

Geometry - Lathe

var flatRingRadius = 3.33;
var flatRingPoints = [
  new THREE.Vector3( flatRingRadius + 0.1, 0, 0 ),
  new THREE.Vector3( flatRingRadius - 0.1, 0, 0 )
];
var flatRing = new THREE.LatheGeometry( flatRingPoints, 64 );

Geometry - Path-based

var path = new THREE.Path();
ringPath.moveTo( 0, 0 );
ringPath.lineTo( 1, 0 );
ringPath.absarc( 1, 0, 1, 0, Math.PI, true )
...
var points = ringPath.getPoints( 24, true );
var ring = new THREE.LatheGeometry( vectors, 128 );

Geometry - Text

new THREE.TextGeometry( "E", { size: 2, height: 0.04 } );

Material

• Each Mesh in the Scene also has a Material
• As with Geometries, Materials can be shared

Material - Wireframe

wire = new THREE.MeshBasicMaterial( { wireframe: true } )

Material - Basic

basic = new THREE.MeshBasicMaterial( { color: "#00ff00" } )

MeshPhongMaterial

new THREE.MeshPhongMaterial( {
  color: new THREE.Color( "#1557fb" ),
  emissive: new THREE.Color( "#232323" ),
  specular: new THREE.Color( "#ccccff" ),
  shininess: 40
} );

MeshStandardMaterial

new THREE.MeshStandardMaterial( {
  color: new THREE.Color( "#1557fb" ),
  emissive: new THREE.Color( "#232323" ),
  metalness: 1.0,
  roughness: 0.6
} );

Textured Materials

new THREE.MeshPhongMaterial( {
  map: texture.wood,
  ...
} ),

Environment maps

• Used for reflective objects
• Acts like mirror onto environment map

new THREE.MeshPhongMaterial( {
  envMap: texture.sky,
  ...
} ),

Bump maps

• For adding small-scale deformations
• Bump scale determines roughness
• Bump map texture describes deformation of surface

new THREE.MeshPhongMaterial( {
  bumpMap: texture.brushed,
  bumpScale: 0.003,
  ...
} ),

Transparency - Blending

new THREE.MeshPhongMaterial( {
  transparent: true,
  opacity: 0.95,
  blending: THREE.AdditiveBlending,
  combine: THREE.MixOperation,
  envMap: texture.sky,
  reflectivity: 0.29,
  ...

Bringing it to life

• Lights & shadows
• Camera & interactivity

Lights

• Just like adding any other object to scene
• Use SpotLight to cast shadows
• Interacts with Materials

var light = new THREE.SpotLight( 0xffffff, 1, 0 );
light.position.set( 25, -20, 20 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;

Interactivity

• Periodically change something, and re-render scene
• Use requestAnimationFrame rather than setTimeout

app.tick = function() {
  app.render();
  window.requestAnimationFrame( app.tick );
}
app.tick();

Moving the Camera

• Camera is also an Object3D, and can be moved/rotated
• Code below zooms Camera in and out

app.clock = new THREE.Clock( true );
app.render = function() {
  var t = 0.2 * app.clock.getElapsedTime();
  var r = 15.0 + 12.0 * Math.cos( 0.3 * t );
  camera.position = new THREE.Vector3( 0, 0, r );
  ...

Looking at Objects

• Simplest way set correct Camera orientation

app.render = function() {
  ...
  camera.position = camPosition;
  camera.up = new THREE.Vector3( 0, 0, 1 );
  camera.lookAt( new THREE.Vector3( 1, 2, 3 ) );
};

Camera Orbiting

• Orbital motion with changing height

var r = 15.0 + 12.0 * Math.cos( 0.3 * t );
camera.position = new THREE.Vector3(
  r * Math.sin( t ), // Orbital motion
  r * Math.cos( t ), // Orbital motion
  12.0 + 5.0 * Math.cos( 1.3 * t ) // Height
);

User Input

• Hook into mouse/keyboard events
• Can move any Object3D instances on stage in same way

Under the hood

• Vertex shaders (geometry)
• Fragment shaders (material)
• Graphics pipeline

Vertex shader

attribute vec2 aCoordinate;
varying vec2 vCoordinate;
void main() {
  vCoordinate = aCoordinate;
  gl_Position = vec4( aCoordinate, 0, 1 );
}

Fragment shader

varying vec2 vCoordinate;
void main() {
  gl_FragColor = vec4( vCoordinate, 0.0, 1.0 );
}

Pipeline

• 3 types of variables to pass around data:
1. uniform global information
2. varying flow from vertex to fragment shader, interpolated
3. attribute per vertex information