Beyond 2D: Into the Shadows

Speaker: Carl Bateman

Caveat

How WebGL re-introduced me to JavaScript...
linking the possibilities of WebGL with a peek into some of the darker corners of JavaScript

Not intertwined with Graham, in any way

Carl Bateman

Carl Bateman

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

Carl Bateman

Never promise

!important

WebGL Workshop
Khronos London Chapter

Executive Summary

Executive Summary

Executive Summary

Executive Summary

Executive Summary

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.”

Khronos.org

What is WebGL?

What is WebGL?

How WebGL Works

How WebGL Works

Your html page will look something this...

"x-shader" arbitrary name, no special meaning
<script> convenient place to put GLSL source

Obvs, JavaScript can go in separate .js file
Shaders can be loaded with XHR

Simple vertex shader

Simple fragment shader

Get a WebGL context

Error check

Get source, build, compile, link and use the shader

Get data location

Define Geometry

Send data to GPU and draw

JavaScript Features

Adding methods / members to object

var obj = { a: 0 };
obj.b = 6;

JavaScript Feature... not

"Down to" "operator"

  var x = 10;
  while (x --> 0) // x goes to 0
  {
      console.log(x);
  }

JavaScript Features

.bind and .call

  var imgProcessed = document.createElement("img");
  imgProcessed.src = imgMissingSrc;
  img.src = imgMissingSrc;
  handleImgLoaded.call(img, radius, offset);


  imgProcessed.onload = function (drillColour, count, missingData) {
    // do stuff
  }.bind(imgProcessed, radius, offset);

GLSL

Language features

C-like

Strongly typed

Optimised for geometry

Native support of vectors and matrices (no quaternions)

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

Swizzle:

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

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

GLSL

Language features

Type modifiers

uniform

varying

attributes

Security

Variables initialised

Out of bounds

Simple site decoration

WebGL Paris 2015

Pixel Shaders

tamapolis : Javi Agenjo's personal blog

TWGL: A Tiny WebGL Helper Library

WebGL Fundamentals

Seriously ambitious site decoration

OTT

What the what?

WebGL is

 • long winded

 • complicated

BUT

 • scales well

Still, APIs

 • hide complexity

 • simplifies

Oh so very many...

function init() {
  var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;

  var scene = new THREE.Scene();
  var texture = new THREE.TextureLoader().load('crate.jpg', function(texture) {
    texture.needsUpdate = true
  });
  var geometry = new THREE.BoxGeometry(200, 200, 200);
  var material = new THREE.MeshBasicMaterial({ map: texture });
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var render = function () {
    requestAnimationFrame(render);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  render();
}
        

Babylon.js

function init() {
  var canvas = document.getElementById('renderCanvas');
  var engine = new BABYLON.Engine(canvas, true);
  var scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color4(0, 0, 0.0, 0.0);

  var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -400), scene);
  camera.attachControl(canvas, false);

  var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
  light.groundColor = new BABYLON.Color3(0.4, 0.4, 0.4);
  var mesh = BABYLON.Mesh.CreateBox("mesh", 110, scene);

  var material = new BABYLON.StandardMaterial("texture", scene);
  material.diffuseTexture = new BABYLON.Texture("crate.jpg", scene);
  mesh.material = material;

  var render = function () {
    requestAnimationFrame(render);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    scene.render();
  };
  render();
}
            

Moar APIs

• 
• PEX
• XTK (JS implementation of ITK / VTK)
• 
• SpiderGL
• 
• 
• CopperLicht
• A Tiny WebGL helper Library
• etc.

Feature Support

Feature Support

Feature Support

Feature Support

Feature Support

• Art - cabbibo
  
• Architecture - floored
  

• Games - tanx
  
• Visualisation - 10,000 stars
  

• Products and e-commerce - Futurgo
  
• Advertising and media - Nike
  

SIMD

void main() {
  vUv = uv;
  float mag = max(length(position), uRadius);
  if(length(position) > uRadius) {
    vec3 t = normalize(position);
    t *= uRadius;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( t, 1.0 );
  } else {
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
}
             

Avoid if's that use internal state

void main() {
  vUv = uv;
  float mag = max(length(position), uRadius);
  vec3 t = max(normalize(position) * uRadius, position);
  gl_Position = projectionMatrix * modelViewMatrix 
              * vec4( mag * normalize(position), 1.0 );
}
          

FireFox WebGL Editor

Built in to FireFox

WebGL Inspector

benvanik.github.io/WebGL-Inspector/

• GLAM
  • A Declarative Language for 3D Web Content
    Tony Parisi
    
    
• jQuery Three
  • See also A case for WebGL Markup
    
    
• x3dom

CSS

body{
  margin: 0px;
  background-color: #000;
}
#sun {
  width-segments: 64;
  height-segments: 64;
  vertex-shader: url(../../shaders/sun.vs);
  fragment-shader: url(../../shaders/sun.fs);
  shader-uniforms: time f 0 
                   texture1 t url(../../images/cloud.png) 
                   texture2 t url(../../images/lavatile.jpg);
}
  
@-webkit-keyframes kfRotateY {
  from {
    -webkit-transform: rotateY(0deg);
  }  
  to {
    -webkit-transform: rotateY(360deg);
  }
}
.animRotateY {
  -webkit-animation-duration: 90s;
  -webkit-animation-name: kfRotateY;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function:linear;
}
            

JavaScript

var theSun = null;
var startTime = Date.now();
window.addEventListener('load', function(){
    glam.ready();
    theSun = document.getElementById("sun");
    run();  
  },
  false);

function run() {
  requestAnimationFrame(run);
  if (theSun.material) {
    var now = Date.now();
    var elapsed = (now - startTime) / 1000;
     theSun.material.uniforms.time.value = elapsed;
  }
}
            

HTML

HTML

WebGL 2

• experimental

• 3D texutres

• profiling and debugging

WebVR (Mozilla)

• expose VR devices, e.g. Oculus Rift, to web apps

Aframe (Mozilla)

• open-source framework for 3D and VR on the web

Contact

Questions?