Download as PDF, PPTX
![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)
![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/75/WebGL-Fundamentals-10-2048.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/75/WebGL-Fundamentals-11-2048.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/75/WebGL-Fundamentals-40-2048.jpg)
Uploaded bySencha
WebGL Fundamentals
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.
In this document
Powered by AI
Introduction to WebGL and its agenda including what it is, potential uses, and how to get started.
Detailed overview of WebGL including its relationship with OpenGL, APIs used (JavaScript, WebGL JS, GLSL), and core concepts like shaders and rendering.
Various applications of WebGL, such as interactive games, data visualization, creative coding, physics simulations, and music videos.
Introduction to PhiloGL, a framework designed for data visualization, creative coding, and game development with WebGL.
Differences in how people perceive WebGL apps, illustrating WebGL Canvas within HTML documents and other components.
Examples and features of PhiloGL emphasizing idiomatic JavaScript, module system, and visual programming application implementation.
Final thanks and resource links for further exploration of WebGL and PhiloGL.
More Related Content
WebGL Fundamentals
- 1.
- 2. WebGL Fundamentals Nicolas Garcia Belmonte, Sencha @philogb http://philogb.github.com/ Thursday, November 3, 2011
- 3.
- 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 WebGLbe used for ? Thursday, November 3, 2011
- 14. What can WebGLbe used for ? Thursday, November 3, 2011
- 15. What can WebGLbe 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 WebGLbe used for ? Thursday, November 3, 2011
- 17. What can WebGLbe used for ? Interactive games Thursday, November 3, 2011
- 18.
- 19. What can WebGLbe used for ? Thursday, November 3, 2011
- 20. What can WebGLbe used for ? Data visualization Thursday, November 3, 2011
- 21. What can WebGLbe used for ? Thursday, November 3, 2011
- 22. What can WebGLbe used for ? Creative coding Thursday, November 3, 2011
- 23. What can WebGLbe used for ? Thursday, November 3, 2011
- 24. What can WebGLbe used for ? Physics simulations Thursday, November 3, 2011
- 25. What can WebGLbe used for ? Thursday, November 3, 2011
- 26. What can WebGLbe used for ? Music videos Thursday, November 3, 2011
- 27.
- 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.
- 33. How most peoplesee a WebGL app: WebGL Canvas HTML Document Thursday, November 3, 2011
- 34. How we seea WebGL app: Web Workers Forms Images WebGL Canvas Audio Video 2D Canvas XHR(2) Thursday, November 3, 2011
- 35.
- 36.
- 37. PhiloGL Idiomatic JavaScript Rich Module System Flexible and Performance Focused Thursday, November 3, 2011
- 38.
- 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.
- 43.
- 44. Thanks! @philogb http://philogb.github.com/ http://senchalabs.github.com/philogl/ Thursday, November 3, 2011