More Related Content Similar to Getting Started with WebGL in 40 Characters Similar to Getting Started with WebGL in 40 Characters (20) Getting Started with WebGL in 40 Characters1. Leaving Flatland:
Getting Started with
WebGL
SXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte
4. Agenda
• What is WebGL?
• What can WebGL be used for?
• How does WebGL work?
• Getting started with WebGL
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
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
23. JavaScript [x1, y1, z1, x2, y2, z2, ...]
WebGL JS API
attribute
GLSL API Vertex Shader
uniform
GLSL API Fragment Shader uniform varying
25. The 3D scene
image source: http://computer.yourdictionary.com/graphics
31. How we see a WebGL App:
Web Workers Forms
Images
WebGL Canvas Audio
Video
2D Canvas XHR(2)
33. PhiloGL
• Idiomatic JavaScript
• Rich Module System
• Flexible and Performance Focused
• Complete documentation
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
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