Setting Up WebGL

Introduction to WebGL Shaders

Passing Data to WebGL Shaders

WebGL Vertex Buffers

Drawing Arrays in WebGL

Loading in WebGL Shaders

Animating WebGL Vertices

User Interaction in WebGL

3D Transformation Matrices in WebGL

Using a Matrix Library for WebGL

Create 3D Graphics in JavaScript Using WebGL

In this lesson, we look at the different drawing modes you can use in gl.drawArrays and how to selectively draw subsets of a full vertex array.

[00:00] We have three vertices in a vertex buffer, and we're rendering these as three separate points. We can change the position of the points, the size they are rendered at, and their color. Now we want to start forming shapes with these points.

[00:15] We have three points. We should be able to draw a triangle. You might guess that we do that by changing that gl.POINTS parameter in the drawArrays to something else. That is exactly what we'll do. First, let's try gl.LINES.

[00:31] That does something, but not exactly what we want. We only get the bottom line. That's because gl.LINES interprets the vertex array as containing two points for each line. It draws one line from the first vertex to the second, then another line from the third to the fourth, fifth to sixth, and so on.

[00:50] We only have three vertices. It draws a line from the first vertex to the second, which gives us the bottom line. It doesn't have another full pair to draw to, so that's where it ends. One way to solve this would be by making a bunch more points.

[01:05] If we duplicate the second point, then duplicate the third one, and finally, duplicate the first one, and add that to the end of the list, now we have six points, which will form three lines. We change the gl.drawArray's call to indicate the new number of points. There's our triangle.

[01:26] That's awfully wasteful. We should be able to reuse those points. Let's try something else. I revert back to where we were with the original three points, and change the mode to gl.LINE_STRIP. Not quite, but we are getting closer.

[01:43] LINE_STRIP draws a series of line segments from the very first vertex to the last one. We want to close the shape. Again, we could add another point that duplicates the first point, but there's one more option to try, LINE_LOOP.

[01:59] There we go, a stroked triangle. LINE_LOOP is exactly the same as LINE_STRIP, but after it hits the last vertex, it draws a final line segment back to the start. That's about it for line options. How about a filled triangle?

[02:14] There are three options for creating fill shapes, and all of them deal with forming triangles with groups of three points. The first one, gl.TRIANGLES, just takes each group of three vertices, and makes a triangle out of them.

[02:28] Just like gl.LINES made separate individual lines, gl.TRIANGLES will make as many individual triangles as it can. You can see now that we have a filled triangle. The other two options, gl.TRIANGLE_STRIP and gl.TRIANGLE_FAN, will fill larger shapes by combining vertices into multiple connected triangles. We'll look at them later.

[02:51] While we're in here, though, let's take a look at the second and third parameters to drawArrays. I'm going to paste in a different set of vertices here. I'll change the mode to LINE_STRIP. These form 10 points, so I'll change the last parameter to 10.

[03:06] You see that these points form a zigzag line. We know that the last parameter to drawArrays is the number of points to draw. We don't have to draw the entire array. If I set this to five, then we only draw a LINE_STRIP using the first five points.

[03:22] What about that second parameter? This acts as an offset or starting point. If I set that to five, I'm drawing using five points, but starting at the sixth one. This lets you be very selective about what you draw.

[03:37] You could even call drawArrays multiple times with different values. Here, I'll draw using the first three points, and draw again using the last three. That's exactly what you get.

Course

Create 3D Graphics in JavaScript Using WebGL

Drawing Arrays in WebGL

Share this video with your friends