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

// JavaScript: var gl = document.getElementById("glCanvas") .getContext("experimental-");

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 Demos

Take advantage of other web APIs: HTML5

WebGL Skin WebGL Water http://alteredqualia.com/three/examples/webgl_materials_skin. 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 if supported:

var img = new Image(); var img = new Image(); img.onload = function() { img.onload = function() { gl.texImage2D(/* ... */, img); gl.texImage2D(/* ... */, img); }; }; img.src = "image.png"; img.crossOrigin = "anonymous"; img.src = "http://another-domain.com/image.png";

Cross-Origin Resource Sharing Cross-Origin Resource Sharing

Not all servers support CORS: Use a proxy server:

www.another-domain.com www.your-domain.com www.another-domain.com Images files html/js/css used for textures files Images files www.your-domain.com Browser used for textures “proxy.php?http://another- html/js/css Images files domain.com/image.png" files used for textures

Browser

See http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp/ags_proxy.htm Denial of Service Attacks Demos

Long draw calls Complicated shaders Big vertex buffers Solutions Kill long draw calls Forbid further rendering

Geoscope Sandbox (will be released soon ☺) http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html Lots of WebGL security info: http://learningwebgl.com/blog/?p=3890

WebGL Libraries WebGL Resources

Three.js: https://github.com/mrdoob/three.js/ WebGL Camps: http://www.webglcamp.com SceneJS: http://scenejs.org/ Learning WebGL: http://learningwebgl.com PhiloGL: http://senchalabs.github.com/philogl/ SpiderGL: http://spidergl.org/ Many more: http://www.khronos.org/webgl/wiki/User_Contributions JavaScript Resources

By the way, WebCL is coming

http://www.khronos.org/webcl/ Prototypes for Firefox and WebKit are available

Interactive WebCL kernel editor: http://webcl.nokiaresearch.com/kerneltoy/ I promise I do not work for O'Reilly or Yahoo