Breathing Life into Three.JS

@opherv / May 2016

Hi! I'm Opher

Graduate of Bezalel Academy of Arts &

HUJI Computer Science

I'm a creative developer at Interlude

It all started with a spark...

Creating the Environment

Forming the land

The process:

Get GIS / topographical data
Convert it into a height map
Load image into canvas, and calculate height from each pixel

Adding an ocean

Wavy surface with Shaders in Three.JS

Hacking a shader to create wavy water

...

float waterDisplace;

waterDisplace = 
 1.0 * (-2.0 * sin((timestamp + (position.x * 100.0 )))) 
* 6.0 + (1.0 * cos((timestamp + (position.y )))) * 17.0;


gl_Position = projectionMatrix * modelViewMatrix 
*  (vec4(position, 1.0) + vec4(0.0, 0.0, waterDisplace, 0.0));


...

Creating the creatures

How do you design modular creatures?

Early prototype

Modeled and animated in Cinema 4D

My work process:

Figured out there's no good way to export to Three.JS

The Collada format sucks

Found this awesome Collada to JS converter by Robert Carnecky

Protip - use Maya or Blender

This is a "tree"

This is a pointy "tree"

This is a pointy, poisonous "tree"

Spike algorithm

For every bone
     For every face on the bone mesh
        create a triangle polygon
        align it to the face normal
        scale it in relation to the mesh area
     Merge the polygons in to a single geometry
Profit $$$

This is a pointy, poisonous hexapod

Special FX

Opening portals

var video = document.createElement( 'video' );
video.src = "portal.webm";
video.loop=true;
video.load();
video.play();

var videoImage = document.createElement( 'canvas' );
videoImage.width = 800; videoImage.height = 450;

var videoImageContext = videoImage.getContext( '2d' );

var videoTexture = new THREE.Texture(videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

var movieMaterial = new THREE.MeshBasicMaterial( 
    { map: videoTexture, overdraw: true, side:THREE.DoubleSide, transparent: true } );
var movieGeometry = new THREE.PlaneGeometry( 800, 450, 1, 1 );
var obj = new THREE.Mesh(movieGeometry, movieMaterial );

function updateAnim(){
  if ( video.readyState === video.HAVE_ENOUGH_DATA )
  {
    videoImageContext.clearRect(0,0, videoImage.width, videoImage.height);
    videoImageContext.drawImage( video, 0, 0 );
    videoTexture.needsUpdate = true;
  }
}

...

level.addEventListener("render",updateAnim) // hook into the threejs render loop

Achieveing the "miniature film" look

Vignette shader

Vertical blur Shader

Film grain shader

Final Notes

Telluric was built with Three.JS R69-R71

Every new release of Three.JS set me days back -

factor this into your dev time

Thanks!

@OpherV

opherv.com

opherv@gmail.com

github.com/opherv