WebGL
advertisement
Michael Robertson
Yuta Takayama
What is WebGL?
• 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
Security Vulnerabilities
•Cross-domain image theft
•Graphics memory theft
•Client-side denial of service
Sample Program
http://learningwebgl.com/lessons/lesson01/index.html
Sample Program - HTML
All 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/xfragment">
precision mediump float;
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/xvertex">
attribute vec3 aVertexPosition;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
}
</script>
void main(void) {
These shaders are written in GLSL
(OpenGL Shading Language)
They run on the graphics card
These are the most basic shaders
gl_Position = uPMatrix * uMVMatrix *
vec4(aVertexPosition, 1.0);
}
</script>
Chrome Experiments
http://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
