Three.js, Back to the Future

About me

full-stack software engineer

programulya

member of kottans.org

Two-dimensional space

Cartesian

Polar

Coordinate systems

Cartesian

Cylindrical

Coordinate systems

Spherical

Three-dimensional space

Projections

Perspective

Orthographic

*Human's FOV is 190 degrees

Operations with matrices

Translation

Scalen

Rotationn

2D, 2.5D vs 3D

Pseudo-3D games:

1994 — Doom 2
1997 — Fallout
2002 — Heroes of Might and Magic IV
2003 — The Sims

Back to history

1972

1975

1994

1984

1994

*First 3D animation in a movie (1974)

Tools & Technologies

https://unity3d.com
https://www.microsoft.com/silverlight
https://support.microsoft.com/kb/179113
http://www.adobe.com/ru/products/flashplayer.html

OpenGL, Unity, Silverlight (deprecated), VRML, X3D, Flash (deprecated), DirectX, O3D (deprecated) etc.

OpenGL

General:

- OpenGL is specification created by Kurt Akeley and Mark Segal (current version is OpenGL 4.6);

- Reviewed by ARB (Architecture Review Board) from 1992;

- Windows, Unix, MacOS, PlayStation are released specification.

Benefits:

- Common API (cross-platform), open standard, well specified and documented;

- Hide differences of hardware by programming simulation;

- 25 years of compatibility (!!!).

OpenGL language bindings

C#:

Open Toolkit, Tao Framework, OpenGL4Net etc.

Java:

Java OpenGL (JOGL), Lightweight Java Game Library etc.

Ada, Common LISP, Delphi, Haskell, Lua, OCaml, Perl, Python, Ruby and a lot of others our lovely languages...

*Alternative docs https://open.gl

OpenGL example

void initGL() {
   glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Set background color to black and opaque
   glClearDepth(1.0f);                   // Set background depth to farthest
   glEnable(GL_DEPTH_TEST);   // Enable depth testing for z-culling
   glDepthFunc(GL_LEQUAL);    // Set the type of depth-test
   glShadeModel(GL_SMOOTH);   // Enable smooth shading
   glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);  // Nice perspective corrections
}

void display() {
   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear color and depth buffers
   glMatrixMode(GL_MODELVIEW);     // To operate on model-view matrix
 
   // Render a color-cube consisting of 6 quads with different colors
   glLoadIdentity();                 // Reset the model-view matrix
   glTranslatef(1.5f, 0.0f, -7.0f);  // Move right and into the screen
 
   glBegin(GL_QUADS);                // Begin drawing the color cube with 6 quads
      // Top face (y = 1.0f)
      // Define vertices in counter-clockwise (CCW) order with normal pointing out
      glColor3f(0.0f, 1.0f, 0.0f);     // Green
      glVertex3f( 1.0f, 1.0f, -1.0f);

   ...
   glEnd(); 
}

*Full code of example

OpenGL shaders (GLSL)

#version 120
void main(void)
{
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Example of fragment shader (red fragment):

- Use GPU;

- Vertex, geometry, fragment shaders;

- C syntax.

WebGL

Canvas (HTML5) + OpenGL ES = WebGL.

WebGL evolved out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations.

In 2011 it was criticised by Microsoft. Development of the WebGL 2 specification started in 2013. This specification is based on OpenGL ES 3.0.

WebGL libraries:

Three.js, Babylon.js, PhyloGL, GLGE, J3D.

Not always you need WebGL

http://pattle.github.io/simpsons-in-css

http://codepen.io/Mamboleoo/full/oxaXdj

http://www.arkadia.xyz

WebGL support

Test WebGL:

http://get.webgl.org

Add support for WebGL to IE:

https://github.com/iewebgl/iewebgl

WebGL experiments

- Pianist

- World economy

- Dark forest

- Donat

- etc. on Chrome Experiments

WebGL example

var gl; // A global variable for the WebGL context

function start() {
  var canvas = document.getElementById("glcanvas");

  // Initialize the GL context
  gl = initWebGL(canvas);
  
  // Only continue if WebGL is available and working
  if (gl) {
    // Set clear color to black, fully opaque
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    
    // Enable depth testing
    gl.enable(gl.DEPTH_TEST);

    // Near things obscure far things
    gl.depthFunc(gl.LEQUAL);
   
    // Clear the color as well as the depth buffer.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  }
}

*Full code of example

Three.js

Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.

Three.js was first released by Ricardo Cabello to GitHub in April 2010. There are over 800 contributors in total (!!!).

Three.js examples

Eye:

www.vill.ee/eye

Cars:

http://threejs.org/examples/#webgl_materials_cars

Video:

http://threejs.org/examples/#webgl_materials_video

...and a lot of examples on threejs.org

Generic terms in Three.js

Scene

Camera

Light

Mesh

Geometry

Material

Texture

Vertex

Face

Setting up

- 'npm install three' or 'yarn add three'

- add <script src="js/three.min.js"></script>

Scene, renderer, camera

var scene = new THREE.Scene();
var renderer = window.WebGLRenderingContext ? 
               new THREE.WebGLRenderer({alpha: true}) : 
               new THREE.CanvasRenderer();
var camera = new THREE.PerspectiveCamera(35, 
             window.innerWidth / window.innerHeight, 1, 1000);

function initScene() {
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.getElementById("container").appendChild(renderer.domElement);

   scene.add(camera);
   ...
   render();
}

function render() {
   renderer.render(scene, camera);
   requestAnimationFrame(render);
}

Renderers: WebGLRenderer is a standard, CanvasRenderer is become obsolete (not recommend)

Cameras: OrthographicCamera, PerspectiveCamera, StereoCamera, CubeCamera

Meshes & Geometry

var material = new THREE.MeshBasicMaterial({
               wireframe: true,
               color: 0xD45DCA 
});

var box = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30), material);
scene.add(box);

