WebGL

MIT - IAP 2011

Andor Salga (Seneca College)
Benoit Jacob (Mozilla)

Material partly taken from LearningWebGL.com

MIT IAP 2011

WebGL Take away
WebGL (Web Graphics Library)
  • Low-level graphics API for JavaScript
  • Based on OpenGL ES 2.0
  • No plug-in required
  • Well integrated with the DOM (e.g. texture from DOM element)
  • Works on Firefox 4+, WebKit, Chrome/Chromium 9+, and soon Opera
WebGL
  • Can run bits of code on the GPU
  • These are known as shaders
  • They are compiled at runtime
  • Vertex & Fragment shaders
  • Vertex shaders compute vertex positions
  • Fragment shaders compute pixel colors
Shaders
  • Similar syntax to C
  • Strongly typed
  • float f = 42; // error
  • Defer as much as possible into shaders
Getting set up (Firefox)
Example 1 - Simple triangle


Example 1 - Simple triangle


WebGL Pipeline
Vertex Operation

Rasterization

Fragment Operation

FrameBuffer
Example 2 - Colors


Example 2 - Colors


Example 3 - 3D


Example 3 - 3D


Matrices (1/4) - Overview
Oversimplifying:
  • A matrix is a 3x3 or 4x4 array of numbers representing a geometric transformation
  • A rotation is represented by a 3x3 matrix. Not every 3x3 matrix is a rotation.
  • Translations can only be represented as 4x4 matrices.
Matrices (2/4) - General form
r11 r12 r13 t1
r21 r22 r23 t2
r31 r32 r33 t3
0 0 0 1
  • The top-left 3x3 block is the rotation and scaling.
  • The top-right 3x1 block is the translation.
  • The bottom row is almost always 0, 0, 0, 1.
Matrices (3/4) - Products
  • M×V is the vector obtained by applying transformation matrix M to vector V.
  • M1×M2 is the transformation matrix consisting in applying M2 and then M1.
  • Order of matrix multiplication matters:
    M1×M2M2×M1
Matrices (4/4) - 4D vectors
  • WebGL does 3D geometry but often uses 4D vectors.
  • Given 3D vector (x, y, z), you get the corresponding 4D vector by appending 1: (x, y, z, 1)
  • If instead you append 0, as in (x, y, z, 0), then you get a so-called direction: such a 4D vector is not affected by translations.
Example 3.1 - Need depth test


Example 3.1 - Need depth test


Diff: enabling depth test


Example 3.2 - Using depth test


Example 3.2 - Using depth test


Lighting
  • Dynamically change vertex color
  • Lighting is Simulated
  • Ambient
  • Directional
Example 4 - Lighting (click me!)


Lighting
  • Per vertex lighting
  • Normals
  • Calculating directional light
  • Ax Bx + Ay By + Az Bz  =  ||A|| ||B|| cos (A,B)
       
Example 4 - Lighting


Many Objects vs. Texture Mapping
  • Drawing many colored objects
  • Drawing one textured object
Example 5 - Texture Mapping


Texture Mapping
  • Texture = Image
  • Texture coordinates (UV)
  • Pinning image onto vertices
  • Use power of two textures (32x32, 64x128, etc.)
     
Example 5 - Texture Mapping


Example 6 - Texture Mapping (LINEAR)


Example 6 - Texture Mapping (LINEAR)


Example 7 - Texture Mapping (MIP Maps)


Example 7 - Texture Mapping (MIP Maps)


Debugging
  • Error console
  • console.log('foo') vs. alert('foo')
  • WebGL.getError();
Resources
Game Demos

Thank You!

Questions?



Benoit Jacob (Mozilla)
Andor Salga (Seneca College)


MIT IAP 2011