WebGL Fundamentals
•
5 likes•4,183 views
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!
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to WebGL Fundamentals
Similar to WebGL Fundamentals (20)
More from Sencha
More from Sencha (20)
Recently uploaded
Recently uploaded (20)
WebGL Fundamentals
- 1. Thursday, November 3, 2011
- 2. WebGL Fundamentals Nicolas Garcia Belmonte, Sencha @philogb http://philogb.github.com/ Thursday, November 3, 2011
- 3. Agenda Thursday, November 3, 2011
- 4. Agenda What is WebGL ? What can WebGL be used for ? How can I get started with WebGL ? Thursday, November 3, 2011
- 5. What is WebGL ? Thursday, November 3, 2011
- 6. What is WebGL ? Thursday, November 3, 2011
- 7. What is WebGL ? OpenGL OpenGL ES WebGL Thursday, November 3, 2011
- 8. What is WebGL ? JavaScript WebGL JS API GPU (Compiled Program) Thursday, November 3, 2011
- 9. What is WebGL ? JavaScript WebGL JS API GLSL API Vertex Shader GLSL API Fragment Shader Thursday, November 3, 2011
- 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 varying Thursday, November 3, 2011
- 11. What is WebGL ? JavaScript [x1, y1, z1, x2, y2, z2, ...] attribute Triangle Assembly Vertex Shader uniform Rasterization Fragment Shader uniform varying Thursday, November 3, 2011
- 12. What is WebGL ? Vertex Shader Triangle Assembly Rasterization Fragment Shader Thursday, November 3, 2011
- 13. What can WebGL be used for ? Thursday, November 3, 2011
- 14. What can WebGL be used for ? Thursday, November 3, 2011
- 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. What can WebGL be used for ? Thursday, November 3, 2011
- 17. What can WebGL be used for ? Interactive games Thursday, November 3, 2011
- 18. Thursday, November 3, 2011
- 19. What can WebGL be used for ? Thursday, November 3, 2011
- 20. What can WebGL be used for ? Data visualization Thursday, November 3, 2011
- 21. What can WebGL be used for ? Thursday, November 3, 2011
- 22. What can WebGL be used for ? Creative coding Thursday, November 3, 2011
- 23. What can WebGL be used for ? Thursday, November 3, 2011
- 24. What can WebGL be used for ? Physics simulations Thursday, November 3, 2011
- 25. What can WebGL be used for ? Thursday, November 3, 2011
- 26. What can WebGL be used for ? Music videos Thursday, November 3, 2011
- 27. Thursday, November 3, 2011
- 28. PhiloGL A WebGL framework for data visualization, creative coding and game development. Thursday, November 3, 2011
- 29. PhiloGL A WebGL framework for data visualization, creative coding and game development. http://senchalabs.github.com/philogl/ Thursday, November 3, 2011
- 30. PhiloGL A WebGL framework for data visualization, creative coding and game development. Thursday, November 3, 2011
- 31. PhiloGL A WebGL framework for data visualization, creative coding and game development. http://senchalabs.github.com/philogl/ Thursday, November 3, 2011
- 32. HTML Document Thursday, November 3, 2011
- 33. How most people see a WebGL app: WebGL Canvas HTML Document Thursday, November 3, 2011
- 34. How we see a WebGL app: Web Workers Forms Images WebGL Canvas Audio Video 2D Canvas XHR(2) Thursday, November 3, 2011
- 35. Examples Thursday, November 3, 2011
- 36. PhiloGL Thursday, November 3, 2011
- 37. PhiloGL Idiomatic JavaScript Rich Module System Flexible and Performance Focused Thursday, November 3, 2011
- 38. Idiomatic JavaScript Thursday, November 3, 2011
- 39. Idiomatic JavaScript Concise & Expressive Thursday, November 3, 2011
- 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. Module System Core Math WebGL Program Shaders O3D Camera Scene Event Fx IO Workers Media Thursday, November 3, 2011
- 42. Other Examples Thursday, November 3, 2011
- 43. Thanks! Thursday, November 3, 2011
- 44. Thanks! @philogb http://philogb.github.com/ http://senchalabs.github.com/philogl/ Thursday, November 3, 2011