Time for action — rendering modes

Follow the given steps:

  1. Open the file ch_RenderingModes.html in the HTML5 browser of your preference. This example follows the same structure as discussed in the previous section.
  2. Select the WebGL JS button and scroll down to the initBuffer function.
  3. You will see here that we are drawing a trapezoid. However, on screen you will see two triangles! We will see how we did this later.
  4. At the bottom of the page, there is a combobox that allows you to select the different rendering modes that WebGL provides, as shown in the following screenshot:
    Time for action — rendering modes
  5. When you select any option from this combobox, you are changing the value of the renderingMode variable defined at the top of the WebGL JS code (scroll up if you want to see where it is defined).
  6. To see how each option modifies the rendering, scroll down to the drawScene function.
  7. You will see there that after binding the IBO trapezoidIndexBuffer with the following instruction:
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, trapezoidIndexBuffer);

    you have a switch statement where there is a code that executes, depending on the value of the renderingMode variable: 

    case 'TRIANGLES': {
...
}
case 'LINES': {
...
}
case'POINTS': {
...
}
  8. For each mode, you define the contents of the JavaScript array indices. Then, you pass this array to the currently-bound buffer (trapezoidIndexBuffer) by using the bufferData function. Finally, you call the drawElements function.
  9. Let's see what each mode does:

    Mode

    Example

    Description

    TRIANGLES

    Time for action — rendering modes

    When you use the TRIANGLES mode, WebGL will use the first three indices defined in your IBO for constructing the first triangle, the next three for constructing the second triangle, and so on. In this example, we are drawing two triangles, which can be verified by examining the following indices JavaScript array that populates the IBO:

    indices = [0,1,2,2,3,4];

    LINES

    Time for action — rendering modes

    The LINES mode will instruct WebGL to take each consecutive pair of indices defined in the IBO and draw lines taking the coordinates of the corresponding vertices.

    For instance indices = [1,3,0,4,1,2,2,3]; will draw four lines: from vertex number 1 to vertex number 3, from vertex number 0 to vertex number 4, from vertex number 1 to vertex number 2, and from vertex number 2 to vertex number 3.

    POINTS

    Time for action — rendering modes

    When we use the POINTS mode, WebGL will not generate surfaces. Instead, it will render the vertices that we had defined using the index array.

    In this example, we will only render vertices number 1, number 2, and number 3 with indices = [1,2,3];

    LINE_LOOP

    Time for action — rendering modes

    LINE_LOOP draws a closed loop connecting the vertices defined in the IBO to the next one. In our case, it will be indices = [2,3,4,1,0];

    LINE_STRIP

    Time for action — rendering modes

    It is similar to LINE_LOOP. The difference here is that WebGL does not connect the last vertex to the first one (not a closed loop).

    The indices JavaScript array will be indices = [2,3,4,1,0];

    TRIANGLE_STRIP

    Time for action — rendering modes

    TRIANGLE_STRIP draws connected triangles. Every vertex specified after the first three (in our example, vertices number 0, number 1, and number 2) creates a new triangle.

    If we have indices = [0,1,2,3,4];, then we will generate the triangles:

    (0,1,2) , (1,2,3), and (2,3,4).

    TRIANGLE_FAN

    Time for action — rendering modes

    TRIANGLE_FAN creates triangles in a similar way to TRIANGLE_STRIP. However, the first vertex defined in the IBO is taken as the origin of the fan (the only shared vertex among consecutive triangles).

    In our example, indices = [0,1,2,3,4];

    will create the triangles: (0,1,2) and (0,3,4).

    • Now let's make some changes:
  10. Edit the web page (ch_RenderingModes.html) so that when you select the option TRIANGLES, you render the trapezoid instead of two triangles.

    Tip

    You need one extra triangle in the indices array.

  11. Save the file and test it in the HTML5 browser of your preference.
  12. Edit the web page so that you draw the letter 'M' using the option LINES.

    Tip

    You need to define four lines in the indices array.

  13. Just like before, save your changes and test them in your HTML5 browser.
  14. Using the LINE_LOOP mode, draw only the boundary of the trapezoid.

What just happened?

We have seen in action through a simple exercise the different rendering modes supported by WebGL. The different rendering modes determine how to interpret vertex and index data to render an object.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.227.69