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!

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