3D In the Browser

Its go time.

Presented by Pascal Rettig

http://cykod.com @cykod
Liberally using Material From:
Mozilla MIT IAP WebGL Class
http://learningwebgl.com
Monday, July 11, 2011

When last I talked...

Monday, July 11, 2011

Where We are

1977-84

Monday, July 11, 2011

1985-90

1991-94

1995-2000

Where we are

Q1 2010

Monday, July 11, 2011

Q4 2010

Q2 2011

Q4 2011

I was wrong.

Q1 2010

Monday, July 11, 2011

Q4 2010

Q2 2011

WebGL is enabled in:

Chrome - Stable
Firefox 4 Beta
Webkit Nightlys
an Opera Preview Release
IE ...Yeah, not anytime soon.
Monday, July 11, 2011

By the end of Q2
All major supported browsers should have WebGL
turned on by default.

Monday, July 11, 2011

What can you do with

WebGL?
http://webglsamples.googlecode.com/hg/aquarium/
aquarium.html
http://webglsamples.googlecode.com/hg/spacerocks/
spacerocks.html

Monday, July 11, 2011

What is WebGL?
WebGL is a royalty-free, cross-platform API that
brings OpenGL ES 2.0 to the web as a 3D drawing
context within HTML, exposed as low-level
Document Object Model interfaces. It uses the
OpenGL shading language, GLSL ES, and can be
cleanly combined with other web content that is
layered on top or underneath the 3D content. It is
ideally suited for dynamic 3D web applications in the
JavaScript programming language, and will be fully
integrated in leading web browsers.
http://www.khronos.org/

Monday, July 11, 2011

WebGL is:

Monday, July 11, 2011

WebGL is:
A 1.0 Standard (as of 3/8/11) released by
the Khronos Group

Monday, July 11, 2011

WebGL is:
A 1.0 Standard (as of 3/8/11) released by
the Khronos Group

In-browser native (Look ma, no plugins!)

Monday, July 11, 2011

WebGL is:
A 1.0 Standard (as of 3/8/11) released by
the Khronos Group

In-browser native (Look ma, no plugins!)

Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)

Monday, July 11, 2011

WebGL is:
A 1.0 Standard (as of 3/8/11) released by
the Khronos Group

In-browser native (Look ma, no plugins!)

Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)

A low level API (Were not kidding around)

Monday, July 11, 2011

WebGL is:
A 1.0 Standard (as of 3/8/11) released by
the Khronos Group

In-browser native (Look ma, no plugins!)

Implementation of OpenGL ES 2.0
(OpenGL for embedded systems)

A low level API (Were not kidding around)

Well Integrated into the DOM - can layer,
use textures, etc.

Monday, July 11, 2011

OpenGL ES 2.0

Monday, July 11, 2011

OpenGL ES 2.0
OpenGL for Embedded Systems

Monday, July 11, 2011

OpenGL ES 2.0
OpenGL for Embedded Systems
Well-defined subsets of desktop OpenGL

Monday, July 11, 2011

OpenGL ES 2.0
OpenGL for Embedded Systems
Well-defined subsets of desktop OpenGL
What youre using playing 3D games on

your iPhone 3G (Orig. iPhone, Android are

ES 1.0)

Monday, July 11, 2011

OpenGL ES 2.0
OpenGL for Embedded Systems
Well-defined subsets of desktop OpenGL
What youre using playing 3D games on

your iPhone 3G (Orig. iPhone, Android are

ES 1.0)

OpenGL ES 1.X is for fixed function

hardware. 2.0 is fully programmable vertex

and fragement shaders.

Monday, July 11, 2011

WebGL uses shaders for

just about everything
Little bits of run-time compiled code that
runs on the GPU

GLSL (OpenGL Shading Language)

High Level Shader language based on C
Compiled at runtime
Vertex shaders transform vertices
Fragment shaders compute pixel colors
Monday, July 11, 2011

WebGL PipeLine
Vertex Operation

Rasterization

Fragment Operation

FrameBuffer

Monday, July 11, 2011

Simple(st) Shaders
Vertex Shader
attribute vec3 aVertexPosition;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
}

Fragment Shader
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

Monday, July 11, 2011

Which gets us...

Monday, July 11, 2011

Simplest Full Example

(From Mozilla IAP class)

Monday, July 11, 2011

More Tutorials at
LearningWebGl.com
Based on the famous NeHe Open GL
Tutorials

Textures: http://learningwebgl.com/
lessons/lesson05/index.html

http://learningwebgl.com/blog/?
page_id=1217

Monday, July 11, 2011

Has anyone noticed a

problem?

Monday, July 11, 2011

Has anyone noticed a

problem?
OpenGL isnt exactly something you want to have to see on a
daily basis, especially as a Javascript Programmer

Monday, July 11, 2011

Abstraction Please...

Monday, July 11, 2011

PhiloGL
Relatively new framework from Sencha Labs
http://senchalabs.github.com/philogl/

Monday, July 11, 2011

PhiloGL
PhiloGL code is highly abbreviated
compared to WebGL.

Have transcribed the learningwebgl lessons

to PhiloGL

http://senchalabs.github.com/philogl/
PhiloGL/examples/lessons/1/

http://senchalabs.github.com/philogl/
PhiloGL/examples/lessons/5/

Sort of neat, but kinda meh...

Monday, July 11, 2011

Mr. Doobs Three.js

https://github.com/mrdoob/three.js/
Generic 3D library that supports a WebGL rendering
as one of the backends.

Monday, July 11, 2011

Three.js

Monday, July 11, 2011

Three.js
Nice, standard OO Abstractions for 3D
programming.

No documentation, but lots of examples in

the examples directory.

Lots of Demos to look at on the Github

Page

May be a little too abstract for performant

WebGL games, but they are reworking the
WebGL renderer, so who knows.

Monday, July 11, 2011

Copperlicht
Bills itself as Commercial grade WebGL
3D engine with editor

http://www.ambiera.com/copperlicht/
Quake 3 Level http://bit.ly/fGKoOh

Monday, July 11, 2011

More Frameworks /
Engines
From the Chronos WebGL Wiki:
http://www.khronos.org/webgl/wiki/

Monday, July 11, 2011

glQuery

Monday, July 11, 2011

glQuery doesnt exist...

But it should - talk to me if youre interested in working on
something after the meetup.

Monday, July 11, 2011

Thanks!
Pascal Rettig
@cykod on Twitter

Monday, July 11, 2011