WebGL brings hardware accelerated 3D to your browser. The code may be complex, but the possibilities are amazing. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.

1. 3 Di n the
row ser

2. http://madebyevan.com/webgl-water/

3. 1994: VRML 1994
Model & Hyperlink in Page Rednex - Cotton Eye Joe
all-4-one - I swear
1997: VRML97 1997
Scripting & Interaction Aqua - Barbie Girl
Hanson - mmmbop
2004: x3d 2004
xml & skinning Linkin Park - Numb
Outkast - hey ya!
2007: collada 2007
Intermediate format DJ ötzi - ein Stern
Rihanna - Umbrella
2011: Webgl 2011
in browser rendering lady gaga - born this way
Justin bieber - Mistletoe

4. WebGL iss pl attform
OpenGL ES
cros
2d&3d API subset of Opengl
“for mobile”
for JavaScript. ari,
chrome, saf a
r
firefox, ope

5. St op
an en ss rm
ro fo
dar c t ulti-
la m
OpenGL
d p age
l angu
nd wide
ou 92
ar 9 eg. ly u
se,
e1 wow
si nc

6. WebGL uses
<canvas>
var ctx = canvas.
getContext('experimental-webgl');
norm
is ‘2 al canv
d’ as

7. WebGL runs on the
graphics card.

8. 1. Vertex Operations
2. Rasterization
3. Fragment operations
4. Framebuffer

9. Shaders
t
pr ograms tha
gpu
run on the
// -- The vertex shader // -- The fragment shader
// position attribute // a uniform saying which color
attribute vec3 aVertexPosition; uniform vec4 color;
// convert to world space void main(void) {
uniform mat4 worldMatrix; // color the pixel, YEAH!
gl_FragColor = color;
// convert to screen space }
uniform mat4 viewProjectionMatrix;
o lor
returns a c
void main(void) {
// which pixel is this
gl_Position = viewProjectionMatrix *
worldMatrix *
vec4(aVertexPosition, 1.0);
}
n
retu rns a positio

10. <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment"> var triangleVertexPositionBuffer;
precision mediump float; var squareVertexPositionBuffer;
void main(void) { function initBuffers() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); triangleVertexPositionBuffer = gl.createBuffer();
} gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
</script> var vertices = [
0.0, 1.0, 0.0,
<script id="shader-vs" type="x-shader/x-vertex"> -1.0, -1.0, 0.0,
attribute vec3 aVertexPosition; 1.0, -1.0, 0.0
];
uniform mat4 uMVMatrix; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
uniform mat4 uPMatrix; triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); squareVertexPositionBuffer = gl.createBuffer();
} gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
</script> vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
<script type="text/javascript"> 1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
var gl; ];
function initGL(canvas) { gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
try { squareVertexPositionBuffer.itemSize = 3;
gl = canvas.getContext("experimental-webgl"); squareVertexPositionBuffer.numItems = 4;
gl.viewportWidth = canvas.width; }
gl.viewportHeight = canvas.height;
} catch (e) {
} function drawScene() {
if (!gl) { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
alert("Could not initialise WebGL, sorry :-("); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
} mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
function getShader(gl, id) {
var shaderScript = document.getElementById(id); mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
if (!shaderScript) { gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
return null; gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT,
} false, 0, 0);
setMatrixUniforms();
var str = ""; gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) { mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
str += k.textContent; gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
} gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT,
k = k.nextSibling; false, 0, 0);
} setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
var shader; }
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER); function webGLStart() {
} else { var canvas = document.getElementById("lesson01-canvas");
return null; initGL(canvas);
} initShaders();
initBuffers();
gl.shaderSource(shader, str);
gl.compileShader(shader); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader)); drawScene();
return null; }
}
return shader; </script>
}
var shaderProgram;
function initShaders() {
mpl e
“simple” exa
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
a
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

11. Libraries &
Frameworks e the ler
mak simp
code
http://senchalabs.github.com/philogl/
https://github.com/mrdoob/three.js/
http://www.ambiera.com/copperlicht/
http://www.khronos.org/webgl/wiki/Main_Page

12. Browser
Support 43%

13. http://www.chromeexperiments.com/detail/webgl-terrain/?f=webgl

14. http://www.ambiera.at/copperlicht/demos/demo_quakelevel_external.html

15. Summary
WebGL
3D in the Browser is nothing new.
WebGL is simple openGL that is rendered directly in the browser.
It uses the graphics card and is therefore very performant.
However the code can be complex and Ie does not support webgl at all.
They will probably want to push directx.

16. Material Used
Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/
Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/
Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/
Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg
Banksy “You have got to be kidding me” http://www.banksy.co.uk/
Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/
Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/
Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/
Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/
Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/
Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/

17. Material Used
3d teapot model http://resumbrae.com/ub/dms423_f08/10/
Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/
furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/
Television Icon http://thenounproject.com/noun/television/#icon-No416
Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/
Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/
Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/