Comp4422 Computer Graphics Lab 02: WebGL API www.comp.polyu.edu.hk/~csgeorge/comp4422 Prof. George Baciu csgeorge@comp.polyu.edu.hk PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu 2018 1
WebGL Prerequisites HTML DOM (Document Object Management) JavaScript programming JavaScript-WebGL bindings: Three.js glmatrix.js webgl-utils.js CSS: Cascading Style Sheets 9/6/2018 COMP4422 Lab 02 George Baciu 2018 2
Use Google Chrome 9/6/2018 COMP4422 Lab 02 George Baciu 2018 3
Setting up the Scene Obtain WebGL context Create primitive types Create buffer objects (VBOs) Create attributes Two-dimensional static rendering Create a program and shaders Set up the view matrices Add animation and movement 9/6/2018 COMP4422 Lab 02 George Baciu 2018 4
Html Canvas HTML5 <!doctype html> <html> <head> <title>a blank canvas</title> <style> body { background-color: grey; } canvas { background-color: white; } </style> </head> <body> <canvas id="my-canvas" width="400" height="300"> Your browser does not support the HTML5 canvas element. </canvas> </body> </html> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 5
If HTML5 is NOT supported Your browser does not support the HTML5 canvas element. 9/6/2018 COMP4422 Lab 02 George Baciu 2018 6
If HTML5 is NOT supported Then, you get: Your browser does not support the HTML5 canvas element. 9/6/2018 COMP4422 Lab 02 George Baciu 2018 7
Otherwise, you get 9/6/2018 COMP4422 Lab 02 George Baciu 2018 8
Exercise Change the canvas size to 1024 x 768 1600 x 1200 9/6/2018 COMP4422 Lab 02 George Baciu 2018 9
Setting up WebGL Define a JavaScript setup function that is called once when the window DOM is loaded. 9/6/2018 COMP4422 Lab 02 George Baciu 2018 10
<!doctype html> <html> <head> </html> </head> <body> </body> <title>a blank canvas</title> <style> body canvas </style> <script> { background-color: grey; } { background-color: white; } window.onload = setupwebgl; var gl = null; function setupwebgl() { var canvas = document.getelementbyid( my-canvas ); try { gl = canvas.getcontext( experimental-webgl ); } } </script> <canvas id="my-canvas" width="400" height="300"> Your browser does not support the HTML5 canvas element. </canvas> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 14
WebGL Components Drawing buffers Primitive types 9/6/2018 COMP4422 Lab 02 George Baciu 2018 12
Drawing Buffers A color buffer A depth buffer A stencil buffer 9/6/2018 COMP4422 Lab 02 George Baciu 2018 13
What is a buffer? A block of memory for temporarily storing data 9/6/2018 COMP4422 Lab 02 George Baciu 2018 14
The Color Buffer The color buffer stores values (usually 8 bits) for each of the three color components: Red Green Blue 9/6/2018 COMP4422 Lab 02 George Baciu 2018 15
Primitive Types Points Lines Triangles 9/6/2018 COMP4422 Lab 02 George Baciu 2018 16
Seven ways to render POINTS LINES LINE_STRIP LINE_LOOP 9/6/2018 COMP4422 Lab 02 George Baciu 2018 17
Seven ways to render TRIANGLES TRIANGLE_STRIP TRIANGLE_FAN 9/6/2018 COMP4422 Lab 02 George Baciu 2018 18
Obtain Context For setting background color For drawing points/triangles... 9/6/2018 COMP4422 Lab 02 George Baciu 2018 19
Obtain Context <!doctype html> <html> <head> <title>a blank canvas</title> <style> body { background-color: grey; } canvas { background-color: white; } </style> </head> <body> <canvas id="my-canvas" width="400" height="300"> Your browser does not support the HTML5 canvas element. </canvas> </body> JavaScript Code <script> // Getting Context </script> </html> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 20
Obtain Context <script> window.onload = setupwebgl; var gl = null; function setupwebgl() { var canvas = document.getelementbyid("my-canvas"); gl = canvas.getcontext("experimental-webgl"); if(gl) { //set the clear color to red gl.clearcolor(1.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }else{ alert( "Error: Your browser does not appear to support WebGL."); } } </script> Enable Color Writing 9/6/2018 COMP4422 Lab 02 George Baciu 2018 21
You get 9/6/2018 COMP4422 Lab 02 George Baciu 2018 22
Exercise Change the canvas background color Black color Green color Blue color Alpha value 9/6/2018 COMP4422 Lab 02 George Baciu 2018 23
Drawing Triangle Vertex Buffer Shader Primitive Type 9/6/2018 COMP4422 Lab 02 George Baciu 2018 24
Drawing Triangle Vertex Buffer var trianglevertices = [ //top triangle -0.5, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.5, 0.0, //bottom triangle -0.5, -0.5, 0.0, 0.0, 0.0, 0.0, 0.5, -0.5, 0.0 ]; 9/6/2018 COMP4422 Lab 02 George Baciu 2018 25
Drawing Triangle Shader Vertex Shader Fragment Shader 9/6/2018 COMP4422 Lab 02 George Baciu 2018 26
Drawing Triangle Shader Script (Vertex) <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 avertexposition; void main(void) { gl_position = vec4(avertexposition, 1.0); } </script> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 27
Drawing Triangle Shader Script (Fragment) <script id="shader-fs" type="x-shader/x-fragment"> void main(void) { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } </script> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 28
Drawing Triangle Primitive Type 9/6/2018 COMP4422 Lab 02 George Baciu 2018 29
Drawing Triangle Primitive Type gl.drawarrays(gl.triangles, 0, 6); 9/6/2018 COMP4422 Lab 02 George Baciu 2018 30
Drawing Triangle Code Structure initwebgl setupwebgl initbuffers initshaders drawscene 9/6/2018 COMP4422 Lab 02 George Baciu 2018 31
You get 9/6/2018 COMP4422 Lab 02 George Baciu 2018 32
Exercise Draw four triangles Change the triangle color 9/6/2018 COMP4422 Lab 02 George Baciu 2018 33
Adding Color Setup ColorBuffer var triangleverticecolors = [ //top left triangle 1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, //bottom right triangle 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0 ]; 9/6/2018 COMP4422 Lab 02 George Baciu 2018 34
Adding Color Change Shader Script (Vertex) <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 avertexposition; attribute vec3 avertexcolor; varying highp vec4 vcolor; void main(void) { gl_position = vec4(avertexposition, 1.0); vcolor = vec4(avertexcolor, 1.0); } </script> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 35
Adding Color Change Shader Script (Fragment) <script id="shader-fs" type="x-shader/x-fragment"> varying highp vec4 vcolor; void main(void) { gl_fragcolor = vcolor; } </script> 9/6/2018 COMP4422 Lab 02 George Baciu 2018 36
Adding Color drawscene vertexcolorattribute = gl.getattriblocation(glprogram, "avertexcolor"); gl.enablevertexattribarray(vertexcolorattribute); gl.bindbuffer(gl.array_buffer, trianglescolorbuffer); gl.vertexattribpointer(vertexcolorattribute, 3, gl.float, false, 0, 0); numberofcomponents type normalizeflag stride offset 9/6/2018 COMP4422 Lab 02 George Baciu 2018 37
You get 9/6/2018 COMP4422 Lab 02 George Baciu 2018 38
Exercise Change the triangle color Set constant color in Vertex Shader Script 9/6/2018 COMP4422 Lab 02 George Baciu 2018 39
Animation updatebuffers var x_translation = Math.sin(angle)/2.0; var trianglevertices = [ //left triangle -0.5 + x_translation, 0.5, 0.0, 0.0 + x_translation, 0.0, 0.0, -0.5 + x_translation, -0.5, 0.0, //right triangle 0.5 + x_translation, 0.5, 0.0, 0.0 + x_translation, 0.0, 0.0, 0.5 + x_translation, -0.5, 0.0 ]; 9/6/2018 COMP4422 Lab 02 George Baciu 2018 40
Animation requestanimationframe window.requestanimframe = (function(){ return window.requestanimationframe window.webkitrequestanimationframe window.mozrequestanimationframe window.orequestanimationframe window.msrequestanimationframe function( callback ){ //define the interval time window.settimeout(callback, 1000 / 60); }; })(); 9/6/2018 COMP4422 Lab 02 George Baciu 2018 41
Animation animloop setupwebgl(); updatebuffers(); drawscene(); requestanimframe(animloop, canvas); 9/6/2018 COMP4422 Lab 02 George Baciu 2018 42
You get 9/6/2018 COMP4422 Lab 02 George Baciu 2018 43
Exercise Create color animation 9/6/2018 COMP4422 Lab 02 George Baciu 2018 44
Download: http://www.comp.polyu.edu.hk/~csgeorge/comp4422/lab/ 9/6/2018 COMP4422 Lab 02 George Baciu 2018 45
Try things out 9/6/2018 COMP4422 Lab 02 George Baciu 2018 46