Michael Robertson Yuta Takayama

WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates 3D graphics on a compatible web browser through the use of JavaScript. What is WebGL?

WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering. It uses the HTML5 canvas element You can create WebGL scenes without programming by using other tools such as Blender or Maya and then export to WebGL What is WebGL?

Cross-domain image theft Graphics memory theft Client-side denial of service Security Vulnerabilities

Sample Program

Sample Program - HTML All you need in the body is: The tag supports new kinds of Javascript-drawn elements and is new in html5. The webGL setup code lies in the Javascript function webGLStart which is called once the page is loaded.

Sample Program - webGLStart() 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(); } Initializes the selected canvas for webGL Initializes and gets the shaders (part of the graphics pipeline to build objects and color the associated pixels) Initializes the buffer which holds the object information to output to the display Set the background to black and sets depth testing so we don't draw objects that are behind other objects.

Sample Program - initBuffers() 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; … Same with square with 4 vertices of size 3 } Initializes the triangle with explicit vertices and fills the current buffer

Sample Program - drawScene() function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.viewport sizes the canvas gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear clears the canvas mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.perspective sets up the camera and how to view it mat4.identity(mvMatrix); mat4.identity sets the current location to the center of the canvas using the identity matrix (Linear Algebra) using a third-party matrix library "glMatrix" mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); mat4.translate moves to the left side to draw the triangle

Sample Program - drawScene() gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); call the buffer created earlier gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); initializes the vertices stated earlier SetMatrixUniforms(); Tells webGL to use the mvMatrix we've defined and altered earlier gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); Draw triangles using the array of vertices … Same with the square }

Sample Program - Shaders The fragment shader sets the color of the triangle/square to white precision mediump float; void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } These shaders are written in GLSL (OpenGL Shading Language) They run on the graphics card These are the most basic shaders The vertex shader (called for every vertex) sets the position of the vertex using matrices defined in the main program (uniform variables) attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }

Chrome Experiments Once you master, lots of unique things could be done. Such as… WebGL Skin Undulating Monkey Spiral Trip