This document discusses getting started with WebGL. It begins with an introduction to WebGL, explaining that it allows 3D graphics in browsers similarly to OpenGL. It then provides examples of what can be done with WebGL, such as data visualization, games, 3D modeling, and more. The document proceeds to explain the basic graphics pipeline and JavaScript API used in WebGL. It concludes by discussing how to set up a basic 3D scene and choose a WebGL library like Three.js or PhiloGL to get started creating WebGL applications.

1. Leaving Flatland:
Getting Started with
WebGL
SXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte

2. Nicolas Garcia Belmonte - @philogb
I use Web Standards to create Data Visualizations.

3. Luz Caballero - @gerbille
I’m a Web Opener, I evangelize Web Standards.

4. Agenda
• What is WebGL?
• What can WebGL be used for?
• How does WebGL work?
• Getting started with WebGL

5. What is WebGL ?

6. OpenGL OpenGL ES WebGL

7. desktop mobile

8. <canvas id=‘c’ width=‘100’ height=‘100’></canvas>
document.getElementById(‘c’).getContext(‘webgl’)

9. What can WebGL be
used for?

10. • Data visualization
• Creative coding
• Art
• 3D design environments
• Music videos
• Plotting math functions
• 3D modeling of objects & space
• Creating textures
• ...fast processing of any data

11. data visualization

12. creative coding

13. art

14. 3D design environments

15. music videos

16. plotting mathematical functions

17. 3D models of objects/space

18. games
operasoftware.github.com/Emberwind

19. creating textures

20. How does WebGL
work?

21. Vertex Shader
Triangle Assembly
Rasterization
Fragment Shader
image source: http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html

22. JavaScript
WebGL JS API
GPU (Compiled Program)

23. JavaScript [x1, y1, z1, x2, y2, z2, ...]
WebGL JS API
attribute
GLSL API Vertex Shader
uniform
GLSL API Fragment Shader uniform varying

24. Getting started

25. The 3D scene
image source: http://computer.yourdictionary.com/graphics

26. Choosing a library
• Three.js
• PhiloGL
• GLGE
• J3D
• ...

27. desktop mobile

28. PhiloGL

29. HTML Document

30. How most people see a WebGL App:
WebGL Canvas
HTML Document

31. How we see a WebGL App:
Web Workers Forms
Images
WebGL Canvas Audio
Video
2D Canvas XHR(2)

32. Examples

33. PhiloGL
• Idiomatic JavaScript
• Rich Module System
• Flexible and Performance Focused
• Complete documentation

34. Idiomatic JavaScript
Concise & Expressive

35. //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 */
}
});

36. Module System
• Core
• Math
• WebGL
• Program
• Shaders
• O3D
• Camera
• Scene
• Event
• Fx
• IO
• Workers
• Media

37. Other Examples

38. Resources
• An Introduction to WebGL @ dev.Opera
• PhiloGL
• PhiloGL tutorial
• WebGL w/o a library @ dev.Opera
• Porting 3D models to WebGL @ dev.Opera
• News and resources @ the Learning WebGL blog
• WebGL w/o a library @ Learning WebGL
• Three.js
• Three.js tutorial
• WebGL FAQ
• The Khronos WebGL forum

39. Thanks!
@philogb
@gerbille