an introduction to webgl...
TRANSCRIPT
![Page 1: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/1.jpg)
CITS3003 Graphics & Animation 1
An Introduction to WebGL Programming
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
![Page 2: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/2.jpg)
Acknowledgments
The materials in this topic were extracted from the talk “An Introduction to WebGL Programming” presented by Edward Angel and Dave Shreiner at SIGGRAPH 2014
2 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
![Page 3: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/3.jpg)
What is WebGL?
•WebGL: JavaScript implementation of OpenGL ES 2.0
- runs in all recent browsers (Chrome, Firefox, IE, Safari)
• operating system independent • window system independent
- application can be located on a remote server - rendering is done within browser using local hardware - uses HTML5 canvas element - integrates with standard Web packages and apps
• CSS • jQuery
3
![Page 4: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/4.jpg)
What do you need to know?
•Web environment and execution •Modern OpenGL basics
- pipeline architecture - shader-based OpenGL - OpenGL Shading Language (GLSL)
• JavaScript
4
![Page 5: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/5.jpg)
WebGL Programming in a Nutshell
•All WebGL programs must do the following: - Set up HTML 5 canvas to render onto - Generate data in application - Create shader programs - Create buffer objects and load data into them - “Connect” data locations with shader variables - Render
5
![Page 6: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/6.jpg)
Application Framework
•WebGL applications need a place to render into
- HTML5 Canvas element
•We can put all code into a single HTML file •We prefer to put setup in an HTML file and application in a separate JavaScript file
- HTML file includes shaders - HTML file reads in utilities and application
6
![Page 7: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/7.jpg)
Simplified Pipeline Model
7
![Page 8: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/8.jpg)
Vertex Shaders
•A shader that is executed for each vertex - Each instantiation can generate one vertex - Outputs are passed on to rasterizer where they are
interpolated and available to fragment shaders - Position output in clip coordinates
•There are lots of effects we can do in vertex shaders:
- Changing coordinate systems - Moving vertices - Per-vertex lighting
8
![Page 9: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/9.jpg)
Fragment Shaders
•A shader that is executed for each “potential” pixel
- fragments still need to pass several tests before making it to the framebuffer
•There are lots of effects we can do in fragment shaders
- Per-fragment lighting - Texture and bump mapping - Environment (Reflection) maps
9
![Page 10: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/10.jpg)
Application Organization •HTML file:
- contains shaders - bring in utilities and application JS file - describes page elements: buttons, menus - contains canvas element
• JS file: -init()
• sets up VBOs • contains listeners for interaction • sets up required transformation matrices • reads, compiles, and links shaders
-render()
10
In the web technology, the term listener (rather than callback) is more commonly used.
![Page 11: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/11.jpg)
A Really Simple Example
11
![Page 12: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/12.jpg)
triangle.html <html> <head> <script id=“vertex-shader” type=“x-shader/x-vertex”> attribute vec4 vPosition; void main() { gl_Position = vPosition; } </script> <script id=“fragment-shader” type=“x-shader/x-fragment”> precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } </script> 12
Precision: lowp vs mediump vs highp
![Page 13: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/13.jpg)
triangle.html (cont.) <script type="text/javascript" src="../Common/webgl-utils.js"> </script> <script type="text/javascript" src="../Common/initShaders.js"> </script> <script type="text/javascript" src="triangle.js"> </script> </head> <body> <canvas id="gl-canvas" width="512" height="512"> Oops ... your browser doesn't support the HTML5 canvas element. </canas> </body> </html> 13
![Page 14: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/14.jpg)
triangle.js var gl; window.onload = function init() { var canvas = document.getElementById("gl-canvas"); gl = WebGLUtils.setupWebGL(canvas); if (!gl) alert("WebGL isn't available."); var vertices = new Float32Array([-1, -1, 0, 1, 1, -1]); // Configure WebGL gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(1.0, 1.0, 1.0, 1.0);
14
![Page 15: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/15.jpg)
triangle.js (cont.) // load shaders and initialize attribute abuffers var program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); // load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
15
The function initShaders() is provided by Angel in the file InitShaders.js in the Common subdirectory. The function fails if the shaders don’t compile or if the program doesn’t link.
![Page 16: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/16.jpg)
triangle.js (cont.) // Associate our shader variables with our data buffer var vPosition = gl.getAttribLocation(program, "vPosition"); gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); render(); }; function render() { gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); }
16
![Page 17: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/17.jpg)
Representing Geometric Objects • Geometric objects are represented using vertices • A vertex is a collection of generic attributes
- positional coordinates - colors - texture coordinates - any other data associated with that point in space
• Positions are stored in 4D homogeneous coordinates
• Vertex data must be stored in vertex buffer objects (VBOs)
17
p =
xyzw
![Page 18: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/18.jpg)
Our Second Program
•Render a cube with a different colour for each face
•Our example demonstrates: - simple object modelling
• building up 3D objects from geometric primitives • building geometric primitives from vertices
- initializing vertex data - organizing data for rendering - interactivity - animation
18
![Page 19: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/19.jpg)
Initializing the Cube’s Data
• There are 36 triangle vertices (2 triangles per face. Thus 6 vertices per face).
• To simplify communicating with GLSL, we will use a package MV.js which contains a vec3 object similar to GLSL’s vec3 type.
• Before we can initialize our VBO, we need to store the data. Each vertex of our cube has a position and a colour. We create two arrays to hold the VBO data:
var points = []; var colors = [];
19
![Page 20: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/20.jpg)
Initializing the Cube’s Data (cont.) • Positions of the 8 vertices of a unit cube centred at the origin
with sides aligned with the coordinate axes:
20
var vertices = [ vec4( -0.5, -0.5, 0.5, 1.0 ), vec4( -0.5, 0.5, 0.5, 1.0 ), vec4( 0.5, 0.5, 0.5, 1.0 ), vec4( 0.5, -0.5, 0.5, 1.0 ), vec4( -0.5, -0.5, -0.5, 1.0 ), vec4( -0.5, 0.5, -0.5, 1.0 ), vec4( 0.5, 0.5, -0.5, 1.0 ), vec4( 0.5, -0.5, -0.5, 1.0 ) ]; 0 (black)
1 (red) 2 (yellow)
3 (green)
4 (blue)
5 (magenta)
7 (cyan)
6 (white)
![Page 21: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/21.jpg)
Initializing the Cube’s Data (cont.)
21
• Colours of the 8 vertices of the cube can be done in a similar way. Alternatively, we can do it as follows:
var vertexColors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 1.0, 1.0, 1.0, 1.0 ], // white [ 0.0, 1.0, 1.0, 1.0 ] // cyan ]; • We are going to compose the points and colors arrays from the vertices and vertexColors arrays.
![Page 22: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/22.jpg)
Generating a Cube Face from Vertices • To simplify generating the geometry, we use a quad()
function, which creates 2 triangles for each face and assign colours to the vertices:
function quad(a, b, c, d) { var indices = [ a, b, c, a, c, d ]; for ( var i = 0; i < indices.length; ++i ) { points.push( vertices[indices[i]] ); colors.push( vertexColors[indices[i]] ); /* if we want the face to have a single color, * use the following line instead. */ // colors.push(vertexColors[a]); } }
22
![Page 23: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/23.jpg)
Generating the Cube from Faces
•Generate 12 triangles for the cube - 36 vertices with 36 colors function colorCube() { quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 ); }
23
0 (black)
1 (red) 2 (yellow)
3 (green)
4 (blue)
5 (magenta)
7 (cyan)
6 (white)
![Page 24: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/24.jpg)
Arrays in JS
•A JS array is an object with attributes and methods such as length, push() and pop()
- fundamentally different from C-style arrays - cannot send directly to WebGL functions - use flatten() function to extract data from JS
arrays, e.g. gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);
24
Need to flatten the variable colors (an object) into an array of numbers.
![Page 25: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/25.jpg)
Vertex Array Code
• Putting it all together, init() looks something like window.onload = function init() { ... colorCube(); ... var program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); var vBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);
25
![Page 26: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/26.jpg)
Vertex Array Code (cont.) var vPosition = gl.getAttribLocation(program, "vPosition"); gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); var cBuffer = gl.createBuffer(); // similar code for the ‘colors’ array and defining // the location index for the attribute variable // vColor for the shader
26
![Page 27: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/27.jpg)
Vertex Array Code (cont.) thetaLoc = gl.getUniformLocation(program, "theta"); // event listeners for the 4 buttons on the HTML file document.getElementById( "xButton" ).onclick = function () { axis = xAxis; }; // similar code for the yButton and zButton ... document.getElementById("ButtonT").onclick = function() { flag = !flag; }; render(); } // end of init()
27
axis and flag are two global variables.
A uniform variable in the vertex shader
![Page 28: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/28.jpg)
Drawing Geometric Primitives
• The render() function that is called in the init() function looks something like: function render() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); if (flag) theta[axis] += 2.0; // update the uniform variable ‘theta’ in the shader gl.uniform3fv(thetaLoc, theta); gl.drawArrays(gl.TRIANGLES, 0, NumVertices); requestAnimFrame(render); }
28
In vertex shader: uniform vec3 theta;
![Page 29: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/29.jpg)
Drawing Geometric Primitives (cont.)
• Note that we must clear both the frame buffer and the depth buffer.
• The depth buffer is used for hidden surface removal. - To enable HSR, call gl.enable(gl.GL_DEPTH) in init()
•gl.drawArrays initiates the vertex shader for the drawing
•requestAnimateFrame is needed for redrawing if anything is changing
29
![Page 30: An Introduction to WebGL Programmingteaching.csse.uwa.edu.au/units/CITS3003/lectures/24-webgl.pdf · Acknowledgments . The materials in this topic were extracted from the talk “An](https://reader031.vdocuments.net/reader031/viewer/2022041217/5e0671fe9b57461a1869770c/html5/thumbnails/30.jpg)
More Advanced examples
•Everything that we learned about OpenGL – perspective projection, passing vertex normal to shaders, per-fragment lighting, materials (diffused, specular, ambient), texture map, etc – can be done in WebGL
•More advanced WebGL examples can be found at https://www.cs.unm.edu/~angel/WebGL/
•See also links given on the lecture notes webpage of the unit.
30