WebGL - 3D in your Browser

3D in theBrowser

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

1994: VRMLModel & Hyperlink in Page

1994Rednex - Cotton Eye Joeall-4-one - I swear

1997: VRML97Scripting & Interaction

1997Aqua - Barbie GirlHanson - mmmbop

2004: x3dxml & skinning

2004Linkin Park - NumbOutkast - hey ya!

2007: colladaIntermediate format

2007DJ ötzi - ein SternRihanna - Umbrella

2011: Webglin browser rendering

2011lady gaga - born this wayJustin bieber - Mistletoe

WebGL is OpenGL ESfor JavaScript.

cross plattform

2d&3d APIsubset of Opengl

“for mobile”

chrome, safari,

firefox, opera

OpenGLcross

platform

around

since 1992

openStandard

widely use,eg. wow

multi-

language

WebGL uses <canvas>var ctx = canvas. getContext('experimental-webgl');

normal canvasis ‘2d’

WebGL runs on the graphics card.

1. Vertex Operations

2. Rasterization

3. Fragment operations

4. Framebuffer

Shaders programs that

run on the gpu

// -- The vertex shader

// position attributeattribute vec3 aVertexPosition;

// convert to world spaceuniform mat4 worldMatrix;

// convert to screen spaceuniform mat4 viewProjectionMatrix;

void main(void) { // which pixel is this gl_Position = viewProjectionMatrix * worldMatrix * vec4(aVertexPosition, 1.0);}

// -- The fragment shader

// a uniform saying which coloruniform vec4 color;

void main(void) { // color the pixel, YEAH! gl_FragColor = color;}

returns a color

returns a position

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

<script id="shader-fs" type="x-shader/x-fragment"> precision mediump float;

void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }</script>

<script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix; uniform mat4 uPMatrix;

void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }</script>

<script type="text/javascript">

var gl; function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) { } if (!gl) { alert("Could not initialise WebGL, sorry :-("); } }

function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; }

var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; }

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); } else { return null; }

gl.shaderSource(shader, str); gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; }

return shader; }

var shaderProgram;

function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs");

shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); 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); }

var triangleVertexPositionBuffer; var squareVertexPositionBuffer;

function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3;

squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; }

function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 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);

mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

mat4.translate(mvMatrix, [3.0, 0.0, 0.0]); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); }

function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers();

gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST);

drawScene(); }

</script>

a “simple” example

Libraries & Frameworkshttp://senchalabs.github.com/philogl/https://github.com/mrdoob/three.js/http://www.ambiera.com/copperlicht/http://www.khronos.org/webgl/wiki/Main_Page

make the

code simpler

43%Browser Support

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

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

Summary WebGL3D 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.

Material UsedBanksy “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/

Material Used3d 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/