3D Graphics in HTML5 Canvas

by Kevin Roast

More HTML5 trickery at kevs3d.co.uk/dev and updates via @kevinroast

Not WebGL!

WebGL ~= OpenGL ES 2.0

GPU Hardware, Programmable Shaders

Graphics. Oldskool.

Emulating the classic OpenGL "fixed function pipeline" in software.

For fun, not profit.

Start Simple

"From small beginnings come great things."

Cartesian coordinate system

Signed distances to three mutually perpendicular planes (pardon?)

X axis goes to right

Y axis goes up

Z axis goes "into" the screen

Object Geometry

List of Points {X, Y, Z}

List of Polygons (triangles)

Three vertices V0,V1,V2 connect a triangle together

Materials; colour, properties, textures

Hello triangle


{
   vertices: [
      {x:0, y:0, z:0},
      {x:1, y:1, z:0},
      {x:1, y:0, z:0}
   ],
   polygons: [
      {
         vertices: [0,1,2],
         colour: [255,255,255]
      }
   ]
}

Matrix Multiplication - scary math!

Homogeneous coordinates

4D Transformation matrices

Model, view projection

Cross product, dot product

Euclidean geometry, quaternions

!!!KILL ME NOW!!!

Homogeneous coordinates

Consider 3D vertices as a (x,y,z) triplet.

Introduce 4th element 'w'. Now have (x,y,z,w) vectors.

remember this

If w == 1, then the vector (x,y,z,1) - a position in space.

If w == 0, then the vector (x,y,z,0) - a direction.

Homogeneous coordinates allow of use of a single mathematical formula to deal with both cases.

Solving of equations for any coordinate - including those at infinity by using 'w' to map to projective space.

Transformation matrices

A matrix is an array of numbers with a predefined number of rows and colums.

In 3D graphics we only use 4x4 matrices.

Allows the transformation of (x,y,z,w) vertices.

multiplying the vertex with the matrix

\[ \begin{bmatrix} a & b & c & d \\ e & f & g & h \\ i & j & k & l \\ m & n & o & p \end{bmatrix} \times \begin{bmatrix} x \\ y \\ z \\ w \end{bmatrix} = \begin{bmatrix} ax + by + cz + dw \\ ex + fy + gz + hw \\ ix + jy + kz + lw \\ mx + ny + oz + pw \end{bmatrix} \]

Building matrices is hard

Multiplying by them is tedious

glMatrix (see http://glmatrix.net/)

"JavaScript Matrix and Vector library for High Performance WebGL apps"


var m = mat4.create();
mat4.multiply(out, m1, m2);
mat4.rotateX(out, m, radians);
var v = vec3.fromValues(1, 0, 0);
mat4.scale(out, m, v);
mat4.translate(out, m, v);

Coordinate Transformations

The 3D graphics pipeline

Local Object coordinates -> local matrix

World coordinates -> camera matrix

View (or Eye) coordinates -> perspective matrix

Perspective (& clip) coordinates -> viewport transformation

Screen coordinates

Local Object coordinates

Each entity typically centred on the origin.

local matrix > World coordinates

Multiply by local matrix; encodes scale, rotate, translate...

Lighting is performed in 'world space'

Move the universe not the camera

"I understand how the engines work now. They don't move the ship at all. The ship stays where it is and the engines move the universe around it." - Cubert Farnsworth

camera matrix > View (or Eye) coordinates

Multiply each vertex by camera matrix

perspective matrix > Perspective (& clip) coordinates

Multiply each vertex by perspective matrix

behind the frustum (normalised device coordinates -1 to 1)

Ignore polygons completely outside the clipping bounds

screen coordinates

We know what to draw, and where to draw it...

lighting and shading

Global Illumination = Ambient Light + Diffuse Light + Specular Light

Ambient Lighting - constant lighting in all directions, colors all pixels of an object the same.

Diffuse Lighting - both the light direction and the object surface normal. Varies across surface of an object due to light direction and changing surface normal vector.

Specular Lighting - the bright highlights that occur when light hits an object and reflects back toward the camera.