1 / 73

WebGL: GPU Acceleration for the open web

Learn about the potential of WebGL in bringing 3D graphics to the mass audience, its compatibility with various platforms, and its advantages over other graphics APIs. Discover how to create interactive and visually stunning web experiences using JavaScript and WebGL.

grayg
Download Presentation

WebGL: GPU Acceleration for the open web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WebGL:GPU Acceleration for the open web

  2. 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

  3. WebGL for Web Developers • The web has • Text • Images • Video • What is the next media-type?

  4. WebGL for Web Developers 3D • The web has • Text • Images • Video • What is the next media-type?

  5. WebGL for Graphics Developers • We want to support • Windows, Linux, Mac • Desktop and mobile • How?

  6. 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

  7. WebGL • OpenGL ES 2.0 for JavaScript • Seriously, JavaScript

  8. WebGL • Does not include • Geometry shaders • Tessellation shaders • Vertex Array Objects • Multiple render targets • Floating-point textures • Compressed textures • FS depth writes • … • Includes • Vertex shaders • Fragment shaders • Vertex buffers • Textures • Framebuffers • Render states • …

  9. 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

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

  11. WebGL Alternatives? Flash Silverlight Java Applets Unity

  12. WebGL // HTML: <canvasid="glCanvas" width="1024"height="768"></canvas> // JavaScript: var gl = document.getElementById("glCanvas").getContext("experimental-webgl"); Creating a context is easy:

  13. WebGL // ... gl.bindBuffer(/* ... */); gl.vertexAttribPointer(/* ... */); gl.useProgram(/* ... */); gl.drawArrays(/* ... */); The rest is similar to desktop OpenGL: Checkout http://learningwebgl.com/

  14. WebGL (function tick(){ // ... GL calls to draw scene window.requestAnimationFrame(tick); })(); Create an animation loop:

  15. 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

  16. WebGL and other APIs • Take advantage of other web APIs: • HTML5 <video> • 2D <canvas> • CSS transforms • Composite UI elements • Web workers • Typed Arrays

  17. Demos WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html WebGL Water http://madebyevan.com/webgl-water/

  18. WebGL support is good, and it is getting better…

  19. Desktop WebGL Support You need to make sure you are using a supported web browser. - 3rd Party Plugins available - Windows Only

  20. Desktop WebGL Support OpenGL ES 2.0 Direct3D 9 • 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

  21. Mobile WebGL Support • In September, 2011 • Firefox Mobile – “Fennec” • Performance improvements possibly this this year • Stock Browser • Demo at SIGGRAPH 2011. NVIDIA is working on it.

  22. Mobile WebGL Support • In September, 2011 Will be in iOS 5 for iAd developers

  23. HTML5 on Mobile • The future of HTML5 and WebGL on mobile is very promising • Touch events • Still need multi-touch in Firefox Mobile • Geolocation • Device orientation and motion

  24. WebGL Support on your System http://webglreport.sourceforge.net/

  25. Browsers are becoming like operating systems…

  26. Browser Architecture Single Process

  27. Browser Architecture Chrome’s Multi-process

  28. Browser Architecture Chrome’s Multi-process

  29. Browser Architecture Chrome’s Multi-process

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

  31. Browser Architecture Other browsers also use a multi-process architecture in one form or another

  32. Demos Javascript Canvas Raytracer http://jupiter909.com/mark/jsrt.html WebGL Path Tracing http://madebyevan.com/webgl-path-tracing/

  33. The Joys of JavaScript

  34. JavaScript is weakly typed…

  35. JavaScript Type System var n = 1; short, int, float, double. Who needs them?

  36. JavaScript Type System var n = 1; var s = “WebGL”; var b = true; JavaScript has numbers, strings, and Booleans:

  37. JavaScript Type System var n = 1; var s = “WebGL”; var b = true; var sum = n + s + b; This compiles:

  38. JavaScript is a functional language…

  39. JavaScript Functions function add(x, y) { return x + y; } var sum = add(1, 2); Looks familiar: Functions are first-class objects, so…

  40. JavaScript Functions var add = function(x, y) { return x + y; }; var sum = add(1, 2); Functions are objects:

  41. JavaScript Functions var add = function// ... function execute(op, x, y) { return op(x, y); } var sum = execute(add, 1, 2); Pass functions to functions:

  42. JavaScript Anonymous Functions function execute(op, x, y) // ... var sum = execute(function(x, y) { return x + y; }, 1, 2); Why name functions?

  43. JavaScript Closures var z = 3; var sum = execute(function(x, y) { return x + y + z; }, 1, 2); Why limit scope?

  44. JavaScript is a dynamic language…

  45. JavaScript Object Literals var position = { x : 1.0, y : 2.0 }; Who needs struct? Create objects on the fly:

  46. JavaScript Object Literals var position = { x : 1.0, y : 2.0 }; position.z = 3.0; Why not add fields on the fly too?

  47. JavaScript Object Literals Who needs class?

  48. JavaScript Object Literals var position = { x : 1.0, y : 2.0, min : function() { returnMath.min(this.x, this.y); } }; Who needs class? Create functions too:

  49. JavaScript Object Literals position.z = 3.0; position.min = function() { returnMath.min(this.x, this.y, this.z); }; Why not change min()?

  50. JavaScript Object Literals Useful for passing to functions. Why?

More Related