WebGL: The Next Generation

Tony Parisi
October, 2015
WebGL:
the next
generation

about me
http://www.tonyparisi.com 10/20/2015
CONTACT
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe http://www.tonypa
risi.com/
http://www.learningwebgl.com/
GET THE BOOKS!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-
Visualization/dp/1449362966
MEETUPS
http://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
BOOK CODE
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
GET GLAM
http://www.glamjs.org/
https://github.com/tparisi/glam/
WORK
http://www.wevr.com/
CREDS
Co-creator, VRML and X3D

agenda
 WebGL basics
 WebGL 2 – major upgrade to the standard
 WebVR – virtual reality in the browser, rendered with
WebGL
 glTF – web-friendly 3D file format for use with WebGL
10/20/2015http://www.tonyparisi.com

the 3D rendering standard
3B seats.
Q.E.D.
WebGL is on all
desktop mobile
browsers

https://www.youtube.com/watch?v=io5snCcQ0ss
http://www.floored.com/blog/2015/
webgl-real-time-physically-based-lighting
http://cabbi.bo/enough/
http://riskeverything.nike.com/
digital
marketing
games
architecture
art

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.
 born in 2006 as Mozilla Canvas3D (V. Vukićević)
 joined by Opera, Apple, Google, renamed WebGL
 standardized by the Khronos Grouphttp://www.khronos.org/

how WebGL works
 it’s a JavaScript drawing API
 draw to a canvas element using a special context (“webgl”)
 low-level drawing – buffers, primitives, textures and shaders
 accelerated by graphics hardware (GPU)
 can draw 2D as well as 3D graphics
 just another z-ordered page element
 there is no file format; no markup language; no DOM.
 libraries and frameworks are key to fast ramp up and productive
development

the anatomy of a WebGL
application
1. create a <canvas> element
2. obtain a drawing context
3. initialize the viewport
4. create one or more buffers
5. create one or more matrices
6. create one or more shaders
7. initialize the shaders
8. draw one or more primitives

a simple example
inspired by the lessons at
Learning WebGL
http://www.learningwebgl.com/

drawingfunction draw(gl, obj) {
// clear the background (with black)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// set the shader to use
gl.useProgram(shaderProgram);
// connect up the shader parameters: vertex position, texture coordinate,
// projection/model matrices and texture
// set up the buffers
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
gl.uniform1i(shaderSamplerUniform, 0);
// draw the object
gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
}
clear the canvas
set the shader
set up buffers for
vertices and texture
coordinates
pass transform and
projection matrices
to the shader
set the texture and pass to the
shader
draw the object
(this part is key; no shader, no pixels!!!)

scary?
use a framework
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, canvas.width /
canvas.height, 1, 4000 );
scene.add(camera);
var mapUrl ="../images/webgl-logo-256.jpg“;
var map = THREE.ImageUtils.loadTexture(mapUrl );
var material = new THREE.MeshBasicMaterial ({ map: map });
var geometry = new THREE.CubeGeometry(2, 2, 2);
cube = new THREE.Mesh(geometry, material);
scene.add( cube );
represents WebGL at
a
high level using
standard
3D graphics concepts
can render to WebGL,
2D canvas, SVG and
CSS3
three.js: the most popular WebGL library

major upgrade
based on OpenGL ES 3.0
https://www.youtube.com/watch?v=2v6iLpY7j5M

 promotes current WebGL extensions to full features
 multiple render targets, geometry instancing, vertex array objects, fragment
depth
 adds previously unsupported ES 3.0 features
 multisampled render buffers
 sampler objects
 uniform buffers
 3D textures
 profiling and debugging – sync objects, query objects
 some ES 3.0 features are not supported in WebGL 2
 mapped buffers, program binaries, drawRangeElements()

deferred rendering example
Excellent example in WebGL1… would be
even faster in V2!
http://marcinignac.com/blog/deferred-
rendering-explained/demo/
Color, Depth, and Normal buffers. (Images by astrofa, via Wikimedia Commons.)
this technique is already being used in WebGL 1 with huge performance hit – three or more
render targets. with multiple render targets you do the draw once instead of three or more
times…

 Enable WebGL 2 in Firefox
