WebGLby Gyuri Horak

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

The WebGL context

● <canvas>

● gl = canvas.getContext('webgl')

● gl's methods are OpenGL functions:○ gl.enable(gl.DEPTH_TEST)

● example1

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

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

Screen update

● setTimeout / setInterval

● better: requestAnimationFrame● rotate, onclick● example4

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