Comp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272.

Size: px

Start display at page:

Download "Comp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272."

Dortha Rich
5 years ago
Views:

1 Comp4422 Computer Graphics Lab 02: WebGL API Prof. George Baciu PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu

2 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

3 Use Google Chrome 9/6/2018 COMP4422 Lab 02 George Baciu

4 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

5 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

6 If HTML5 is NOT supported Your browser does not support the HTML5 canvas element. 9/6/2018 COMP4422 Lab 02 George Baciu

7 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

8 Otherwise, you get 9/6/2018 COMP4422 Lab 02 George Baciu

9 Exercise Change the canvas size to 1024 x x /6/2018 COMP4422 Lab 02 George Baciu

10 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

<!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.

11 <!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

12 WebGL Components Drawing buffers Primitive types 9/6/2018 COMP4422 Lab 02 George Baciu

13 Drawing Buffers A color buffer A depth buffer A stencil buffer 9/6/2018 COMP4422 Lab 02 George Baciu

14 What is a buffer? A block of memory for temporarily storing data 9/6/2018 COMP4422 Lab 02 George Baciu

15 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

16 Primitive Types Points Lines Triangles 9/6/2018 COMP4422 Lab 02 George Baciu

17 Seven ways to render POINTS LINES LINE_STRIP LINE_LOOP 9/6/2018 COMP4422 Lab 02 George Baciu

18 Seven ways to render TRIANGLES TRIANGLE_STRIP TRIANGLE_FAN 9/6/2018 COMP4422 Lab 02 George Baciu

19 Obtain Context For setting background color For drawing points/triangles... 9/6/2018 COMP4422 Lab 02 George Baciu

20 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

21 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

22 You get 9/6/2018 COMP4422 Lab 02 George Baciu

23 Exercise Change the canvas background color Black color Green color Blue color Alpha value 9/6/2018 COMP4422 Lab 02 George Baciu

24 Drawing Triangle Vertex Buffer Shader Primitive Type 9/6/2018 COMP4422 Lab 02 George Baciu

25 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

26 Drawing Triangle Shader Vertex Shader Fragment Shader 9/6/2018 COMP4422 Lab 02 George Baciu

27 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

28 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

29 Drawing Triangle Primitive Type 9/6/2018 COMP4422 Lab 02 George Baciu

30 Drawing Triangle Primitive Type gl.drawarrays(gl.triangles, 0, 6); 9/6/2018 COMP4422 Lab 02 George Baciu

31 Drawing Triangle Code Structure initwebgl setupwebgl initbuffers initshaders drawscene 9/6/2018 COMP4422 Lab 02 George Baciu

32 You get 9/6/2018 COMP4422 Lab 02 George Baciu

33 Exercise Draw four triangles Change the triangle color 9/6/2018 COMP4422 Lab 02 George Baciu

34 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

35 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

36 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

37 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

38 You get 9/6/2018 COMP4422 Lab 02 George Baciu

39 Exercise Change the triangle color Set constant color in Vertex Shader Script 9/6/2018 COMP4422 Lab 02 George Baciu

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.

40 Animation updatebuffers var x_translation = Math.sin(angle)/2.0; var trianglevertices = [ //left triangle x_translation, 0.5, 0.0, x_translation, 0.0, 0.0, x_translation, -0.5, 0.0, //right triangle x_translation, 0.5, 0.0, x_translation, 0.0, 0.0, x_translation, -0.5, 0.0 ]; 9/6/2018 COMP4422 Lab 02 George Baciu

41 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

42 Animation animloop setupwebgl(); updatebuffers(); drawscene(); requestanimframe(animloop, canvas); 9/6/2018 COMP4422 Lab 02 George Baciu

43 You get 9/6/2018 COMP4422 Lab 02 George Baciu

44 Exercise Create color animation 9/6/2018 COMP4422 Lab 02 George Baciu

45 Download: 9/6/2018 COMP4422 Lab 02 George Baciu

46 Try things out 9/6/2018 COMP4422 Lab 02 George Baciu

Introduction to OpenGL/GLSL and WebGL GLSL

Introduction to OpenGL/GLSL and WebGL GLSL Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does