webgl: gpu acceleration for the open web

WebGL: GPU Acceleration for the open web

Patrick CozziAnalytical Graphics, Inc.University of Pennsylvania

Goals

Entice you to use WebGL by showing:How WebGL brings 3D to the massesThe joys of JavaScriptDemos galore

OpenGL experience is assumed; web experience is not

What do I do?

OpenGL InsightsAnalytical Graphics, Inc.

If you are curious, see http://www.seas.upenn.edu/~pcozzi/

developer lecturer author editor

WebGL for Web Developers

The web hasText ImagesVideo

What is the next media-type?

WebGL for Web Developers

The web hasText ImagesVideo

What is the next media-type?

3D3D

WebGL for Graphics Developers

We want to supportWindows, Linux, MacDesktop and mobile

How?

Bring 3D to the Masses

Put it in on a webpageDoes not require a plugin or installDoes not require administrator rights

Make it run on most GPUs

Demos

Google Bodyhttp://bodybrowser.googlelabs.com/

EmberWindhttp://operasoftware.github.com/Emberwind/

WebGL

Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf

OpenGL ES 2.0 for JavaScriptSeriously, JavaScript

WebGL Includes

Vertex shadersFragment shadersVertex buffersTexturesFramebuffersRender states…

Does not includeGeometry shadersTessellation shadersVertex Array ObjectsMultiple render targetsFloating-point texturesCompressed texturesFS depth writes…

See http://www.khronos.org/registry/webgl/specs/latest/

WebGL

Also lacks the latest bells and whistlesAtomicsTexture load store…

But is a very capable graphics API that is supported by lots of GPUs

WebGL

If you know OpenGL, you already know WebGL If you know C++, the real learning curve is

JavaScript

WebGL Alternatives?

Flash Silverlight Java Applets Unity

WebGL

Creating a context is easy:

// HTML:

<canvas id="glCanvas" width="1024" height="768"></canvas>

// JavaScript:

var gl = document.getElementById("glCanvas").getContext("experimental-webgl");

WebGL

The rest is similar to desktop OpenGL:

// ...

gl.bindBuffer(/* ... */);

gl.vertexAttribPointer(/* ... */);

gl.useProgram(/* ... */);

gl.drawArrays(/* ... */);

Checkout http://learningwebgl.com/

WebGL

Create an animation loop:

(function tick(){

// ... GL calls to draw scene

window.requestAnimationFrame(tick);

})();

You want this to work cross-browser. See http://paulirish.com/2011/requestanimationframe-for-smart-animating/

WebGL Performance

Performance can be very good. Why?

WebGL Performance

Performance can be very good. Why?The GPU is still doing the renderingBatch!

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

Take advantage of other web APIs:HTML5 <video>2D <canvas>CSS transformsComposite UI elementsWeb workersTyped Arrays

Demos

WebGL Skinhttp://alteredqualia.com/three/examples/webgl_materials_skin.html

WebGL Waterhttp://madebyevan.com/webgl-water/

WebGL support is good, and it is getting

better…

Desktop WebGL Support

In September, 2011

- Windows Only

- 3rd Party Plugins available

See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation


See http://people.mozilla.org/~bjacob/gfx_features_stats/

% Firefox users on Windows 7 with WebGL support (blue)



% Firefox users on Windows XP with WebGL support (blue)



% Firefox users on Mac with WebGL support (blue)



% Firefox users on Linux with WebGL support (blue)


WindowsNo OpenGL driver installed? Old driver?

Only 35% of Windows XP machines have GL 2 drivers

Buggy driver?No problem:

ANGLE – Almost Native Graphics Layer Engine

OpenGL ES 2.0

Direct3D 9

See http://code.google.com/p/angleproject/

Mobile WebGL Support

In September, 2011

Stock Browser•Demo at SIGGRAPH 2011. NVIDIA is working on it.

Firefox Mobile – “Fennec”•Performance improvements possibly this this year

Mobile WebGL Support

In September, 2011

See http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-up-for-webgl-graphics-in-iads/

Will be in iOS 5 for iAd developers

HTML5 on Mobile

Touch eventsTest with http://www.snappymaria.com/misc/TouchEventTest_v2.html

Still need multi-touch in Firefox Mobile Geolocation Device orientation and motion

The future of HTML5 and WebGL on mobile is very promising

By the way, mobile is really important:

See http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/OpenGL-ES-and-Mobile-Trends_Aug-11.pdf

WebGL Support on your System

http://webglreport.sourceforge.net/

Disclosure: My awesome intern wrote this

Browsers are becoming like

operating systems…

Browser Architecture

Single Process

See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf


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


In a multi-process is gl.Get* slow? Why?


Other browsers also use a multi-process architecture in one form or another

Demos

