michael robertson yuta takayama. webgl is opengl on a web browser. opengl is a low-level 3d graphics...
TRANSCRIPT
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
http://learningwebgl.com/lessons/lesson01/index.html
Sample Program - HTMLAll you need in the body is:
<body onload="webGLStart();">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"> </canvas>
</body>
The <canvas> 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
<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>
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)
<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>
Chrome Experimentshttp://www.chromeexperiments.com/
Once you master, lots of unique things could be done.
Such as…
WebGL Skin
http://alteredqualia.com/three/examples/webgl_materials_skin.html
Undulating Monkey
http://lab.aerotwist.com/webgl/undulating-monkey/
Spiral Trip
http://www.liorhakim.com/spiral