3d in the browser (web gl)
TRANSCRIPT
3D In the BrowserIt’s go time.
Presented by Pascal Rettighttp://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
1985-90 1991-94 1995-20001977-84
Monday, July 11, 2011
Where we are
Q4 2010 Q2 2011 Q4 2011Q1 2010
Monday, July 11, 2011
I was wrong.
Q4 2010 Q2 2011Q1 2010
Monday, July 11, 2011
WebGL is enabled in:
• Chrome - Stable
• Firefox 4 Beta
• Webkit Nightly’s
• an Opera Preview Release
• IE ... Yeah, not anytime soon.
Monday, July 11, 2011
By the end of Q2All 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 (We’re 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 (We’re 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 you’re 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 you’re 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 PipeLineVertex Operation
⇓
Rasterization
⇓
Fragment Operation
⇓
FrameBuffer
Monday, July 11, 2011
Simple(st) Shaders
void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }
Fragment Shader
attribute vec3 aVertexPosition;void main(void) { gl_Position = vec4(aVertexPosition, 1.0);}
Vertex Shader
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 isn’t 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
PhiloGLRelatively 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.jshttps://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 doesn’t exist...But it should - talk to me if you’re interested in working on
something after the meetup.
Monday, July 11, 2011
Thanks!Pascal Rettig
@cykod on Twitter
Monday, July 11, 2011