Geometry = vertices + faces

Types: inbuilt (defined in Three.js), custom (you could create your own geometry), exported (from some format)

Geometry (inbuilt): BoxGeometry, CircleGeometry, ConeGeometry, CylinderGeometry, PlaneGeometry, RingGeometry, TorusGeometry, TorusKnotGeometry etc.

Manipulating with meshes (union, subtract etc.): csg.js

Meshes & Geometry

Base class for meshes is THREE.Object3D, so everything could be translated/rotated and scaled.

Most important properties: id, uuid, name, position/rotation/scale, userData, parent/children

Most important methods: getObjectByName, getObjectById

Set position/rotation/scale (under the hood it's multiply to matrix):

Animations with matrices

box.position.x = 10;
box.position.y = 5;
box.position.z = 100;

box.position.set(10, 5, 100);

Loaders

var loader = new THREE.JSONLoader();

loader.load("monkey.json", function (geometry) {
    var material = new THREE.MeshBasicMaterial({
        color: 0xC91A58,
        wireframe: true
    });

    var monkey = new THREE.Mesh(geometry, material);

    scene.add(monkey);
    render();
});

Loaders: JSONLoader, TextureLoader, ObjectLoader, STLLoader (3D printing), CTMLoader (OpenCTM) etc.

Note! Also you can export your mesh from the scene (using THREE.SceneExporter).

Loaders

Materials

var material = new THREE.MeshPhongMaterial({
                color: 0xC91A58,
                ambient: 0xC93A58,
                specular: 0xC92A58,
                emissive: 0xC90A58,
                shininess: 60,
                shading: THREE.FlatShading,
                side: THREE.DoubleSide
            });

Materials: MeshLambertMaterial, MeshBasicMaterial, MeshPhongMaterial etc.

Common usage:

MeshLambertMaterial -> non-shiny surface

MeshPhongMaterial -> shiny metallic-like surface

Note! Each material is reacted to specific light.

Materials

MeshLambertMaterial

MeshPhongMaterial

MeshBasicMaterial

Lights

var light = new THREE.AmbientLight(0xffffff);
...
scene.add(light);

Lights: AmbientLight, DirectionalLight, PointLight, SpotLight etc.

Common usage:

AmbientLight -> affects all objects equality

PointLight -> light that shines in all directions (affects only MeshLambert & MeshPhong materials)

DirectionalLight -> sunlight, all lights come from some direction

SpotLight -> can cast shadow in one direction (like projector, affects only MeshLambert & MeshPhong materials)

Textures

var geometry = new THREE.SphereGeometry(30, 30, 30);
var material = new THREE.MeshBasicMaterial({map: 
               THREE.ImageUtils.LoadTexture('earth.jpg'), overdraw: 0.5});
var earth = new THREE.Mesh(geometry, material);

First way:

Second way (better):

var loader = new THREE.TextureLoader();

loader.load('earth.jpg', function (texture) {
    var geometry = new THREE.SphereGeometry(30, 30, 30);
    var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
    var earth = new THREE.Mesh(geometry, material);

    scene.add(earth);
    render();
});

You could define different modes and filters for your textures.