Javascript Canvas Raytracerhttp://jupiter909.com/mark/jsrt.html

WebGL Path Tracinghttp://madebyevan.com/webgl-path-tracing/

The Joys of JavaScript

Skip the next 30 slides if you already know JavaScript

JavaScript is weakly typed…

JavaScript Type System

short, int, float, double. Who needs them?

var n = 1;


JavaScript has numbers, strings, and booleans:

var n = 1;

var s = “WebGL”;

var b = true;


This compiles:

var n = 1;

var s = “WebGL”;

var b = true;

var sum = n + s + b;

JavaScript is a functional language…

JavaScript Functions

Looks familiar:

Functions are first-class objects, so…

function add(x, y) {

return x + y;

}

var sum = add(1, 2);


Functions are objects:

var add = function(x, y) {

return x + y;

};

var sum = add(1, 2);


Pass functions to functions:

var add = function // ...

function execute(op, x, y) {

return op(x, y);

}

var sum = execute(add, 1, 2);

JavaScript Anonymous Functions

Why name functions?

function execute(op, x, y) // ...

var sum = execute(function(x, y) {

return x + y;

}, 1, 2);

JavaScript Closures

Why limit scope?

var z = 3;

var sum = execute(function(x, y) {

return x + y + z;

}, 1, 2);

JavaScript is a dynamic language…

JavaScript Object Literals

Who needs struct? Create objects on the fly:

var position = {

x : 1.0,

y : 2.0

};


Why not add fields on the fly too?

var position = {

x : 1.0,

y : 2.0

};

position.z = 3.0;


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

}

};


Why not change min()?

position.z = 3.0;

position.min = function() {

return Math.min(this.x, this.y,

this.z);

};


Useful for passing to functions. Why?


Useful for passing to functions. Why? What do these arguments mean?

pick(322, 40, 5, 4);


Useful for passing to functions. Why? What do these arguments mean?

pick({

x : 322,

y : 40,

width : 5,

height : 4

});

Demos

World Flightshttp://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/

WebGL Jellyfishhttp://chrysaora.com/

JavaScript does object-oriented…

JavaScript Constructor Functions

function Vector(x, y) {

this.x = x;

this.y = y;

}

var v = new Vector(1, 2);



this.x = x;

this.y = y;

this.min = function() {


};

}

Objects can have functions:



this.x = x;

this.y = y;

}

Vector.prototype.min = function() {


};

Objects have prototypes:

JavaScript Polymorphism

No need for virtual functions

function draw(model) {

model.setRenderState();

model.render();

}

JavaScript Polymorphism

No need for virtual functions

var level = {

setRenderState : function() // ...

render : function() // ...

};

draw(level); // Just works

JavaScript Build Pipeline

See http://www.julienlecomte.net/blog/2007/09/16/

Concatenate Minify

Different than C++ Goal: fast downloads Common:

Alternative: fine-grain modules How do you deploy shaders?

.jsfiles

One .js file

“Compressed” .js file

JavaScript Advice

Use JSLint Have excellent test coverage Use the Chrome and Firefox debuggers

Demos

WebGL Inspectorhttp://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html

The Sproingieshttp://www.snappymaria.com/webgl/Sproingies.html

WebGL developers now need to think about security…

Cross-Origin Resource Sharing

Images can’t always be used as texture sources. Why?


var img = new Image();

img.onload = function() {

gl.texImage2D(/* ... */, img);

};

img.src = "image.png";

Same domain is OK:


var img = new Image();

img.onload = function() {

gl.texImage2D(/* ... */, img);

};

img.crossOrigin = "anonymous";

img.src =

"http://another-domain.com/image.png";

Another domain requires CORS if supported:


Not all servers support CORS:

Browser

www.your-domain.com www.another-domain.com

html/js/cssfiles

Images filesused for textures


Use a proxy server:

Browser

www.your-domain.com

www.another-domain.com

html/js/cssfiles



“proxy.php?http://another-domain.com/image.png"

See http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp/ags_proxy.htm

Denial of Service Attacks

Long draw callsComplicated shadersBig vertex buffers

SolutionsKill long draw callsForbid further rendering

Lots of WebGL security info: http://learningwebgl.com/blog/?p=3890

Demos

Geoscope Sandbox (will be released soon )http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html

WebGL Libraries

Three.js: https://github.com/mrdoob/three.js/

SceneJS: http://scenejs.org/

PhiloGL: http://senchalabs.github.com/philogl/

SpiderGL: http://spidergl.org/

Many more: http://www.khronos.org/webgl/wiki/User_Contributions

WebGL Resources

WebGL Camps: http://www.webglcamp.com

Learning WebGL: http://learningwebgl.com

JavaScript Resources

I promise I do not work for O'Reilly or Yahoo

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/

webgl: gpu acceleration for the open web

Technology