Leaving Flatland: Getting Started with WebGL- SXSW 2012

Leaving Flatland: Getting Started with WebGLSXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte

Nicolas Garcia Belmonte - @philogbI use Web Standards to create Data Visualizations.

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

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

3D design environments

music videos

plotting mathematical functions

3D models of objects/space

gamesoperasoftware.github.com/Emberwind

creating textures

How does WebGL work?

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

JavaScriptWebGL JS API GPU (Compiled Program)

JavaScript [x1, y1, z1, x2, y2, z2, ...]WebGL JS API attributeGLSL API Vertex Shader uniformGLSL API Fragment Shader uniform varying

Getting started

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

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

desktop mobile

PhiloGL

HTML Document

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

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

Examples

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

Idiomatic JavaScript Concise & 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 */ } });

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

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

http://lanyrd.com	582
http://bundlr.com	6
http://localhost	4
http://us-w1.rockmelt.com	2
http://bo.lt	2
http://creative.magazine.tm	1
http://nodeslide.herokuapp.com	1
https://si0.twimg.com	1
http://dev.lanyrd.org	1
http://sxswi.bo.lt	1

Leaving Flatland: Getting Started with WebGL- SXSW 2012

by philogb

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 601

Statistics

Leaving Flatland: Getting Started with WebGL- SXSW 2012 Presentation Transcript