Computer Graphics
Jochen Lang
jlang@uottawa.ca
Faculté de génie | Faculty of Engineering
Jochen Lang, EECS jlang@uOttawa.ca
More on Data and Buffers in WebGL 2
• Data transfer and drawing – Using triangle strips
– Indexed elements
• Instancing
– Per instance attributes
• Aside: Randomized orientation and position
Jochen Lang, EECS jlang@uOttawa.ca
Reusing Vertex Coordinates by Indexing
53
• Goals
– Reduce memory use
– Reduce transfer bandwith
– Simpler model specification
• Example Wavefront obj file
v 0.500000 0.500000 0.500000 v -0.500000 0.500000 0.500000 v 0.500000 -0.500000 0.500000 …
f123
f135
…
1
2
Jochen Lang, EECS jlang@uOttawa.ca
Indexed Drawing with a VBO/VAO
• Indexing into vertices is called drawing with Elements in WebGL
– Need to transfer the indices to WebGL
– Use a buffer: an element buffer object
– Use the ELEMENT_ARRAY_BUFFER target
let elementBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer ); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index,
gl.STATIC_DRAW);
• Draw with the element buffer
gl.drawElements(GL_TRIANGLE, 6, gl.UNSIGNED_SHORT, 0);
Jochen Lang, EECS jlang@uOttawa.ca
WebGL Drawing Primitives
There are different drawing primitives in WebGL • POINTS
– Each vertex is drawn as a dot
• LINES
– Every two vertices form a line segment
• LINE_STRIP
– A polyline where the first two vertices form a line segment and then another segment is added for every new vertex
• LINE_LOOP
– Same as line strip but another segment is added from the last vertex back to the first.
• TRIANGLES
– Every 3 vertices form a triangle.
• Other options are: TRIANGLE_FAN and TRIANGLE_STRIP
Jochen Lang, EECS jlang@uOttawa.ca
Drawing with Fans
• Constant is gl.TRIANGLE_FAN
• Reduces memory consumption drastically: One new triangle per vertex
– E.g. 6 triangles with 8 vertices, i.e., 8-2=6 which is much better than 6*3=18 vertices
– Catch: Shape of fan is limited as the start vertex is in all new triangles (irregular vertex – more on this
later)
1
0
4
2
5
3
6
Jochen Lang, EECS jlang@uOttawa.ca
Drawing with Strips
• Constant is gl.TRIANGLE_STRIP
1357 0246
• Reduces memory consumption drastically: One new triangle per vertex
– E.g. 6 triangles with 8 vertices, i.e., 8-2=6 which is much better than 6*3=18 vertices
• Catch: Connectivity has to match
– Process vertices sometimes referred to as “stripify” – Normally need multiple strips per model
• Example: Cube can be represented by two triangle strips covering three faces each
Jochen Lang, EECS jlang@uOttawa.ca
Drawing with Elements and Multiple Triangle Strips
• Indices for all triangle strips are stored in the same buffer
– Use a special index as marker for when a new strip starts.
– Index in WebGL2 fixed to largest number (0xFF,0xFFFF depending on data format – byte or short).
• Example: …,7,4,5,0xFF,2,6,0,…
• Drawing with multiple triangle strips
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,ebo); glDrawElements( GL_TRIANGLE_STRIP, … ); // as before
Jochen Lang, EECS jlang@uOttawa.ca
Exercise A: Indexed Box Drawing
• Download box_skel.zip run the skeleton code
• Study the drawing and initialization routines
– Note how the VBO is filled with 6*2*3=36 vertices from BoxShape.vertex_direct
• Change the code to use element draw
– Cube only needs 8 vertices available in BoxShape.vertex
• Create a Box.index and use it in Boxes.js for filling the VBO and drawing
Jochen Lang, EECS jlang@uOttawa.ca
Instancing
• Draw the same model multiple times using a single draw command
– transfer the data only once
• Implemented by using vertex attributes not per vertex but per instance
– Simply specify how often the per instance attribute is updated with an attribute divisor greater than 0
• Attrib divisor of one means every time/instance
gl.vertexAttribDivisor(locColor, 1);
• Draw with the instanced version of the corresponding drawing command, e.g.:
gl.drawElementsInstanced(gl.TRIANGLE_STRIP,
…, …, …, numberOfInstances);
Jochen Lang, EECS jlang@uOttawa.ca
Random Transformations
• The class Attributes contains a routine to create random rigid transformations
– Pick a random unit direction vector
• Vector x,y,z chosen randomly between
• Rejection sampling to reject oversampling the “corners” of the unit cube
– Pick random rotation from
– Pick random translation vector within the viewing volume
Jochen Lang, EECS jlang@uOttawa.ca
Passing Random Transformation
• •
Vertex attributes for passing random transformation
Vertex attributes require to assemble matrices from vectors
– Pass four vec4 element for the columns of the mat4
for (let i = 0; i < 4; i++) {
// Set up the vertex attribute gl.vertexAttribPointer(locMM + i, // Location
4, gl.FLOAT, // Column 4 floats
false, // no normalization
sz * 16, // Stride for next 4x4 matrix sz * 4 * i); // Offset for ith column
gl.enableVertexAttribArray(locMM+i);
gl.vertexAttribDivisor(locMM+i, 1); // Mat. per instance }
Jochen Lang, EECS jlang@uOttawa.ca
Exercise B: Instancing
• Study the Attributes class
– Routine to create random rotations and translations
• Set the model matrix per instance
– using a vertex attribute
– uncomment and complete the code in Boxes.js and change the shader boxes.vs
• Use the colors per cube instance
Jochen Lang, EECS jlang@uOttawa.ca