Goals Entice you to use WebGL by showing: WebGL: How WebGL brings 3D to the masses The joys of JavaScript GPU Acceleration for the open web Demos galore Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania OpenGL experience is assumed; web experience is not What do I do? WebGL for Web Developers The web has Text Images Video Analytical OpenGL Insights Graphics, Inc. What is the next media-type? developer lecturer author editor If you are curious, see http://www.seas.upenn.edu/~pcozzi/ WebGL for Web Developers WebGL for Graphics Developers The web has We want to support Text Windows, Linux, Mac Images Desktop and mobile Video How? What is the next media-type? 3D Bring 3D to the Masses Demos Put it in on a webpage Does not require a plugin or install Does not require administrator rights Make it run on most GPUs Google Body EmberWind http://bodybrowser.googlelabs.com/ http://operasoftware.github.com/Emberwind/ WebGL WebGL Includes Does not include OpenGL ES 2.0 for JavaScript Vertex shaders Geometry shaders Seriously, JavaScript Fragment shaders Tessellation shaders Vertex buffers Vertex Array Objects Textures Multiple render targets Framebuffers Floating-point textures Render states Compressed textures … FS depth writes … Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile- See http://www.khronos.org/registry/webgl/specs/latest/ Ecosystem Aug 11 pdf WebGL WebGL Also lacks the latest bells and whistles If you know OpenGL, you already know WebGL Atomics If you know C++, the real learning curve is Texture load store JavaScript … But is a very capable graphics API that is supported by lots of GPUs WebGL Alternatives? WebGL Flash Creating a context is easy: Silverlight // HTML: Java Applets <canvas id="glCanvas" width="1024" Unity height="768"></canvas> // JavaScript: var gl = document.getElementById("glCanvas") .getContext("experimental-webgl"); WebGL WebGL The rest is similar to desktop OpenGL: Create an animation loop: // ... (function tick(){ gl.bindBuffer(/* ... */); // ... GL calls to draw scene gl.vertexAttribPointer(/* ... */); window.requestAnimationFrame(tick); gl.useProgram(/* ... */); })(); gl.drawArrays(/* ... */); Checkout http://learningwebgl.com/ You want this to work cross-browser. See http://paulirish.com/2011/requestanimationframe-for-smart-animating/ WebGL Performance WebGL Performance Performance can be very good. Why? Performance can be very good. Why? The GPU is still doing the rendering Batch! Draw multiple objects with one draw call Sort by texture Push work into shaders See http://www.youtube.com/watch?v=rfQ8rKGTVlg WebGL and other APIs Demos Take advantage of other web APIs: HTML5 <video> 2D <canvas> CSS transforms Composite UI elements Web workers Typed Arrays WebGL Skin WebGL Water http://alteredqualia.com/three/examples/webgl_materials_skin.html http://madebyevan.com/webgl-water/ Desktop WebGL Support WebGL support is In September, 2011 good, and it is getting better… -3rd Party Plugins available - Windows Only See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation Desktop WebGL Support Desktop WebGL Support % Firefox users on Windows 7 with WebGL support (blue) % Firefox users on Windows XP with WebGL support (blue) See http://people.mozilla.org/~bjacob/gfx_features_stats/ See http://people.mozilla.org/~bjacob/gfx_features_stats/ Desktop WebGL Support Desktop WebGL Support % Firefox users on Mac with WebGL support (blue) % Firefox users on Linux with WebGL support (blue) See http://people.mozilla.org/~bjacob/gfx_features_stats/ See http://people.mozilla.org/~bjacob/gfx_features_stats/ Desktop WebGL Support Mobile WebGL Support Windows In September, 2011 No OpenGL driver installed? Old driver? Only 35% of Windows XP machines have GL 2 drivers Firefox Mobile – “Fennec” Buggy driver? •Performance improvements possibly this this year No problem: Stock Browser ANGLE – Almost Native Graphics Layer Engine •Demo at SIGGRAPH 2011. NVIDIA is working on it. OpenGL ES 2.0 Direct3D 9 See http://code.google.com/p/angleproject/ Mobile WebGL Support HTML5 on Mobile In September, 2011 Touch events Test with http://www.snappymaria.com/misc/TouchEventTest_v2.html Will be in iOS 5 for iAd developers Still need multi-touch in Firefox Mobile Geolocation Device orientation and motion The future of HTML5 and WebGL on mobile is very promising See http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-up-for-webgl-graphics-in-iads/ By the way, mobile is really important: WebGL Support on your System http://webglreport.sourceforge.net/ See http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/OpenGL-ES-and-Mobile-Trends_Aug-11.pdf Disclosure: My awesome intern wrote this Browser Architecture Browsers are Single Process becoming like operating systems… See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Browser Architecture Chrome’s Multi-process Chrome’s Multi-process See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Browser Architecture Chrome’s Multi-process In a multi-process is gl.Get* slow? Why? See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Demos Other browsers also use a multi-process architecture in one form or another Javascript Canvas Raytracer WebGL Path Tracing http://jupiter909.com/mark/jsrt.html http://madebyevan.com/webgl-path-tracing/ The Joys of JavaScript is weakly JavaScript typed… Skip the next 30 slides if you already know JavaScript JavaScript Type System JavaScript Type System short, int, float, double. Who JavaScript has numbers, strings, and needs them? booleans: var n = 1; var n = 1; var s = “WebGL”; var b = true; JavaScript Type System This compiles: JavaScript is a var n = 1; var s = “WebGL”; functional language… var b = true; var sum = n + s + b; JavaScript Functions JavaScript Functions Looks familiar: Functions are objects: function add(x, y) { var add = function(x, y) { return x + y; return x + y; } }; var sum = add(1, 2); var sum = add(1, 2); Functions are first-class objects, so… JavaScript Functions JavaScript Anonymous Functions Pass functions to functions: Why name functions? var add = function // ... function execute(op, x, y) // ... function execute(op, x, y) { var sum = execute(function(x, y) { return op(x, y); return x + y; } }, 1, 2); var sum = execute(add, 1, 2); JavaScript Closures Why limit scope? var z = 3; JavaScript is a var sum = execute(function(x, y) { dynamic language… return x + y + z; }, 1, 2); JavaScript Object Literals JavaScript Object Literals Who needs struct? Create objects on Why not add fields on the fly too? the fly: var position = { var position = { x : 1.0, x : 1.0, y : 2.0 y : 2.0 }; }; position.z = 3.0; JavaScript Object Literals JavaScript Object Literals Who needs class? Who needs class? Create functions too: var position = { x : 1.0, y : 2.0, min : function() { return Math.min(this.x, this.y); } }; JavaScript Object Literals JavaScript Object Literals Why not change min()? Useful for passing to functions. Why? position.z = 3.0; position.min = function() { return Math.min(this.x, this.y, this.z); }; JavaScript Object Literals JavaScript Object Literals Useful for passing to functions. Why? Useful for passing to functions. Why? What do these arguments mean? What do these arguments mean? pick(322, 40, 5, 4); pick({ x : 322, y : 40, width : 5, height : 4 }); Demos JavaScript does object-oriented… World Flights WebGL Jellyfish http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ http://chrysaora.com/ JavaScript Constructor Functions JavaScript Constructor Functions Objects can have functions: function Vector(x, y) { function Vector(x, y) { this.x = x; this.x = x; this.y = y; this.y = y; } this.min = function() { return Math.min(this.x, this.y); var v = new Vector(1, 2); }; } JavaScript Constructor Functions JavaScript Polymorphism Objects have prototypes: No need for virtual functions function Vector(x, y) { function draw(model) { this.x = x; model.setRenderState(); this.y = y; model.render(); } } Vector.prototype.min = function() { return Math.min(this.x, this.y); }; JavaScript Polymorphism JavaScript Build Pipeline No need for virtual functions Different than C++ Goal: fast downloads var level = { Common: setRenderState : function() // ... .js One render : function() // ... Concatenate Minify “Compressed” files .js file .js file }; Alternative: fine-grain modules draw(level); // Just works How do you deploy shaders? See http://www.julienlecomte.net/blog/2007/09/16/ JavaScript Advice Demos Use JSLint Have excellent test coverage Use the Chrome and Firefox debuggers The Sproingies WebGL Inspector http://www.snappymaria.com/webgl/Sproingies.html http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html Cross-Origin Resource Sharing Images can’t always be used as texture WebGL developers sources. Why? now need to think about security… Cross-Origin Resource Sharing Cross-Origin Resource Sharing Same domain is OK: Another domain requires CORS