WebGL - 3D in your Browser

2,029 views
1,933 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,029
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
54
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

WebGL - 3D in your Browser

  1. 1. 3 Di n the row ser
  2. 2. http://madebyevan.com/webgl-water/
  3. 3. 1994: VRML 1994Model & Hyperlink in Page Rednex - Cotton Eye Joe all-4-one - I swear1997: VRML97 1997Scripting & Interaction Aqua - Barbie Girl Hanson - mmmbop2004: x3d 2004xml & skinning Linkin Park - Numb Outkast - hey ya!2007: collada 2007Intermediate format DJ ötzi - ein Stern Rihanna - Umbrella2011: Webgl 2011in browser rendering lady gaga - born this way Justin bieber - Mistletoe
  4. 4. WebGL iss pl attformOpenGL ES cros 2d&3d API subset of Opengl “for mobile”for JavaScript. ari, chrome, saf a r firefox, ope
  5. 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. 6. WebGL uses<canvas>var ctx = canvas. getContext(experimental-webgl); norm is ‘2 al canv d’ as
  7. 7. WebGL runs on the graphics card.
  8. 8. 1. Vertex Operations2. Rasterization3. Fragment operations4. Framebuffer
  9. 9. Shaders t pr ograms tha gpu run on the// -- The vertex shader // -- The fragment shader// position attribute // a uniform saying which colorattribute 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 cvoid main(void) { // which pixel is this gl_Position = viewProjectionMatrix * worldMatrix * vec4(aVertexPosition, 1.0);} n retu rns a positio
  10. 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. 11. Libraries &Frameworks e the ler mak simp codehttp://senchalabs.github.com/philogl/https://github.com/mrdoob/three.js/http://www.ambiera.com/copperlicht/http://www.khronos.org/webgl/wiki/Main_Page
  12. 12. BrowserSupport 43%
  13. 13. http://www.chromeexperiments.com/detail/webgl-terrain/?f=webgl
  14. 14. http://www.ambiera.at/copperlicht/demos/demo_quakelevel_external.html
  15. 15. SummaryWebGL3D 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. 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. 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/

×