https://wiki.mozilla.org/Platform/GFX/WebGL2
 Enabled WebGL 2 in Chrome (Canary Windows/OSX, Dev Channel
Linux)
Run from command line with --enable-unsafe-es3-apis
 Live Demo
http://toji.github.io/webgl2-particles/
development status

 Experimental WebVR API
 Head-Tracking and
Fullscreen VR Support
Now in Browser Builds!!!
(nightly/dev channels)
 No Big App Downloads
and Installs!!!
http://mozvr.github.io/webvr-spec/webvr.html
WebVR:
virtual reality in the browser
Quake 3 WebVR demo, developed by Brandon
Jones of Google
http://media.tojicode.com/q3bsp/

the WebVR API (1)
Query for VR Device(s) For Rendering
// polyfill
var getVRDevices = navigator.mozGetVRDevices /* FF */ ||
navigator.getVRDevices; /* webkit */
var self = this;
getVRDevices().then( gotVRDevices );
function gotVRDevices( devices ) {
var vrHMD;
var error;
for ( var i = 0; i < devices.length; ++i ) {
if ( devices[i] instanceof HMDVRDevice ) {
vrHMD = devices[i];
self._vrHMD = vrHMD;
if ( vrHMD.getEyeParameters ) {
self.left = vrHMD.getEyeParameters( "left" );
self.right = vrHMD.getEyeParameters( "right" );
}
break; // We keep the first we encounter
}
}
}
get left/right eye
(camera) information:
horizontal offset,
field of view.
we’ll use WebGL to render the
scene from two cameras

the WebVR API (2)
Go Fullscreen (VR Mode)
var self = this;
var renderer = this._renderer;
var vrHMD = this._vrHMD;
var canvas = renderer.domElement;
var fullScreenChange =
canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange';
document.addEventListener( fullScreenChange, onFullScreenChanged, false );
function onFullScreenChanged() {
if ( !document.mozFullScreenElement
&& !document.webkitFullScreenElement ) {
self.setFullScreen( false );
}
}
if ( canvas.mozRequestFullScreen ) {
canvas.mozRequestFullScreen( { vrDisplay: vrHMD } );
} else {
canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } );
}
handle exiting fullscreen mode
request fullscreen mode
for this VR device
fullscreen mode requires a DOM element

the WebVR API (3)Head Tracking
// polyfill
var getVRDevices = navigator.mozGetVRDevices /* FF */ ||
navigator.getVRDevices; /* webkit */
var self = this;
getVRDevices().then( gotVRDevices );
function gotVRDevices( devices ) {
var vrInput;
var error;
for ( var i = 0; i < devices.length; ++i ) {
if ( devices[i] instanceof PositionSensorVRDevice ) {
vrInput = devices[i]
self._vrInput = vrInput;
break; // We keep the first we encounter
}
}
}
…
// called once per tick from requestAnimationFrame()
var update = function() {
var vrState = this.getVRState();
if ( !vrState ) {
return;
}
// vrState.hmd.position contains three floats, x, y, z
setCameraPosition(vrState.hmd.position);
// vrState.hmd.rotation contains four floats, quaternion x,y,z,w
setCameraRotation(vrState.hmd.rotation);
};
initialization:
get head-tracking VR device
update camera to match HMD device
position and orientation
animation loop: query HMD device state

WebVR and mobile
 Google Cardboard Showcase
 Mobile Chrome http://g.co/chromevr
 two ways to implement
 for existing mobile browsers – render WebGL Side-by-Side stereo (no need
to query devices), existing fullscreen and browser DeviceOrientation API
 new WebVR API supported in betas of FF and Chrome
http://mozvr.com/downloads/
https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ

WebVR and three.js
Latest stable versions (r71 and up) include stereo rendering
and head tracking
Code
https://github.com/tparisi/WebVR
Demo
http://tparisi.github.io/WebVR/examples/cube-oculus.html
simple examples for
WebVR and Cardboard
style can be found here

 runtime asset format for WebGL, OpenGL ES, and OpenGL applications
 compact representation for download efficiency
 loads quickly into memory
 JSON for scene structure and other high-level constructs
 GL native data types require no additional parsing
 full-featured
 3D constructs (hierarchy, cameras, lights, common materials, animation)
 Full support for shaders and arbitrary materials
 runtime-neutral
 Can be created and used by any tool, app or runtime
