WebGL - 3D in your Browser
-
Upload
phil-reither -
Category
Technology
-
view
1.751 -
download
4
description
Transcript of WebGL - 3D in your Browser
![Page 1: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/1.jpg)
3D in theBrowser
![Page 2: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/2.jpg)
http://madebyevan.com/webgl-water/
![Page 3: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/3.jpg)
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
![Page 4: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/4.jpg)
WebGL is OpenGL ESfor JavaScript.
cross plattform
2d&3d APIsubset of Opengl
“for mobile”
chrome, safari,
firefox, opera
![Page 5: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/5.jpg)
OpenGLcross
platform
around
since 1992
openStandard
widely use,eg. wow
multi-
language
![Page 6: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/6.jpg)
WebGL uses <canvas>var ctx = canvas. getContext('experimental-webgl');
normal canvasis ‘2d’
![Page 7: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/7.jpg)
WebGL runs on the graphics card.
![Page 8: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/8.jpg)
1. Vertex Operations
2. Rasterization
3. Fragment operations
4. Framebuffer
![Page 9: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/9.jpg)
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
![Page 10: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/10.jpg)
<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
![Page 11: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/11.jpg)
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
![Page 12: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/12.jpg)
43%Browser Support
![Page 13: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/13.jpg)
http://www.chromeexperiments.com/detail/webgl-terrain/?f=webgl
![Page 14: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/14.jpg)
http://www.ambiera.at/copperlicht/demos/demo_quakelevel_external.html
![Page 15: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/15.jpg)
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.
![Page 16: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/16.jpg)
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/
![Page 17: WebGL - 3D in your Browser](https://reader038.fdocuments.in/reader038/viewer/2022102901/555820bdd8b42a25588b4b98/html5/thumbnails/17.jpg)
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/