Carl Bateman

Carl Bateman

Carl Bateman

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

WebGL Workshop
Khronos London Chapter

Contact

Participate

Ask questions

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

Agenda

1. Khronos
2. News
3. WebGL 2.0
4. WebGL
5. Not Flash –> Exporting to WebGL
6. Not WebGL –> Exporting to WebGL
7. WebVR
8. GLSL online editors
9. WebGL browser tools
10. glTF

Khronos.org

News

PlayCanvas REST API

Pixi.js v4
GPU garbage collector
pixi-gl-core

WebGL 2.0
Chrome - enable "WebGL 2.0 Prototype" flag
Firefox - set config "webgl.enable-prototype-webgl2" to true

News

Web Workers
run WebGL in separate thread

Web Monkeys
github.com/MaiaVictor/WebMonkeys

WebGL 2.0

Adds

vertex array objects always available, floating point textures always available, the size of a texture is available to shaders, direct texel lookup, lots of texture formats, 3d textures, texture arrays, non-power of 2 texture support, loop restrictions in shaders removed, indexing sampler arrays restriction removed, matrix functions in glsl, common compressed textures, uniform buffer objects, integer textures, attributes and maths, transform feedback, samplers, depth textures, standard derivatives, instanced drawing, unsigned int indices, blend equation min / max, multiple draw buffers, texture access in vertex shaders, multi-sampled render buffers and occlusion queries

WebGL 2.0

More info and demos, etc.

khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
  #WebGL_2.0

github.com/WebGLSamples/WebGL2Samples

webgl2fundamentals.org

WebGL

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?

Demo

Cruciform

How WebGL Works

How WebGL Works

Shaders

Simple vertex shader

Simple fragment shader

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)

Three.js

var camera, scene, renderer, mesh;
  
init();
animate();
  
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 );
}
        

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();
}
            

WebGL Workshop

glTF = “JPEG for 3D”

• ‘GL Transmission Format’
  • Runtime asset format for WebGL, OpenGL ES, and OpenGL applications
• Compact representation for download efficiency
  • Binary mesh and animation data
• Loads quickly into memory
  • GL native data types require no additional parsing
• Full-featured
  • 3D constructs (node hierarchy, materials, animation, cameras, lights)
• Runtime Neutral
  • Can be created and used by any tool, app, or runtime
• Flexible Extensibility
  • e.g. payloads with compression and streaming

More info

github.com/KhronosGroup/glTF

WebGL Workshop

Not WebGL -> Exporting to WebGL

Unreal - Performance (courtesy of PlayCanvas)

Unity - Performance (courtesy of PlayCanvas)

WebGL Workshop

Not Flash -> Exporting to WebGL

Flash replaced with Adobe Animate CC

Export to WebGL (well, dur)

More explanation at "Yeah, but is Flash?"

Demo

Keep Out

WebGL Workshop

Online Shader Editors

GLSL.io (transitions)

ShaderFrog

glsl sandbox

shadertoy

shdr

glslb.in

Pixel Shader (on-line book)

WebGL Workshop

In-browser Shader Editors

Mozilla FireFox

WebGL Inspector

shdr (Chrome Web Store)

Shader Editor (Chrome Web Store)

WebGL Workshop

WebVR

PlayCanvas

Goo Create

A-Frame

WebGL Workshop

WebVR

Mozilla

A-Frame

Supported by

PlayCanvas

Goo Create

Three.js

Babylon.js

WebGL Workshop

WebVR

A-Frame

<html>
  <head>
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box color="#6173F4" opacity="0.8" depth="2"></a-box>
      <a-sphere radius="2" src="texture.png" position="1 1 0"></a-sphere>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>