WebGL:   GPU Acceleration for the open web Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania
Goals <ul><li>Entice you to use WebGL by showing: </li></ul><ul><ul><li>How WebGL brings 3D to the masses </li></ul></ul><...
What do I do? OpenGL Insights Analytical Graphics, Inc. If you are curious, see  http://www.seas.upenn.edu/~pcozzi/ develo...
WebGL for Web Developers <ul><li>The web has </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><...
WebGL for Web Developers <ul><li>The web has </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><...
WebGL for Graphics Developers <ul><li>We want to support </li></ul><ul><ul><li>Windows, Linux, Mac </li></ul></ul><ul><ul>...
Bring 3D to the Masses <ul><li>Put it in on a webpage </li></ul><ul><ul><li>Does not require a plugin or install </li></ul...
Demos Google Body http://bodybrowser.googlelabs.com/ EmberWind http://operasoftware.github.com/Emberwind/
WebGL <ul><li>OpenGL ES 2.0 for JavaScript </li></ul><ul><ul><li>Seriously, JavaScript </li></ul></ul>Image from  http://w...
WebGL <ul><li>Includes </li></ul><ul><ul><li>Vertex shaders </li></ul></ul><ul><ul><li>Fragment shaders </li></ul></ul><ul...
WebGL <ul><li>Also lacks the latest bells and whistles </li></ul><ul><ul><li>Atomics </li></ul></ul><ul><ul><li>Texture lo...
WebGL <ul><li>If you know  OpenGL , you already know  WebGL </li></ul><ul><li>If you know  C++ , the real learning curve i...
WebGL Alternatives? <ul><li>Flash </li></ul><ul><li>Silverlight </li></ul><ul><li>Java Applets </li></ul><ul><li>Unity </l...
WebGL <ul><li>Creating a context is easy: </li></ul>// HTML: < canvas   id = &quot;glCanvas&quot;  width = &quot;1024&quot...
WebGL <ul><li>The rest is similar to desktop OpenGL: </li></ul>// ... gl. bindBuffer ( /* ... */ ); gl. vertexAttribPointe...
WebGL <ul><li>Create an animation loop: </li></ul>( function  tick(){ // ... GL calls to draw scene window . requestAnimat...
WebGL Performance <ul><li>Performance can be very good.  Why? </li></ul>
WebGL Performance <ul><li>Performance can be very good.  Why? </li></ul><ul><ul><li>The GPU is still doing the rendering <...
WebGL and other APIs <ul><li>Take advantage of other web APIs: </li></ul><ul><ul><li>HTML5 <video> </li></ul></ul><ul><ul>...
Demos WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html WebGL Water http://madebyevan.com/webgl...
WebGL support is good, and it is getting better…
Desktop WebGL Support <ul><li>In September, 2011 </li></ul>- Windows Only - 3 rd  Party Plugins available See  http://www....
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows 7 with WebGL s...
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows XP with WebGL ...
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Mac with WebGL support...
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Linux with WebGL suppo...
Desktop WebGL Support <ul><li>Windows </li></ul><ul><ul><li>No OpenGL driver installed? Old driver? </li></ul></ul><ul><ul...
Mobile WebGL Support <ul><li>In September, 2011 </li></ul><ul><li>Stock Browser </li></ul><ul><li>Demo at SIGGRAPH 2011.  ...
Mobile WebGL Support <ul><li>In September, 2011 </li></ul>See  http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-...
HTML5 on Mobile <ul><li>Touch events </li></ul><ul><ul><li>Test with  http://www.snappymaria.com/misc/TouchEventTest_v2.ht...
By the way, mobile is really important: See  http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile...
WebGL Support on your System <ul><li>http://webglreport.sourceforge.net/ </li></ul>Disclosure:  My  awesome intern  wrote ...
Browsers are becoming like operating systems…
Browser Architecture <ul><li>Single Process </li></ul>See  http://www.khronos.org/assets/uploads/developers/library/2010_s...
Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See  http://www.khronos.org/assets/uploads/developers/librar...
Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See  http://www.khronos.org/assets/uploads/developers/librar...
Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See  http://www.khronos.org/assets/uploads/developers/librar...
Browser Architecture <ul><li>In a multi-process is  gl. Get*  slow?  Why? </li></ul>
Browser Architecture <ul><li>Other browsers also use a multi-process architecture in one form or another </li></ul>
Demos Javascript Canvas Raytracer http://jupiter909.com/mark/jsrt.html WebGL Path Tracing http://madebyevan.com/webgl-path...
The Joys of JavaScript Skip the next 30 slides if you already know JavaScript
JavaScript is weakly typed…
JavaScript Type System <ul><li>short ,  int ,  float ,  double .  Who needs them? </li></ul>var  n = 1;
JavaScript Type System <ul><li>JavaScript has numbers, strings, and booleans: </li></ul>var  n = 1; var  s =  “WebGL” ; va...
JavaScript Type System <ul><li>This compiles: </li></ul>var  n = 1; var  s =  “WebGL” ; var  b =  true ; var  sum = n + s ...
JavaScript is a functional language…
JavaScript Functions <ul><li>Looks familiar: </li></ul><ul><li>Functions are first-class objects, so… </li></ul>function  ...
JavaScript Functions <ul><li>Functions are objects: </li></ul>var  add =  function (x, y) { return  x + y; }; var  sum = a...
JavaScript Functions <ul><li>Pass functions to functions: </li></ul>var  add =  function   // ... function  execute(op, x,...
JavaScript Anonymous  Functions <ul><li>Why name functions? </li></ul>function  execute(op, x, y)  // ... var  sum = execu...
JavaScript Closures <ul><li>Why limit scope? </li></ul>var  z = 3; var  sum = execute( function (x, y) { return  x + y + z...
JavaScript is a dynamic language…
JavaScript Object Literals <ul><li>Who needs  struct ?  Create objects on the fly: </li></ul>var  position = { x : 1.0, y ...
JavaScript Object Literals <ul><li>Why not add fields on the fly too? </li></ul>var  position = { x : 1.0, y : 2.0 }; posi...
JavaScript Object Literals <ul><li>Who needs  class ? </li></ul>
JavaScript Object Literals <ul><li>Who needs  class ?  Create functions too: </li></ul>var  position = { x : 1.0, y : 2.0,...
JavaScript Object Literals <ul><li>Why not change  min() ? </li></ul>position.z = 3.0; position.min =  function () { retur...
JavaScript Object Literals <ul><li>Useful for passing to functions.  Why? </li></ul>
JavaScript Object Literals <ul><li>Useful for passing to functions.  Why? </li></ul><ul><li>What do these arguments mean? ...
JavaScript Object Literals <ul><li>Useful for passing to functions.  Why? </li></ul><ul><li>What do these arguments mean? ...
Demos World Flights http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ WebGL Jellyfish http://chrysaora.c...
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 <ul><li>Objects can have functions: </li></ul>function  Vector(x, y) { this .x = x; this ...
JavaScript Constructor Functions <ul><li>Objects have prototypes: </li></ul>function  Vector(x, y) { this .x = x; this .y ...
JavaScript Polymorphism <ul><li>No need for virtual functions </li></ul>function  draw(model) { model.setRenderState(); mo...
JavaScript Polymorphism <ul><li>No need for virtual functions </li></ul>var  level = { setRenderState :  function ()  // ....
JavaScript Build Pipeline See  http://www.julienlecomte.net/blog/2007/09/16/ Concatenate Minify <ul><li>Different than C++...
JavaScript Advice <ul><li>Use JSLint </li></ul><ul><li>Have excellent test coverage </li></ul><ul><li>Use the Chrome and F...
Demos WebGL Inspector http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html The Sproingies http://www....
WebGL developers now need to think about security…
C ross- O rigin  R esource  S haring <ul><li>Images can’t always be used as texture sources.  Why? </li></ul>
C ross- O rigin  R esource  S haring <ul><li>Same domain is OK: </li></ul>var  img = new  Image (); img.onload =  function...
C ross- O rigin  R esource  S haring <ul><li>Another domain requires  CORS  if supported: </li></ul>var  img = new  Image ...
C ross- O rigin  R esource  S haring <ul><li>Not all servers support CORS: </li></ul>Browser www.your-domain.com www.anoth...
C ross- O rigin  R esource  S haring <ul><li>Use a proxy server: </li></ul>Browser www.your-domain.com www.another-domain....
Denial of Service Attacks <ul><li>Long draw calls </li></ul><ul><ul><li>Complicated shaders </li></ul></ul><ul><ul><li>Big...
Demos Geoscope Sandbox (will be released soon   ) http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html
WebGL Libraries <ul><li>Three.js:  https://github.com/mrdoob/three.js/ </li></ul><ul><li>SceneJS:  http://scenejs.org/ </l...
WebGL Resources <ul><li>WebGL Camps:  http://www.webglcamp.com </li></ul><ul><li>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 We...
Upcoming SlideShare
Loading in...5
×

WebGL: GPU acceleration for the open web

7,700

Published on

An introduction to WebGL for OpenGL developers. Topics include current browser support - as of September 2011 - and JavaScript.

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,700
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
124
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Try “webgl”, then “experimental-webgl”
  • ANGLE Implements GL ES API over D3D 9 Translates GLSL ES to HLSL
  • Touch events: http://www.html5rocks.com/en/mobile/touch.html Geolocation: http://diveintohtml5.org/geolocation.html Orientation and motion: http://www.html5rocks.com/en/tutorials/device/orientation/
  • Each tab is in a separate process – security – one tab can’t crash other tabs.
  • Has to synchronize processes.
  • All numbers are 64-bit IEEE floating-point.
  • All numbers are 64-bit IEEE floating-point.
  • Output is “1WebGLtrue”
  • Anonymous functions are also in C#, etc.
  • Anonymous functions are also in C#, etc.
  • Self-documenting code. Also, you can pass arguments in any order.
  • But there are no classes
  • Constructor functions start with a capital letter by convention.
  • Constructor functions start with a capital letter by convention.
  • Prototype functions can’t access closures in the constructor function.
  • “ Duck typing” Kind of like C# templates.
  • “ Duck typing” Kind of like C# templates.
  • Geoscope source layout Example minified javascript, and then beautifying it with http://jsbeautifier.org/ Shader source can be put into HTML script tags, into separate glsl files downloaded with XMLHttpRequest, or put into JavaScript literals as part of the build process.
  • Long draw calls were also used in early GPGPU days. These calls were killed by some operating systems (I think Windows Vista killed draw calls longer than two seconds).
  • WebGL: GPU acceleration for the open web

    1. 1. WebGL: GPU Acceleration for the open web Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania
    2. 2. Goals <ul><li>Entice you to use WebGL by showing: </li></ul><ul><ul><li>How WebGL brings 3D to the masses </li></ul></ul><ul><ul><li>The joys of JavaScript </li></ul></ul><ul><ul><li>Demos galore </li></ul></ul><ul><li>OpenGL experience is assumed; web experience is not </li></ul>
    3. 3. What do I do? OpenGL Insights Analytical Graphics, Inc. If you are curious, see http://www.seas.upenn.edu/~pcozzi/ developer lecturer author editor
    4. 4. WebGL for Web Developers <ul><li>The web has </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><li>What is the next media-type? </li></ul>
    5. 5. WebGL for Web Developers <ul><li>The web has </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><li>What is the next media-type? </li></ul>3D
    6. 6. WebGL for Graphics Developers <ul><li>We want to support </li></ul><ul><ul><li>Windows, Linux, Mac </li></ul></ul><ul><ul><li>Desktop and mobile </li></ul></ul><ul><li>How? </li></ul>
    7. 7. Bring 3D to the Masses <ul><li>Put it in on a webpage </li></ul><ul><ul><li>Does not require a plugin or install </li></ul></ul><ul><ul><li>Does not require administrator rights </li></ul></ul><ul><li>Make it run on most GPUs </li></ul>
    8. 8. Demos Google Body http://bodybrowser.googlelabs.com/ EmberWind http://operasoftware.github.com/Emberwind/
    9. 9. WebGL <ul><li>OpenGL ES 2.0 for JavaScript </li></ul><ul><ul><li>Seriously, JavaScript </li></ul></ul>Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf
    10. 10. WebGL <ul><li>Includes </li></ul><ul><ul><li>Vertex shaders </li></ul></ul><ul><ul><li>Fragment shaders </li></ul></ul><ul><ul><li>Vertex buffers </li></ul></ul><ul><ul><li>Textures </li></ul></ul><ul><ul><li>Framebuffers </li></ul></ul><ul><ul><li>Render states </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Does not include </li></ul><ul><ul><li>Geometry shaders </li></ul></ul><ul><ul><li>Tessellation shaders </li></ul></ul><ul><ul><li>Vertex Array Objects </li></ul></ul><ul><ul><li>Multiple render targets </li></ul></ul><ul><ul><li>Floating-point textures </li></ul></ul><ul><ul><li>Compressed textures </li></ul></ul><ul><ul><li>FS depth writes </li></ul></ul><ul><ul><li>… </li></ul></ul>See http://www.khronos.org/registry/webgl/specs/latest/
    11. 11. WebGL <ul><li>Also lacks the latest bells and whistles </li></ul><ul><ul><li>Atomics </li></ul></ul><ul><ul><li>Texture load store </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>But is a very capable graphics API that is supported by lots of GPUs </li></ul>
    12. 12. WebGL <ul><li>If you know OpenGL , you already know WebGL </li></ul><ul><li>If you know C++ , the real learning curve is JavaScript </li></ul>
    13. 13. WebGL Alternatives? <ul><li>Flash </li></ul><ul><li>Silverlight </li></ul><ul><li>Java Applets </li></ul><ul><li>Unity </li></ul>
    14. 14. WebGL <ul><li>Creating a context is easy: </li></ul>// HTML: < canvas id = &quot;glCanvas&quot; width = &quot;1024&quot; height = &quot;768&quot; ></ canvas > // JavaScript: var gl = document . getElementById ( &quot;glCanvas&quot; ). getContext ( &quot;experimental-webgl&quot; );
    15. 15. WebGL <ul><li>The rest is similar to desktop OpenGL: </li></ul>// ... gl. bindBuffer ( /* ... */ ); gl. vertexAttribPointer ( /* ... */ ); gl. useProgram ( /* ... */ ); gl. drawArrays ( /* ... */ ); Checkout http://learningwebgl.com/
    16. 16. WebGL <ul><li>Create an animation loop: </li></ul>( 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/
    17. 17. WebGL Performance <ul><li>Performance can be very good. Why? </li></ul>
    18. 18. WebGL Performance <ul><li>Performance can be very good. Why? </li></ul><ul><ul><li>The GPU is still doing the rendering </li></ul></ul><ul><ul><li>Batch! </li></ul></ul><ul><ul><ul><li>Draw multiple objects with one draw call </li></ul></ul></ul><ul><ul><ul><li>Sort by texture </li></ul></ul></ul><ul><ul><ul><li>Push work into shaders </li></ul></ul></ul>See http://www.youtube.com/watch?v=rfQ8rKGTVlg
    19. 19. WebGL and other APIs <ul><li>Take advantage of other web APIs: </li></ul><ul><ul><li>HTML5 <video> </li></ul></ul><ul><ul><li>2D <canvas> </li></ul></ul><ul><ul><li>CSS transforms </li></ul></ul><ul><ul><li>Composite UI elements </li></ul></ul><ul><ul><li>Web workers </li></ul></ul><ul><ul><li>Typed Arrays </li></ul></ul>
    20. 20. Demos WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html WebGL Water http://madebyevan.com/webgl-water/
    21. 21. WebGL support is good, and it is getting better…
    22. 22. Desktop WebGL Support <ul><li>In September, 2011 </li></ul>- Windows Only - 3 rd Party Plugins available See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
    23. 23. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows 7 with WebGL support (blue)
    24. 24. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows XP with WebGL support (blue)
    25. 25. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Mac with WebGL support (blue)
    26. 26. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Linux with WebGL support (blue)
    27. 27. Desktop WebGL Support <ul><li>Windows </li></ul><ul><ul><li>No OpenGL driver installed? Old driver? </li></ul></ul><ul><ul><ul><li>Only 35% of Windows XP machines have GL 2 drivers </li></ul></ul></ul><ul><ul><li>Buggy driver? </li></ul></ul><ul><ul><li>No problem: </li></ul></ul><ul><li>ANGLE – A lmost N ative G raphics L ayer E ngine </li></ul>OpenGL ES 2.0 Direct3D 9 See http://code.google.com/p/angleproject/
    28. 28. Mobile WebGL Support <ul><li>In September, 2011 </li></ul><ul><li>Stock Browser </li></ul><ul><li>Demo at SIGGRAPH 2011. NVIDIA is working on it. </li></ul><ul><li>Firefox Mobile – “Fennec” </li></ul><ul><li>Performance improvements possibly this this year </li></ul>
    29. 29. Mobile WebGL Support <ul><li>In September, 2011 </li></ul>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
    30. 30. HTML5 on Mobile <ul><li>Touch events </li></ul><ul><ul><li>Test with http://www.snappymaria.com/misc/TouchEventTest_v2.html </li></ul></ul><ul><ul><li>Still need multi-touch in Firefox Mobile </li></ul></ul><ul><li>Geolocation </li></ul><ul><li>Device orientation and motion </li></ul><ul><li>The future of HTML5 and WebGL on mobile is very promising </li></ul>
    31. 31. 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
    32. 32. WebGL Support on your System <ul><li>http://webglreport.sourceforge.net/ </li></ul>Disclosure: My awesome intern wrote this
    33. 33. Browsers are becoming like operating systems…
    34. 34. Browser Architecture <ul><li>Single Process </li></ul>See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
    35. 35. Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
    36. 36. Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
    37. 37. Browser Architecture <ul><li>Chrome’s Multi-process </li></ul>See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
    38. 38. Browser Architecture <ul><li>In a multi-process is gl. Get* slow? Why? </li></ul>
    39. 39. Browser Architecture <ul><li>Other browsers also use a multi-process architecture in one form or another </li></ul>
    40. 40. Demos Javascript Canvas Raytracer http://jupiter909.com/mark/jsrt.html WebGL Path Tracing http://madebyevan.com/webgl-path-tracing/
    41. 41. The Joys of JavaScript Skip the next 30 slides if you already know JavaScript
    42. 42. JavaScript is weakly typed…
    43. 43. JavaScript Type System <ul><li>short , int , float , double . Who needs them? </li></ul>var n = 1;
    44. 44. JavaScript Type System <ul><li>JavaScript has numbers, strings, and booleans: </li></ul>var n = 1; var s = “WebGL” ; var b = true ;
    45. 45. JavaScript Type System <ul><li>This compiles: </li></ul>var n = 1; var s = “WebGL” ; var b = true ; var sum = n + s + b;
    46. 46. JavaScript is a functional language…
    47. 47. JavaScript Functions <ul><li>Looks familiar: </li></ul><ul><li>Functions are first-class objects, so… </li></ul>function add(x, y) { return x + y; } var sum = add(1, 2);
    48. 48. JavaScript Functions <ul><li>Functions are objects: </li></ul>var add = function (x, y) { return x + y; }; var sum = add(1, 2);
    49. 49. JavaScript Functions <ul><li>Pass functions to functions: </li></ul>var add = function // ... function execute(op, x, y) { return op(x, y); } var sum = execute(add, 1, 2);
    50. 50. JavaScript Anonymous Functions <ul><li>Why name functions? </li></ul>function execute(op, x, y) // ... var sum = execute( function (x, y) { return x + y; }, 1, 2);
    51. 51. JavaScript Closures <ul><li>Why limit scope? </li></ul>var z = 3; var sum = execute( function (x, y) { return x + y + z; }, 1, 2);
    52. 52. JavaScript is a dynamic language…
    53. 53. JavaScript Object Literals <ul><li>Who needs struct ? Create objects on the fly: </li></ul>var position = { x : 1.0, y : 2.0 };
    54. 54. JavaScript Object Literals <ul><li>Why not add fields on the fly too? </li></ul>var position = { x : 1.0, y : 2.0 }; position.z = 3.0;
    55. 55. JavaScript Object Literals <ul><li>Who needs class ? </li></ul>
    56. 56. JavaScript Object Literals <ul><li>Who needs class ? Create functions too: </li></ul>var position = { x : 1.0, y : 2.0, min : function () { return Math . min ( this .x, this .y); } };
    57. 57. JavaScript Object Literals <ul><li>Why not change min() ? </li></ul>position.z = 3.0; position.min = function () { return Math . min ( this .x, this .y, this .z); };
    58. 58. JavaScript Object Literals <ul><li>Useful for passing to functions. Why? </li></ul>
    59. 59. JavaScript Object Literals <ul><li>Useful for passing to functions. Why? </li></ul><ul><li>What do these arguments mean? </li></ul>pick(322, 40, 5, 4);
    60. 60. JavaScript Object Literals <ul><li>Useful for passing to functions. Why? </li></ul><ul><li>What do these arguments mean? </li></ul>pick({ x : 322, y : 40, width : 5, height : 4 });
    61. 61. Demos World Flights http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ WebGL Jellyfish http://chrysaora.com/
    62. 62. JavaScript does object-oriented…
    63. 63. JavaScript Constructor Functions function Vector(x, y) { this .x = x; this .y = y; } var v = new Vector(1, 2);
    64. 64. JavaScript Constructor Functions <ul><li>Objects can have functions: </li></ul>function Vector(x, y) { this .x = x; this .y = y; this .min = function () { return Math . min ( this .x, this .y); }; }
    65. 65. JavaScript Constructor Functions <ul><li>Objects have prototypes: </li></ul>function Vector(x, y) { this .x = x; this .y = y; } Vector.prototype.min = function () { return Math.min( this .x, this .y); };
    66. 66. JavaScript Polymorphism <ul><li>No need for virtual functions </li></ul>function draw(model) { model.setRenderState(); model.render(); }
    67. 67. JavaScript Polymorphism <ul><li>No need for virtual functions </li></ul>var level = { setRenderState : function () // ... render : function () // ... }; draw(level); // Just works
    68. 68. JavaScript Build Pipeline See http://www.julienlecomte.net/blog/2007/09/16/ Concatenate Minify <ul><li>Different than C++ </li></ul><ul><li>Goal : fast downloads </li></ul><ul><li>Common: </li></ul><ul><li>Alternative: fine-grain modules </li></ul><ul><li>How do you deploy shaders? </li></ul>.js files One .js file “ Compressed” .js file
    69. 69. JavaScript Advice <ul><li>Use JSLint </li></ul><ul><li>Have excellent test coverage </li></ul><ul><li>Use the Chrome and Firefox debuggers </li></ul>
    70. 70. Demos WebGL Inspector http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html The Sproingies http://www.snappymaria.com/webgl/Sproingies.html
    71. 71. WebGL developers now need to think about security…
    72. 72. C ross- O rigin R esource S haring <ul><li>Images can’t always be used as texture sources. Why? </li></ul>
    73. 73. C ross- O rigin R esource S haring <ul><li>Same domain is OK: </li></ul>var img = new Image (); img.onload = function () { gl. texImage2D ( /* ... */ , img); }; img.src = &quot;image.png&quot; ;
    74. 74. C ross- O rigin R esource S haring <ul><li>Another domain requires CORS if supported: </li></ul>var img = new Image (); img.onload = function () { gl. texImage2D ( /* ... */ , img); }; img.crossOrigin = &quot;anonymous&quot; ; img.src = &quot;http://another-domain.com/image.png&quot; ;
    75. 75. C ross- O rigin R esource S haring <ul><li>Not all servers support CORS: </li></ul>Browser www.your-domain.com www.another-domain.com html/js/css files Images files used for textures
    76. 76. C ross- O rigin R esource S haring <ul><li>Use a proxy server: </li></ul>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&quot; See http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp/ags_proxy.htm
    77. 77. Denial of Service Attacks <ul><li>Long draw calls </li></ul><ul><ul><li>Complicated shaders </li></ul></ul><ul><ul><li>Big vertex buffers </li></ul></ul><ul><li>Solutions </li></ul><ul><ul><li>Kill long draw calls </li></ul></ul><ul><ul><li>Forbid further rendering </li></ul></ul>Lots of WebGL security info: http://learningwebgl.com/blog/?p=3890
    78. 78. Demos Geoscope Sandbox (will be released soon  ) http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html
    79. 79. WebGL Libraries <ul><li>Three.js: https://github.com/mrdoob/three.js/ </li></ul><ul><li>SceneJS: http://scenejs.org/ </li></ul><ul><li>PhiloGL: http://senchalabs.github.com/philogl/ </li></ul><ul><li>SpiderGL: http://spidergl.org/ </li></ul><ul><li>Many more: http://www.khronos.org/webgl/wiki/User_Contributions </li></ul>
    80. 80. WebGL Resources <ul><li>WebGL Camps: http://www.webglcamp.com </li></ul><ul><li>Learning WebGL: http://learningwebgl.com </li></ul>
    81. 81. JavaScript Resources I promise I do not work for O'Reilly or Yahoo
    82. 82. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×