WebGL Fundamentals

5,365 views

Published on

3D Graphics have come to the browser and this represents a new world of possibilities. WebGL has a reputation for a high entry barrier, but fortunately there are already some frameworks out there making things simpler. We’ll cover some of the WebGL basics and show you what to look for in a framework for 3D graphics in the browser. You’ll also meet PhiloGL, a WebGL framework focused on data visualization, creative coding and game development from Sencha Labs. Prepare to watch cool 3D demos!

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,365
On SlideShare
0
From Embeds
0
Number of Embeds
404
Actions
Shares
0
Downloads
312
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

WebGL Fundamentals

  1. 1. Thursday, November 3, 2011
  2. 2. WebGL Fundamentals Nicolas Garcia Belmonte, Sencha @philogb http://philogb.github.com/Thursday, November 3, 2011
  3. 3. AgendaThursday, November 3, 2011
  4. 4. Agenda What is WebGL ? What can WebGL be used for ? How can I get started with WebGL ?Thursday, November 3, 2011
  5. 5. What is WebGL ?Thursday, November 3, 2011
  6. 6. What is WebGL ?Thursday, November 3, 2011
  7. 7. What is WebGL ? OpenGL OpenGL ES WebGLThursday, November 3, 2011
  8. 8. What is WebGL ? JavaScript WebGL JS API GPU (Compiled Program)Thursday, November 3, 2011
  9. 9. What is WebGL ? JavaScript WebGL JS API GLSL API Vertex Shader GLSL API Fragment ShaderThursday, November 3, 2011
  10. 10. What is WebGL ? JavaScript [x1, y1, z1, x2, y2, z2, ...] WebGL JS API attribute GLSL API Vertex Shader uniform GLSL API Fragment Shader uniform varyingThursday, November 3, 2011
  11. 11. What is WebGL ? JavaScript [x1, y1, z1, x2, y2, z2, ...] attribute Triangle Assembly Vertex Shader uniform Rasterization Fragment Shader uniform varyingThursday, November 3, 2011
  12. 12. What is WebGL ? Vertex Shader Triangle Assembly Rasterization Fragment ShaderThursday, November 3, 2011
  13. 13. What can WebGL be used for ?Thursday, November 3, 2011
  14. 14. What can WebGL be used for ?Thursday, November 3, 2011
  15. 15. What can WebGL be used for ? Interactive games Data visualization Creative coding Physics simulations Music videos ... very fast processing of any data.Thursday, November 3, 2011
  16. 16. What can WebGL be used for ?Thursday, November 3, 2011
  17. 17. What can WebGL be used for ? Interactive gamesThursday, November 3, 2011
  18. 18. Thursday, November 3, 2011
  19. 19. What can WebGL be used for ?Thursday, November 3, 2011
  20. 20. What can WebGL be used for ? Data visualizationThursday, November 3, 2011
  21. 21. What can WebGL be used for ?Thursday, November 3, 2011
  22. 22. What can WebGL be used for ? Creative codingThursday, November 3, 2011
  23. 23. What can WebGL be used for ?Thursday, November 3, 2011
  24. 24. What can WebGL be used for ? Physics simulationsThursday, November 3, 2011
  25. 25. What can WebGL be used for ?Thursday, November 3, 2011
  26. 26. What can WebGL be used for ? Music videosThursday, November 3, 2011
  27. 27. Thursday, November 3, 2011
  28. 28. PhiloGL A WebGL framework for data visualization, creative coding and game development.Thursday, November 3, 2011
  29. 29. PhiloGL A WebGL framework for data visualization, creative coding and game development. http://senchalabs.github.com/philogl/Thursday, November 3, 2011
  30. 30. PhiloGL A WebGL framework for data visualization, creative coding and game development.Thursday, November 3, 2011
  31. 31. PhiloGL A WebGL framework for data visualization, creative coding and game development. http://senchalabs.github.com/philogl/Thursday, November 3, 2011
  32. 32. HTML DocumentThursday, November 3, 2011
  33. 33. How most people see a WebGL app: WebGL Canvas HTML DocumentThursday, November 3, 2011
  34. 34. How we see a WebGL app: Web Workers Forms Images WebGL Canvas Audio Video 2D Canvas XHR(2)Thursday, November 3, 2011
  35. 35. ExamplesThursday, November 3, 2011
  36. 36. PhiloGLThursday, November 3, 2011
  37. 37. PhiloGL Idiomatic JavaScript Rich Module System Flexible and Performance FocusedThursday, November 3, 2011
  38. 38. Idiomatic JavaScriptThursday, November 3, 2011
  39. 39. Idiomatic JavaScript Concise & ExpressiveThursday, November 3, 2011
  40. 40.   //Create application   PhiloGL(canvasId, {     program: {       from: uris,       vs: shader.vs.glsl,       fs: shader.fs.glsl     },     camera: {       position: {         x: 0, y: 0, z: -50       }     },     textures: {       src: [arroway.jpg, earth.jpg]     },     events: {       onDragMove: function(e) {         //do things...       },       onMouseWheel: function(e) {         //do things...       }     },     onError: function() {       alert("There was an error creating the app.");     },     onLoad: function(app) {       /* Do things here */     }   });Thursday, November 3, 2011
  41. 41. Module System Core Math WebGL Program Shaders O3D Camera Scene Event Fx IO Workers MediaThursday, November 3, 2011
  42. 42. Other ExamplesThursday, November 3, 2011
  43. 43. Thanks!Thursday, November 3, 2011
  44. 44. Thanks! @philogb http://philogb.github.com/ http://senchalabs.github.com/philogl/Thursday, November 3, 2011

×