Post on 17-May-2015
description
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/