Contenu connexe Similaire à Getting Started with WebGL in 40 Characters Similaire à Getting Started with WebGL in 40 Characters (20) 1. 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
