WebGL

sixmileugliestInternet and Web Development

Jun 24, 2012 (5 years and 4 months ago)

517 views

WebGL:
GPU Acceleration for the open web
Guest Lecture: Patrick Cozzi
Analytical Graphics, Inc.
University of Pennsylvania
Goals
„
Entice you to use WebGL by showing:
…
How WebGL brings 3D to the masses
…
The joys of JavaScript
…
Demos galore
„
OpenGL experience is assumed; web
experience is not
What do I do?
OpenGL Insights
Analytical
Graphics, Inc.
If you are curious, see http://www.seas.upenn.edu/~pcozzi/
developer lecturer author editor
WebGL for Web Developers
„
The web has
…
Text
…
Images
…
Video
„
What is the next media-type?
WebGL for Web Developers
„
The web has
…
Text
…
Images
…
Video
„
What is the next media-type?
3D
3D
WebGL for Graphics Developers
„
We want to support
…
Windows, Linux, Mac
…
Desktop and mobile
„
How?
Bring 3D to the Masses
„
Put it in on a webpage
…
Does not require a plugin or install
…
Does not require administrator rights
„
Make it run on most GPUs
Demos
Google Body
http://bodybrowser.googlelabs.com/
EmberWind
http://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 JavaScript
…
Seriously, JavaScript
WebGL
„
Includes
…
Vertex shaders
…
Fragment shaders
…
Vertex buffers
…
Textures
…
Framebuffers
…
Render states
…

„
Does not include
…
Geometry shaders
…
Tessellation shaders
…
Vertex Array Objects
…
Multiple render targets
…
Floating-point textures
…
Compressed textures
…
FS depth writes
…

See http://www.khronos.org/registry/webgl/specs/latest/
WebGL
„
Also lacks the latest bells and whistles
…
Atomics
…
Texture 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 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
„
Take advantage of other web APIs:
…
HTML5 <video>
…
2D <canvas>
…
CSS transforms
…
Composite UI elements
…
Web workers
…
Typed Arrays
Demos
WebGL Skin
http://alteredqualia.com/three/examples/webgl_materials_skin.html
WebGL Water
http://madebyevan.com/webgl-water/
WebGL support is
good, and it is getting
better…
Desktop WebGL Support
„
In September, 2011
- Windows Only
- 3
rd
Party Plugins available
See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Windows 7 with WebGL support (blue)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Windows XP with WebGL support (blue)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Mac with WebGL support (blue)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Linux with WebGL support (blue)
Desktop WebGL Support
„
Windows
…
No 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 events
…
Test 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
Browser Architecture
„
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
Browser Architecture
„
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
Browser Architecture
„
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
Browser Architecture
„
In a multi-process is gl.Get* slow?
Why?
Browser Architecture
„
Other browsers also use a multi-process
architecture in one form or another
Demos
Javascript Canvas Raytracer
http://jupiter909.com/mark/jsrt.html
WebGL Path Tracing
http://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 Type System
„
JavaScript has numbers, strings, and
booleans:
var n = 1;
var s = “WebGL”;
var b = true;
JavaScript Type System
„
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);
JavaScript Functions
„
Functions are objects:
var add = function(x, y) {
return x + y;
};
var sum = add(1, 2);
JavaScript Functions
„
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
};
JavaScript Object Literals
„
Why not add fields on the fly too?
var position = {
x : 1.0,
y : 2.0
};
position.z = 3.0;
JavaScript Object Literals
„
Who needs class?
JavaScript Object Literals
„
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
„
Why not change min()?
position.z = 3.0;
position.min = function() {
return Math.min(this.x, this.y,
this.z);
};
JavaScript Object Literals
„
Useful for passing to functions. Why?
JavaScript Object Literals
„
Useful for passing to functions. Why?
„
What do these arguments mean?
pick(322, 40, 5, 4);
JavaScript Object Literals
„
Useful for passing to functions. Why?
„
What do these arguments mean?
pick({
x : 322,
y : 40,
width : 5,
height : 4
});
Demos
World Flights
http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/
WebGL Jellyfish
http://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);
JavaScript Constructor Functions
function Vector(x, y) {
this.x = x;
this.y = y;
this.min = function() {
return Math.min(this.x, this.y);
};
}
„
Objects can have functions:
JavaScript Constructor Functions
function Vector(x, y) {
this.x = x;
this.y = y;
}
Vector.prototype.min = function() {
return Math.min(this.x, this.y);
};
„
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?
.js
files
One
.js file
“Compressed”
.js file
JavaScript Advice
„
Use JSLint
„
Have excellent test coverage
„
Use the Chrome and Firefox debuggers
Demos
WebGL Inspector
http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html
The Sproingies
http://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?
Cross-Origin Resource Sharing
var img = new Image();
img.onload = function() {
gl.texImage2D(/* ... */, img);
};
img.src = "image.png";
„
Same domain is OK:
Cross-Origin Resource Sharing
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:
Cross-Origin Resource Sharing
„
Not all servers support CORS:
Browser
www.your-domain.com
www.another-domain.com
html/js/css
files
Images files
used for textures
Cross-Origin Resource Sharing
„
Use a proxy server:
Browser
www.your-domain.com
www.another-domain.com
html/js/css
files
Images files
used for textures
Images files
used for textures
“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 calls
…
Complicated shaders
…
Big vertex buffers
„
Solutions
…
Kill long draw calls
…
Forbid 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/