Tony ParisiOctober, 2015

WebGL:the next

generation

about me

http://www.tonyparisi.com 05/03/2023

CONTACTtparisi@gmail.comskype: auradeluxehttp://twitter.com/auradeluxe                   http://www.tonyparisi.com/http://www.learningwebgl.com/

GET THE BOOKS!

WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966

MEETUPShttp://www.meetup.com/WebGL-Developers-Meetup/

http://www.meetup.com/Web-VR/BOOK CODE

https://github.com/tparisi/WebGLBookhttps://github.com/tparisi/Programming3DApplications

GET GLAMhttp://www.glamjs.org/https://github.com/tparisi/glam/

WORKhttp://www.wevr.com/

CREDSCo-creator, VRML and X3D

05/03/2023

http://www.tonyparisi.com

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

05/03/2023

the 3D rendering standard

http://www.tonyparisi.com

3B seats.Q.E.D.

WebGL is on all desktop

mobile browsers

05/03/2023

http://www.tonyparisi.com

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/

digitalmarketing

games

architecture

art

05/03/2023

http://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/

05/03/2023

http://www.tonyparisi.com

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

05/03/2023

http://www.tonyparisi.com

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

05/03/2023

http://www.tonyparisi.com

a simple example

inspired by the lessons atLearning WebGLhttp://www.learningwebgl.com/

05/03/2023

http://www.tonyparisi.com

drawing function 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 matricesto the shader

set the texture and pass to the shader

draw the object

(this part is key; no shader, no pixels!!!)

05/03/2023

http://www.tonyparisi.com

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 ahigh level using standard3D graphics concepts

can render to WebGL, 2D canvas, SVG and CSS3

three.js: the most popular WebGL library

05/03/2023

http://www.tonyparisi.com

2major upgrade

based on OpenGL ES 3.0

https://www.youtube.com/watch?v=2v6iLpY7j5M

05/03/2023

http://www.tonyparisi.com

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

2

05/03/2023

http://www.tonyparisi.com

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…

05/03/2023

http://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 Demohttp://toji.github.io/webgl2-particles/

development status

2

05/03/2023

http://www.tonyparisi.com

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 Googlehttp://media.tojicode.com/q3bsp/

05/03/2023

http://www.tonyparisi.com

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

05/03/2023

http://www.tonyparisi.com

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 modefor this VR device

fullscreen mode requires a DOM element

05/03/2023

http://www.tonyparisi.com

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

05/03/2023

http://www.tonyparisi.com

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 Chromehttp://mozvr.com/downloads/https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ

05/03/2023

http://www.tonyparisi.com

WebVR and three.js

Latest stable versions (r71 and up) include stereo rendering and head tracking

Codehttps://github.com/tparisi/WebVRDemohttp://tparisi.github.io/WebVR/examples/cube-oculus.html

simple examples for WebVR and Cardboard style can be found here

05/03/2023

http://www.tonyparisi.com

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 Formata “JPEG for 3D”

http://www.gltf.gl/

05/03/2023

http://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

05/03/2023

http://www.tonyparisi.com

comparison : glTF vs COLLADA file sizes

Size (Mb) Wine RackSuper

Murdoch Virtual City Razer RamblerglTF JSON + .bin 0.58 0.85 2.6 5.1 12.7COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6% reduction 27% 53% 53% 32% 60%

Wine Rack Super Murdoch Virtual City Razer Rambler05

101520253035404550

COLLADA (.dae)glTF JSON + .bin

comparison : glTF vs COLLADA load times

Wine Rack Razer Virtual City Super Murdoch

Rambler0

1

2

3

4

5

6

7

COLLADA (.dae)glTFglTF w BufferGeometry

Wine Rack Razer Virtual City Super Murdoch RamblerglTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69glTF 0.08 0.36 0.15 0.27 1.86COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88%reduction 67% 94% 91% 62% 82%

05/03/2023

http://www.tonyparisi.com

three.js Loaderhttps://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 cominghttp://gltf.autodesk.io/

Online drag and drop COLLADA to glTF converter

http://cesiumjs.org/convertmodel.html

PIPELINE TOOLS

adoption

05/03/2023

http://www.tonyparisi.com

WebGL ecosystemgame 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/

SceneJShttp://scenejs.org/

BabylonJShttp://www.babylonjs.com/

GLAMhttps://github.com/tparisi/glam

WebVR video players

eleVRhttps://github.com/hawksley/eleVR-Web-Player

Littlstarhttps://github.com/littlstar/slant-player* not open source

05/03/2023

http://www.tonyparisi.com

LinksWebGL 2 Browsers

https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation

Live Demohttp://toji.github.io/webgl2-particles/

Specificationhttps://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

Showcaseshttp://mozvr.com/

http://vr.chromeexperiments.com/

Mailing Listweb-vr-discuss@mozilla.org

Example Codehttps://github.com/tparisi/WebVR

Specificationhttp://mozvr.github.io/webvr-spec/webvr.html

glTF Project Page

http://www.gltf.gl/

05/03/2023

http://www.tonyparisi.com

COMING November 2015

Tony ParisiOctober, 2015

WebGL:the next

generation