WebGL Fundamentals
5 likes4,287 views
The document provides an overview of WebGL, including its definition and applications such as interactive games, data visualization, and creative coding. It introduces Philogl, a WebGL framework for these purposes, and illustrates how WebGL integrates with HTML documents and other web technologies. The document also highlights its components like shaders and event handling for creating interactive applications.
![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](https://image.slidesharecdn.com/senchacon2011-webglfundamentals-111103142952-phpapp01/85/WebGL-Fundamentals-10-320.jpg)
![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](https://image.slidesharecdn.com/senchacon2011-webglfundamentals-111103142952-phpapp01/85/WebGL-Fundamentals-11-320.jpg)
![//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](https://image.slidesharecdn.com/senchacon2011-webglfundamentals-111103142952-phpapp01/85/WebGL-Fundamentals-40-320.jpg)
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