gl Transmission Format
a “JPEG for 3D”
http://www.gltf.gl/

"nodes": {
"LOD3sp": {
"children": [],
"matrix": [
// matrix data here
],
"meshes": [
"LOD3spShape-lib"
],
"name": "LOD3sp"
},
…
"meshes": {
"LOD3spShape-lib": {
"name": "LOD3spShape",
"primitives": [
{
"attributes": {
"NORMAL": "accessor_25",
"POSITION": "accessor_23",
"TEXCOORD_0": "accessor_27"
},
"indices": "accessor_21",
"material": "blinn3-fx",
"primitive": 4
}
]
}
},
the structure of a glTF file
"buffers": {
"duck": {
"byteLength": 102040,
"type": "arraybuffer",
"uri": "duck.bin"
}
},
meshes and other visual types
access low-level data
rich data e.g. vertices and animations stored in
binary files
scene structure defined as hierarchy of
nodes

comparison : glTF vs
COLLADA file sizes
Size (Mb) Wine Rack
Super
Murdoch Virtual City Razer Rambler
glTF JSON + .bin 0.58 0.85 2.6 5.1 12.7
COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6
% reduction 27% 53% 53% 32% 60%
0
5
10
15
20
25
30
35
40
45
50
Wine Rack Super Murdoch Virtual City Razer Rambler
COLLADA (.dae)
glTF JSON + .bin

comparison : glTF vs
COLLADA load times
0
1
2
3
4
5
6
7
Wine Rack Razer Virtual City Super
Murdoch
Rambler
COLLADA (.dae)
glTF
glTF w BufferGeometry
Wine Rack Razer Virtual City Super Murdoch Rambler
glTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69
glTF 0.08 0.36 0.15 0.27 1.86
COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88
%reduction 67% 94% 91% 62% 82%

three.js Loader
https://github.com/mrdoob/three.js/
It’s the native format!
http://cesiumjs.org/
Babylon.js Loader (in development)
http://www.babylonjs.com/
collada2gltf converter
https://github.com/KhronosGroup/glTF
FBX to glTF Converter
(in development)
Drag and drop convertor coming
http://gltf.autodesk.io/
Online drag and drop COLLADA
to glTF converter
http://cesiumjs.org/convertmodel.html
PIPELINE TOOLS
adoption

WebGL ecosystem
game engines/IDEs
Goo Engine
*http://www.gootechnologies.com/
Verold http://verold.com/ *
Turbulenz https://turbulenz.com/
PlayCanvas http://www.playcanvas.com/
Sketchfab https://sketchfab.com/
Unreal *https://www.unrealengine.com/
Unity * http://unity3d.com/#unity-5
scene graph libraries/page frameworks
Three.js
http://threejs.org/
SceneJS
http://scenejs.org/
BabylonJS
http://www.babylonjs.com/
GLAM
https://github.com/tparisi/glam
WebVR video players
eleVR
https://github.com/hawksley/eleVR-Web-Player
Littlstar
https://github.com/littlstar/slant-player
* not open source

Links
WebGL 2
 Browsers
https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
 Live Demo
http://toji.github.io/webgl2-particles/
 Specification
https://www.khronos.org/registry/webgl/specs/latest/2.0/#5
WebVR
 Browsers
Firefox http://mozvr.com/downloads/
Desktop Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
Mobile Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
 Showcases
http://mozvr.com/
http://vr.chromeexperiments.com/
 Mailing List
web-vr-discuss@mozilla.org
 Example Code
https://github.com/tparisi/WebVR
 Specification
http://mozvr.github.io/webvr-spec/webvr.html
glTF
 Project Page
http://www.gltf.gl/

COMING November 2015

WebGL: The Next Generation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WebGL: The Next Generation

Similar to WebGL: The Next Generation (20)

More from Tony Parisi

More from Tony Parisi (9)

Recently uploaded

Recently uploaded (20)

WebGL: The Next Generation