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

music videos

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