WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. It uses OpenGL ES 2.0 and is accessed using JavaScript through the <canvas> element. Common libraries like Three.js provide helper methods that simplify common tasks like setting up shaders, buffers, and rendering loops to make 3D graphics programming on the web easier.

1. WebGL
by Gyuri Horak

2. What is WebGl?
● JavaScript extension
● based on OpenGL ES 2.0
● Khronos Group (WebGL main site)
● Firefox 4+, Chrome 9+, Safari 5.1+, Opera
12+
● a bit ugly (C+JS)
● tons of helper libraries

3. The WebGL context
● <canvas>
● gl = canvas.getContext('webgl')
● gl's methods are OpenGL functions:
○ gl.enable(gl.DEPTH_TEST)
● example1

4. Issues with numbers
● Matrix operations (glUtils.js, sylvester.js)
● JavaScript (Number class) => OpenGL (lot
of types)
var 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
];
var squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,
squareVerticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(vertices),
gl.STATIC_DRAW);
● example2

5. Shaders
● standard OpenGL shader language
● from plain text
● <script type="x-shader/x-fragment" id="fShader">...
</script>
● passing attributes to shaders:
vertexColorAttribute = gl.getAttribLocation(shaderProgram,
"aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
● example3

6. Screen update
● setTimeout / setInterval
● better: requestAnimationFrame
● rotate, onclick
● example4

7. Tree.js
● the most popular lib built on top of WebGL
currently
● source on github (mrdoob/three.js)
● many examples, tutorials
● easy to use, cutomizable boilerplate
● default boilerplate, previous example in
three.js