WebGL - 3D in your Browser
5 likes1,669 views
The document provides an overview of WebGL, a JavaScript API for rendering 3D graphics directly in web browsers using the graphics card. It details various features, development challenges, and example code snippets for utilizing WebGL effectively, while noting that Internet Explorer does not support it. Additionally, it references various artistic materials and examples related to the topic.
![<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);
}](https://image.slidesharecdn.com/webgl-111218134307-phpapp01/85/WebGL-3D-in-your-Browser-10-320.jpg)
WebGL - 3D in your Browser
- 1. 3 Di n the row ser
- 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%
- 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/