Presentation on WebGL given to the Boston HTML5 Game Development Meetup on 3/16/2011

1. 3D In the Browser
It’s go time.
Presented by Pascal Rettig
http://cykod.com @cykod
Liberally using Material From:
Mozilla MIT IAP WebGL Class
http://learningwebgl.com
Monday, July 11, 2011

2. When last I talked...
Monday, July 11, 2011

3. Where We are
1977-84 1985-90 1991-94 1995-2000
Monday, July 11, 2011

4. Where we are
Q1 2010 Q4 2010 Q2 2011 Q4 2011
Monday, July 11, 2011

5. I was wrong.
Q1 2010 Q4 2010 Q2 2011
Monday, July 11, 2011

6. WebGL is enabled in:
• Chrome - Stable
• Firefox 4 Beta
• Webkit Nightly’s
• an Opera Preview Release
• IE ...Yeah, not anytime soon.
Monday, July 11, 2011

7. By the end of Q2
All major supported browsers should have WebGL
turned on by default.
Monday, July 11, 2011

8. What can you do with
WebGL?
http://webglsamples.googlecode.com/hg/aquarium/
aquarium.html
http://webglsamples.googlecode.com/hg/spacerocks/
spacerocks.html
Monday, July 11, 2011

9. What is WebGL?
WebGL is a royalty-free, cross-platform API that
brings OpenGL ES 2.0 to the web as a 3D drawing
context within HTML, exposed as low-level
Document Object Model interfaces. It uses the
OpenGL shading language, GLSL ES, and can be
cleanly combined with other web content that is
layered on top or underneath the 3D content. It is
ideally suited for dynamic 3D web applications in the
JavaScript programming language, and will be fully
integrated in leading web browsers.
http://www.khronos.org/
Monday, July 11, 2011

10. WebGL is:
Monday, July 11, 2011

11. WebGL is:
• A 1.0 Standard (as of 3/8/11) released by
the Khronos Group
Monday, July 11, 2011

12. WebGL is:
• A 1.0 Standard (as of 3/8/11) released by
the Khronos Group
• In-browser native (Look ma, no plugins!)
Monday, July 11, 2011

13. WebGL is:
• A 1.0 Standard (as of 3/8/11) released by
the Khronos Group
• In-browser native (Look ma, no plugins!)
• Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)
Monday, July 11, 2011

14. WebGL is:
• A 1.0 Standard (as of 3/8/11) released by
the Khronos Group
• In-browser native (Look ma, no plugins!)
• Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)
• A low level API (We’re not kidding around)
Monday, July 11, 2011

15. WebGL is:
• A 1.0 Standard (as of 3/8/11) released by
the Khronos Group
• In-browser native (Look ma, no plugins!)
• Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)
• A low level API (We’re not kidding around)
• Well Integrated into the DOM - can layer,
use textures, etc.
Monday, July 11, 2011

16. OpenGL ES 2.0
Monday, July 11, 2011

17. OpenGL ES 2.0
• OpenGL for Embedded Systems
Monday, July 11, 2011

18. OpenGL ES 2.0
• OpenGL for Embedded Systems
• Well-defined subsets of desktop OpenGL
Monday, July 11, 2011

19. OpenGL ES 2.0
• OpenGL for Embedded Systems
• Well-defined subsets of desktop OpenGL
• What you’re using playing 3D games on
your iPhone 3G (Orig. iPhone, Android are
ES 1.0)
Monday, July 11, 2011

20. OpenGL ES 2.0
• OpenGL for Embedded Systems
• Well-defined subsets of desktop OpenGL
• What you’re using playing 3D games on
your iPhone 3G (Orig. iPhone, Android are
ES 1.0)
• OpenGL ES 1.X is for fixed function
hardware. 2.0 is fully programmable vertex
and fragement shaders.
Monday, July 11, 2011

21. WebGL uses shaders for
just about everything
• Little bits of run-time compiled code that
runs on the GPU
• GLSL (OpenGL Shading Language)
• “High Level” Shader language based on C
• Compiled at runtime
• Vertex shaders transform vertices
• Fragment shaders compute pixel colors
Monday, July 11, 2011

22. WebGL PipeLine
Vertex Operation
⇓
Rasterization
⇓
Fragment Operation
⇓
FrameBuffer
Monday, July 11, 2011

23. Simple(st) Shaders
Vertex Shader
attribute vec3 aVertexPosition;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
}
Fragment Shader
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
Monday, July 11, 2011

24. Which gets us...
Monday, July 11, 2011

25. Simplest Full Example
(From Mozilla IAP class)
Monday, July 11, 2011

26. More Tutorials at
LearningWebGl.com
• Based on the famous NeHe Open GL
Tutorials
• Textures: http://learningwebgl.com/
lessons/lesson05/index.html
• http://learningwebgl.com/blog/?
page_id=1217
Monday, July 11, 2011

27. Has anyone noticed a
problem?
Monday, July 11, 2011

28. Has anyone noticed a
problem?
OpenGL isn’t exactly something you want to have to see on a
daily basis, especially as a Javascript Programmer
Monday, July 11, 2011

29. Abstraction Please...
Monday, July 11, 2011

30. PhiloGL
Relatively new framework from Sencha Labs
http://senchalabs.github.com/philogl/
Monday, July 11, 2011

31. PhiloGL
• “PhiloGL code is highly abbreviated
compared to WebGL.”
• Have transcribed the learningwebgl lessons
to PhiloGL
• http://senchalabs.github.com/philogl/
PhiloGL/examples/lessons/1/
• http://senchalabs.github.com/philogl/
PhiloGL/examples/lessons/5/
• Sort of neat, but kinda meh...
Monday, July 11, 2011

32. Mr. Doobs Three.js
https://github.com/mrdoob/three.js/
Generic 3D library that supports a WebGL rendering
as one of the backends.
Monday, July 11, 2011

33. Three.js
Monday, July 11, 2011

34. Three.js
• Nice, standard OO Abstractions for 3D
programming.
• No documentation, but lots of examples in
the examples directory.
• Lots of Demos to look at on the Github
Page
• May be a little too abstract for performant
WebGL games, but they are reworking the
WebGL renderer, so who knows.
Monday, July 11, 2011

35. Copperlicht
• Bills itself as “Commercial grade WebGL
3D engine with editor”
• http://www.ambiera.com/copperlicht/
• Quake 3 Level http://bit.ly/fGKoOh
Monday, July 11, 2011

36. More Frameworks /
Engines
From the Chronos WebGL Wiki:
http://www.khronos.org/webgl/wiki/
Monday, July 11, 2011

37. glQuery
Monday, July 11, 2011

38. glQuery doesn’t exist...
But it should - talk to me if you’re interested in working on
something after the meetup.
Monday, July 11, 2011

39. Thanks!
Pascal Rettig
@cykod on Twitter
Monday, July 11, 2011