leaving flatland: getting started with webgl- sxsw 2012
Post on 18-Oct-2014
4.252 Views
Preview:
DESCRIPTION
TRANSCRIPT
Leaving Flatland: Getting Started with WebGL
SXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte
I use Web Standards to create Data Visualizations.
Nicolas Garcia Belmonte - @philogb
I’m a Web Opener, I evangelize Web Standards.
Luz Caballero - @gerbille
Agenda
• What is WebGL?
• What can WebGL be used for?
• How does WebGL work?
• Getting started with WebGL
What is WebGL ?
OpenGL OpenGL ES WebGL
desktop mobile
<canvas id=‘c’ width=‘100’ height=‘100’></canvas>
document.getElementById(‘c’).getContext(‘webgl’)
What can WebGL be used for?
• 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
data visualization
creative coding
art
3D design environments
plotting mathematical functions
3D models of objects/space
games
operasoftware.github.com/Emberwind
creating textures
How does WebGL work?
Fragment Shader
Vertex Shader
Triangle Assembly
Rasterization
image source: http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html
JavaScript
GPU (Compiled Program)
WebGL JS API
JavaScript
Fragment Shader
WebGL JS API
Vertex ShaderGLSL API
GLSL API
[x1, y1, z1, x2, y2, z2, ...]
attributeuniform
uniform varying
Getting started
image source: http://computer.yourdictionary.com/graphics
The 3D scene
Choosing a library
• Three.js
• PhiloGL
• GLGE
• J3D
• ...
desktop mobile
PhiloGL
HTML Document
HTML DocumentWebGL Canvas
How most people see a WebGL App:
WebGL Canvas
Web Workers
2D Canvas XHR(2)
Video
Audio
Images
Forms
How we see a WebGL App:
Examples
PhiloGL
• Idiomatic JavaScript
• Rich Module System
• Flexible and Performance Focused
• Complete documentation
Idiomatic JavaScriptConcise & Expressive
//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 */ } });
• Core
• Math
• WebGL
• Program
• Shaders
• O3D
• Camera
• Scene
• Event
• Fx
• IO
• Workers
• Media
Module System
Other Examples
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
Thanks!
@philogb@gerbille
top related