Jump to content
  • Advertisement
Sign in to follow this  

Rendering same vertex-array in different modes

This topic is 742 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi folks here is my vertex array I am using:

    vertices = [
         -1.0, 1.0, 0.0,
        0.0, 1.0, 0.0,
        -0.5, 1.0, 0.0,
         0.5, 1.0, 0.0,
        1.0, 1.0, 0.0,
        1.0, 0.5, 0.0,
        0.0, 0.5, 0.0,
        0.5, 0.5, 0.0,
        -0.5, 0.5, 0.0,
        -1.0, 0.5, 0.0,

        -1.0, 0.0, 0.0,
        -0.5, 0.0, 0.0,
        0.0, 0.0, 0.0,
        0.5, 0.0, 0.0,
        1.0, 0.0, 0.0,

        -1.0, -0.5, 0.0,
        0.0, -0.5, 0.0,
        -0.5, -0.5, 0.0,
         0.5, -0.5, 0.0,
        1.0, -0.5, 0.0,
        1.0, -1.0, 0.0,
        0.0, -1.0, 0.0,
        0.5, -1.0, 0.0,
        -0.5, -1.0, 0.0,
        -1.0, -1.0, 0.0,

In a html-select I want to select a rendering mode and use it inmy drawScene-method:

    var renderModeSelector = document.getElementById("renderModeDropDown");
    var selectedRenderModeValue = renderModeSelector.options[renderModeSelector.selectedIndex].value;

    switch (selectedRenderModeValue) {
        case "0":
            gl.drawArrays(gl.POINTS, 0, squareVertexPositionBuffer.numItems);
        case "1":
            gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
        case "2":
            gl.drawArrays(gl.LINE_LOOP, 0, squareVertexPositionBuffer.numItems);
            console.log("No rendering mode selected.");


  1. Case '0' is supposed to draw the points which works fine



  1. Case '1' should draw a filled rectangle, with the shader below. Unfortunately it is messed up, see also in the picture below.

Fragment shader:

    precision mediump float;

    varying vec4 vColor;

    void main(void) {
    gl_FragColor = vColor;


    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;

    void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
    gl_PointSize = 5.0;



3. And finally in case '2' it is supposed to draw only the outlines, which also does not work as expected, see below.




So I wonder if it is possible to meet my requirements while using one vertexPositionBuffer. Also if it is not what would be another appropriate solution? Should I create another vertexPositionBuffer or can I just change mine "on the fly", before rendering?

Share this post

Link to post
Share on other sites

The vertex order requirements will be different for different modes.  Typically you can't really expect a triangle fan and a line loop, for example, to be representable by the same vertices in the same order.


For a triangle fan, for example, the first vertex you specify is common to all triangles in the fan.  Every subsequent pair of vertices defines a triangle, with an overlap of 1 vertex between triangles, such that the vertex order is 0|1|2, 0|2|3, 0|3|4, 0|4|5, etc.  The number of triangles in the fan is equal to the number of vertices - 2.  A line loop is completely different.


One way to deal with this type of drawing is to switch the polygon mode (using glPolygonMode) between GL_LINE and GL_FILL.  This of course assumes that your actual objective is to provide a "wireframe mode" view of your regular geometry, and will allow you to use GL_TRIANGLE_FAN for both the fill and line options, so you only need be concerned about getting the correct vertex order for that mode.  I don't think this is available on ES (or WebGL, which it looks like you're using), however.


Another way is to define every vertex you're going to need in your vertex buffer, then add index buffers specifying the actual vertices (and their order) for each different mode.  Select the appropriate index buffer and draw using glDrawElements.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!