Upload
tony-parisi
View
2.341
Download
0
Embed Size (px)
Citation preview
Tony ParisiOctober, 2015
WebGL:the next
generation
about me
http://www.tonyparisi.com 05/03/2023
[email protected]: 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 [email protected]
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