2. 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
3. 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
4. the 3D rendering standard
10/20/2015http://www.tonyparisi.com
3B seats.
Q.E.D.
WebGL is on all
desktop mobile
browsers
6. 10/20/2015http://www.tonyparisi.com
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/
7. 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
http://www.tonyparisi.com 10/20/2015
8. 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
http://www.tonyparisi.com 10/20/2015
10. 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
http://www.tonyparisi.com 10/20/2015
(this part is key; no shader, no pixels!!!)
11. scary?
use a framework
10/20/2015http://www.tonyparisi.com
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
13. 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()
10/20/2015http://www.tonyparisi.com
14. deferred rendering example
10/20/2015http://www.tonyparisi.com
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…
15. 10/20/2015http://www.tonyparisi.com
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
16. 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
10/20/2015http://www.tonyparisi.com
WebVR:
virtual reality in the browser
Quake 3 WebVR demo, developed by Brandon
Jones of Google
http://media.tojicode.com/q3bsp/
17. the WebVR API (1)
Query for VR Device(s) For Rendering
10/20/2015http://www.tonyparisi.com
// 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
18. the WebVR API (2)
Go Fullscreen (VR Mode)
10/20/2015http://www.tonyparisi.com
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
19. the WebVR API (3)Head Tracking
10/20/2015http://www.tonyparisi.com
// 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
20. 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
10/20/2015http://www.tonyparisi.com
21. WebVR and three.js
Latest stable versions (r71 and up) include stereo rendering
and head tracking
10/20/2015http://www.tonyparisi.com
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
22. 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
10/20/2015http://www.tonyparisi.com
gl Transmission Format
a “JPEG for 3D”
http://www.gltf.gl/
23. 10/20/2015http://www.tonyparisi.com
"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
25. 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%
26. 10/20/2015http://www.tonyparisi.com
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
27. WebGL ecosystem
10/20/2015http://www.tonyparisi.com
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