WebGL
0 likes321 views
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.
![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](https://image.slidesharecdn.com/webgl-140704091832-phpapp01/85/WebGL-4-320.jpg)
WebGL
- 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