WebGL: GPU acceleration for the open web

WebGL: GPU Acceleration for the open web Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania

Goals ,[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

WebGL for Web Developers ,[object Object],[object Object],[object Object],[object Object],[object Object],3D

WebGL for Graphics Developers ,[object Object],[object Object],[object Object],[object Object]

Bring 3D to the Masses ,[object Object],[object Object],[object Object],[object Object]

Demos Google Body http://bodybrowser.googlelabs.com/ EmberWind http://operasoftware.github.com/Emberwind/

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

WebGL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],See http://www.khronos.org/registry/webgl/specs/latest/

WebGL ,[object Object],[object Object],[object Object],[object Object],[object Object]

WebGL ,[object Object],[object Object]

WebGL Alternatives? ,[object Object],[object Object],[object Object],[object Object]

WebGL ,[object Object],// HTML: < canvas id = "glCanvas" width = "1024" height = "768" ></ canvas > // JavaScript: var gl = document . getElementById ( "glCanvas" ). getContext ( "experimental-webgl" );

WebGL ,[object Object],// ... gl. bindBuffer ( /* ... */ ); gl. vertexAttribPointer ( /* ... */ ); gl. useProgram ( /* ... */ ); gl. drawArrays ( /* ... */ ); Checkout http://learningwebgl.com/

WebGL ,[object Object],( 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 ,[object Object]

WebGL Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],See http://www.youtube.com/watch?v=rfQ8rKGTVlg

WebGL and other APIs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],- 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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],OpenGL ES 2.0 Direct3D 9 See http://code.google.com/p/angleproject/

Mobile WebGL Support ,[object Object],[object Object],[object Object],[object Object],[object Object]

Mobile WebGL Support ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],Disclosure: My awesome intern wrote this

Browsers are becoming like operating systems…

Browser Architecture ,[object Object],See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf

Browser Architecture ,[object Object]

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 Type System ,[object Object],var n = 1;

JavaScript Type System ,[object Object],var n = 1; var s = “WebGL” ; var b = true ;

JavaScript Type System ,[object Object],var n = 1; var s = “WebGL” ; var b = true ; var sum = n + s + b;

JavaScript is a functional language…

JavaScript Functions ,[object Object],[object Object],function add(x, y) { return x + y; } var sum = add(1, 2);

JavaScript Functions ,[object Object],var add = function (x, y) { return x + y; }; var sum = add(1, 2);

JavaScript Functions ,[object Object],var add = function // ... function execute(op, x, y) { return op(x, y); } var sum = execute(add, 1, 2);

JavaScript Anonymous Functions ,[object Object],function execute(op, x, y) // ... var sum = execute( function (x, y) { return x + y; }, 1, 2);

JavaScript Closures ,[object Object],var z = 3; var sum = execute( function (x, y) { return x + y + z; }, 1, 2);

JavaScript is a dynamic language…

JavaScript Object Literals ,[object Object],var position = { x : 1.0, y : 2.0 };

JavaScript Object Literals ,[object Object],var position = { x : 1.0, y : 2.0 }; position.z = 3.0;

JavaScript Object Literals ,[object Object]

JavaScript Object Literals ,[object Object],var position = { x : 1.0, y : 2.0, min : function () { return Math . min ( this .x, this .y); } };

JavaScript Object Literals ,[object Object],position.z = 3.0; position.min = function () { return Math . min ( this .x, this .y, this .z); };

JavaScript Object Literals ,[object Object],[object Object],pick(322, 40, 5, 4);

JavaScript Object Literals ,[object Object],[object Object],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 ,[object Object],function Vector(x, y) { this .x = x; this .y = y; this .min = function () { return Math . min ( this .x, this .y); }; }

JavaScript Constructor Functions ,[object Object],function Vector(x, y) { this .x = x; this .y = y; } Vector.prototype.min = function () { return Math.min( this .x, this .y); };

JavaScript Polymorphism ,[object Object],function draw(model) { model.setRenderState(); model.render(); }

JavaScript Polymorphism ,[object Object],var level = { setRenderState : function () // ... render : function () // ... }; draw(level); // Just works

JavaScript Build Pipeline See http://www.julienlecomte.net/blog/2007/09/16/ Concatenate Minify ,[object Object],[object Object],[object Object],[object Object],[object Object],.js files One .js file “ Compressed” .js file

JavaScript Advice ,[object Object],[object Object],[object Object]

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…

C ross- O rigin R esource S haring ,[object Object]

C ross- O rigin R esource S haring ,[object Object],var img = new Image (); img.onload = function () { gl. texImage2D ( /* ... */ , img); }; img.src = "image.png" ;

C ross- O rigin R esource S haring ,[object Object],var img = new Image (); img.onload = function () { gl. texImage2D ( /* ... */ , img); }; img.crossOrigin = "anonymous" ; img.src = "http://another-domain.com/image.png" ;

C ross- O rigin R esource S haring ,[object Object],Browser www.your-domain.com www.another-domain.com html/js/css files Images files used for textures

C ross- O rigin R esource S haring ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

WebGL Resources ,[object Object],[object Object]

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à WebGL: GPU acceleration for the open web

Similaire à WebGL: GPU acceleration for the open web (20)

Dernier

Dernier (20)

WebGL: GPU acceleration for the open web

Notes de l'éditeur