webgl: gpu acceleration for the open web guest lecture: patrick cozzi analytical graphics, inc....
TRANSCRIPT
![Page 1: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/1.jpg)
WebGL: GPU Acceleration for the open web
Guest Lecture: Patrick CozziAnalytical Graphics, Inc.University of Pennsylvania
![Page 2: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/2.jpg)
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
![Page 3: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/3.jpg)
What do I do?
OpenGL InsightsAnalytical Graphics, Inc.
If you are curious, see http://www.seas.upenn.edu/~pcozzi/
developer lecturer author editor
![Page 4: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/4.jpg)
WebGL for Web Developers
The web hasText ImagesVideo
What is the next media-type?
![Page 5: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/5.jpg)
WebGL for Web Developers
The web hasText ImagesVideo
What is the next media-type?
3D3D
![Page 6: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/6.jpg)
WebGL for Graphics Developers
We want to supportWindows, Linux, MacDesktop and mobile
How?
![Page 7: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/7.jpg)
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
![Page 8: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/8.jpg)
Demos
Google Bodyhttp://bodybrowser.googlelabs.com/
EmberWindhttp://operasoftware.github.com/Emberwind/
![Page 9: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/9.jpg)
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
![Page 10: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/10.jpg)
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/
![Page 11: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/11.jpg)
WebGL
Also lacks the latest bells and whistlesAtomicsTexture load store…
But is a very capable graphics API that is supported by lots of GPUs
![Page 12: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/12.jpg)
WebGL
If you know OpenGL, you already know WebGL If you know C++, the real learning curve is
JavaScript
![Page 13: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/13.jpg)
WebGL Alternatives?
Flash Silverlight Java Applets Unity
![Page 14: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/14.jpg)
WebGL
Creating a context is easy:
// HTML:
<canvas id="glCanvas" width="1024" height="768"></canvas>
// JavaScript:
var gl = document.getElementById("glCanvas").getContext("experimental-webgl");
![Page 15: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/15.jpg)
WebGL
The rest is similar to desktop OpenGL:
// ...
gl.bindBuffer(/* ... */);
gl.vertexAttribPointer(/* ... */);
gl.useProgram(/* ... */);
gl.drawArrays(/* ... */);
Checkout http://learningwebgl.com/
![Page 16: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/16.jpg)
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/
![Page 17: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/17.jpg)
WebGL Performance
Performance can be very good. Why?
![Page 18: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/18.jpg)
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
![Page 19: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/19.jpg)
WebGL and other APIs
Take advantage of other web APIs:HTML5 <video>2D <canvas>CSS transformsComposite UI elementsWeb workersTyped Arrays
![Page 20: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/20.jpg)
Demos
WebGL Skinhttp://alteredqualia.com/three/examples/webgl_materials_skin.html
WebGL Waterhttp://madebyevan.com/webgl-water/
![Page 21: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/21.jpg)
WebGL support is good, and it is getting
better…
![Page 22: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/22.jpg)
Desktop WebGL Support
In September, 2011
- Windows Only
- 3rd Party Plugins available
See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
![Page 23: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/23.jpg)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Windows 7 with WebGL support (blue)
![Page 24: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/24.jpg)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Windows XP with WebGL support (blue)
![Page 25: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/25.jpg)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Mac with WebGL support (blue)
![Page 26: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/26.jpg)
Desktop WebGL Support
See http://people.mozilla.org/~bjacob/gfx_features_stats/
% Firefox users on Linux with WebGL support (blue)
![Page 27: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/27.jpg)
Desktop WebGL Support
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/
![Page 28: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/28.jpg)
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
![Page 29: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/29.jpg)
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
![Page 30: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/30.jpg)
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
![Page 31: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/31.jpg)
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
![Page 32: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/32.jpg)
WebGL Support on your System
http://webglreport.sourceforge.net/
Disclosure: My awesome intern wrote this
![Page 33: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/33.jpg)
Browsers are becoming like
operating systems…
![Page 34: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/34.jpg)
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
![Page 35: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/35.jpg)
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
![Page 36: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/36.jpg)
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
![Page 37: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/37.jpg)
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
![Page 38: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/38.jpg)
Browser Architecture
In a multi-process is gl.Get* slow? Why?
![Page 39: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/39.jpg)
Browser Architecture
Other browsers also use a multi-process architecture in one form or another
![Page 40: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/40.jpg)
Demos
Javascript Canvas Raytracerhttp://jupiter909.com/mark/jsrt.html
WebGL Path Tracinghttp://madebyevan.com/webgl-path-tracing/
![Page 41: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/41.jpg)
The Joys of JavaScript
Skip the next 30 slides if you already know JavaScript
![Page 42: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/42.jpg)
JavaScript is weakly typed…
![Page 43: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/43.jpg)
JavaScript Type System
short, int, float, double. Who needs them?
var n = 1;
![Page 44: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/44.jpg)
JavaScript Type System
JavaScript has numbers, strings, and booleans:
var n = 1;
var s = “WebGL”;
var b = true;
![Page 45: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/45.jpg)
JavaScript Type System
This compiles:
var n = 1;
var s = “WebGL”;
var b = true;
var sum = n + s + b;
![Page 46: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/46.jpg)
JavaScript is a functional language…
![Page 47: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/47.jpg)
JavaScript Functions
Looks familiar:
Functions are first-class objects, so…
function add(x, y) {
return x + y;
}
var sum = add(1, 2);
![Page 48: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/48.jpg)
JavaScript Functions
Functions are objects:
var add = function(x, y) {
return x + y;
};
var sum = add(1, 2);
![Page 49: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/49.jpg)
JavaScript Functions
Pass functions to functions:
var add = function // ...
function execute(op, x, y) {
return op(x, y);
}
var sum = execute(add, 1, 2);
![Page 50: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/50.jpg)
JavaScript Anonymous Functions
Why name functions?
function execute(op, x, y) // ...
var sum = execute(function(x, y) {
return x + y;
}, 1, 2);
![Page 51: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/51.jpg)
JavaScript Closures
Why limit scope?
var z = 3;
var sum = execute(function(x, y) {
return x + y + z;
}, 1, 2);
![Page 52: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/52.jpg)
JavaScript is a dynamic language…
![Page 53: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/53.jpg)
JavaScript Object Literals
Who needs struct? Create objects on the fly:
var position = {
x : 1.0,
y : 2.0
};
![Page 54: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/54.jpg)
JavaScript Object Literals
Why not add fields on the fly too?
var position = {
x : 1.0,
y : 2.0
};
position.z = 3.0;
![Page 55: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/55.jpg)
JavaScript Object Literals
Who needs class?
![Page 56: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/56.jpg)
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);
}
};
![Page 57: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/57.jpg)
JavaScript Object Literals
Why not change min()?
position.z = 3.0;
position.min = function() {
return Math.min(this.x, this.y,
this.z);
};
![Page 58: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/58.jpg)
JavaScript Object Literals
Useful for passing to functions. Why?
![Page 59: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/59.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick(322, 40, 5, 4);
![Page 60: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/60.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick({
x : 322,
y : 40,
width : 5,
height : 4
});
![Page 61: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/61.jpg)
Demos
World Flightshttp://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/
WebGL Jellyfishhttp://chrysaora.com/
![Page 62: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/62.jpg)
JavaScript does object-oriented…
![Page 63: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/63.jpg)
JavaScript Constructor Functions
function Vector(x, y) {
this.x = x;
this.y = y;
}
var v = new Vector(1, 2);
![Page 64: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/64.jpg)
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:
![Page 65: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/65.jpg)
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:
![Page 66: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/66.jpg)
JavaScript Polymorphism
No need for virtual functions
function draw(model) {
model.setRenderState();
model.render();
}
![Page 67: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/67.jpg)
JavaScript Polymorphism
No need for virtual functions
var level = {
setRenderState : function() // ...
render : function() // ...
};
draw(level); // Just works
![Page 68: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/68.jpg)
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
![Page 69: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/69.jpg)
JavaScript Advice
Use JSLint Have excellent test coverage Use the Chrome and Firefox debuggers
![Page 70: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/70.jpg)
Demos
WebGL Inspectorhttp://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html
The Sproingieshttp://www.snappymaria.com/webgl/Sproingies.html
![Page 71: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/71.jpg)
WebGL developers now need to think about security…
![Page 72: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/72.jpg)
Cross-Origin Resource Sharing
Images can’t always be used as texture sources. Why?
![Page 73: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/73.jpg)
Cross-Origin Resource Sharing
var img = new Image();
img.onload = function() {
gl.texImage2D(/* ... */, img);
};
img.src = "image.png";
Same domain is OK:
![Page 74: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/74.jpg)
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:
![Page 75: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/75.jpg)
Cross-Origin Resource Sharing
Not all servers support CORS:
Browser
www.your-domain.com www.another-domain.com
html/js/cssfiles
Images filesused for textures
![Page 76: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/76.jpg)
Cross-Origin Resource Sharing
Use a proxy server:
Browser
www.your-domain.com
www.another-domain.com
html/js/cssfiles
Images filesused for textures
Images filesused 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
![Page 77: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/77.jpg)
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
![Page 78: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/78.jpg)
Demos
Geoscope Sandbox (will be released soon )http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html
![Page 79: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/79.jpg)
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
![Page 80: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/80.jpg)
WebGL Resources
WebGL Camps: http://www.webglcamp.com
Learning WebGL: http://learningwebgl.com
![Page 81: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/81.jpg)
JavaScript Resources
I promise I do not work for O'Reilly or Yahoo
![Page 82: WebGL: GPU Acceleration for the open web Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649c995503460f94956712/html5/thumbnails/82.jpg)
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/