Speaker: Carl Bateman

Tuesday, 17th May 2016
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London

Next: TBA

Carl Bateman

By day

  • Software Engineer (desktop and web)
  • C#, C++, VB, MySQL, .NET, Linq, blah, blah... blah...
  • JavaScript, CSS, HTML, WebGL, jQuery, Three.js, blah, blah... blah...

By night

  • Software Engineer (still)
  • OpenGL, Unity, JavaScript, PHP, CSS, HTML and, of course, WebGL

Carl Bateman

  • WebGL Workshop Organiser
  • Khronos London Chapter Coordinator
  • Self-appointed WebGL Evangelist
    • Nerd
      • Zealot
        • Looney


  • I love to code
  • I love to graphic
  • I love to math
    • eπi +1 = 0 and i² = j² = k² = ijk = -1 ... FUN!!!
  • I love to web

Caveat: I approach WebGL from a mathematical, progamming perspective rather than a web design perspective

the verb form is the only correct use of “math” all other forms are an abomination before man and God


Thanks to...

• For the pizza & beer
• With whom I am affiliated

• Venue
• With whom I am in no way affiliated

• 45% discount "WebGL Programming Guide" eBook edition
• Check out the MeetUp page

WebGL Workshop

After workshop drinkies and

further networking

WebGL Workshop

Ask questions

Takes photos



WebGL Workshop

GLSL part 2





  1. Recap
  2. What is a shader?
  3. A basic shader
  4. A custom shader THREE.js
  5. Vertex Shader - Vertex Displacement - A basic shader - SIMD
  6. Sphering the cube - animated
  7. Woozy cube - animated
  8. Fragment Shader - texture - vs Vertex Shader
  9. Image Processing
  10. Light

What is WebGL?

WebGL - OpenGL ES 2.0 for the Web

“WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces.
“It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content.
“It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers.”

What is WebGL?

  • Combination of JavaScript and GLSL
  • Canvas based
  • JavaScript API
  • Browser access to the GPU
  • Control the GPU via shader programs
  • Part of web standards
  • Available on all devices and browsers
  • Renders 2D and 3D graphics

“Just” a renderer / rasteriser, but can be bent to our will
e.g. image processing

How WebGL Works


Create Context/Canvas

Draw commands

Data control


Shader program

Vertex shader

   transform vertices

Fragment (pixel) shader

   transform pixels

How WebGL Works


Simple vertex shader


Simple fragment shader



Language features


Strongly typed

Optimised for geometry

Native support of vectors and matrices (no quaternions)

Built-in geometry functions e.g. cos, sin, dot, cross, reflect


vec3 v1, v2;
v1[0] = v2.r; = v2.rgb;
v1.zyx = v2.bbb;

Textures via sampler2D and texture2D (no 1D or 3D textures)


var camera, scene, renderer, mesh;
function init() {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 400;
  scene = new THREE.Scene();
  var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
  var geometry = new THREE.BoxGeometry( 200, 200, 200 );
  var material = new THREE.MeshBasicMaterial( { map: texture } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
function animate() {
  requestAnimationFrame( animate );
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );