Workshop

The State of the Art

Speaker: Carl Bateman


Thursday, 22nd September 2016
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London

Next: TBA

Carl Bateman

TL;DR

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

Basically

  • 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

WebGL Workshop
Khronos London Chapter

Learning
Networking
Easier than googling
Beer

Contact

 

meetup.com/WebGL-Workshop-London
Carl.Bateman@webglworkshop.com
@CarlBateman

Participate


Ask questions


Takes photos

Tweet!!!

#WebGLWorkshop
#WebGLLondon

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

"There's a freaking supercomputer in your browser,
and nobody seems to have noticed!"

Steve Sanderson




Jasmine Kent

Executive Summary

CPU bad (slower) (click to zoom) GPU good (faster) (mouse-wheel to zoom)
Refresh page if panel(s) blank

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?

Web standard
Cross-device
Cross-platform
Combination of JavaScript API
and GLSL language

What is WebGL?

Canvas based
GPU access from browser
Control via shader programs
Rasteriser - 2D and 3D graphics
and more

Demo

Cruciform

How WebGL Works

JavaScript

Create Context/Canvas

Draw commands

Data control

GLSL

Shader program

Vertex shader

   transform vertices

Fragment (pixel) shader

   transform pixels

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

(Animate CC / WebGL)

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>