<p>Your shaders are fine, the problem is topological, that is the way the vertices are connected to create triangles.</p>

<p>For cases 1 &amp; 2: You cannot really draw a grid of points in this mode (<code>GL_TRIANGLE_FAN</code>) as vertex 0 (the top left one) will be used in every triangle, as well as other issues. You should be using Triangle/Line strips, although these aren't so straightforward as some vertices are shared between each row.</p>

<p>For example, imagine you have vertices arranged like so:</p>

<blockquote>
  <p>0 1 2</p>
  
  <p>3 4 5</p>
  
  <p>6 7 8</p>
</blockquote>

<p>You would draw strips by sending the above vertices in the following order:</p>

<blockquote>
  <p>0,3,1 (outputs triangle 0,1,3)</p>
  
  <p>4,    (outputs triangle 1,3,4)</p>
  
  <p>2,    (outputs triangle 1,2,4)</p>
</blockquote>

<p>etc...</p>

<p>This you can do in code by scanning across 1 row of vertices and including the vertex on the next row for every other vertex.</p>

<p>e.g.</p>

<pre><code>int numColumns = 5;   // As per your example..
int numRows = 5;
int vertexOffset = 0;
int vertexSize = 3;          // 3 floats per vertex
int nextRow = numColumns * vertexSize;   

// This loop is for each row-strip, which requires 2 vertex rows..
for(int j = 0; j &lt; numRows - 1; j++) {

    // Inner loop sends vertices for each row-strip
    for(int n = 0; n &lt; numColumns; n++, vertexOffset += vertexSize) {
       glVertex3fv(vertices + vertexOffset);            // Current row
       glVertex3fv(vertices + vertexOffset + nextRow);  // Row below
    }
    // This is special, we send a duplicate vertex to restart a new strip for the next row (This can be omitted if j == numRows - 1)
    glVertex3fv(vertices + vertexOffset - vertexSize + nextRow);
}
</code></pre>

<p>If you are concerned about sending duplicate vertices you could use an additional index buffer, as that will allow you to use the exact same vertex buffer you used for the <code>GL_POINTS</code> version.</p>

CC BY-SA 3.0
2016-08-02T12:47:41.790Z
I've made some minor edits, and edited the code to match. Hopefully this leaves the answer as you intended it but feel free to revert anything that doesn't.
trichoplax is on Codidact now
CC BY-SA 3.0
2016-07-27T09:27:21.420Z
2016-08-02T12:40:50.633Z
2016-08-02T12:40:50.633Z
PaulHK
<p>here is my vertex array I am using:</p>

<pre><code>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,
];
</code></pre>

<p>In a html-select I want to select a rendering mode and use it inmy <code>drawScene</code>-method:</p>

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

switch (selectedRenderModeValue) {
    case "0":
        gl.drawArrays(gl.POINTS, 0, squareVertexPositionBuffer.numItems);
        break;
    case "1":
        gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
        break;
    case "2":
        gl.drawArrays(gl.LINE_LOOP, 0, squareVertexPositionBuffer.numItems);
        break;
    default:
        console.log("No rendering mode selected.");
}
</code></pre>

<ol>
<li><p>Case '0' is supposed to draw the points which works fine</p>

<p><a href="https://i.sstatic.net/ZiyIL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZiyIL.png" alt="enter image description here"></a></p></li>
<li><p>Case '1' should draw a filled rectangle, with the shader below. Unfortunately it is messed up, see also in the picture below.</p>

<p>Fragment shader:</p>

<pre><code>precision mediump float;

varying vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
</code></pre>

<p>Vertex-shader:</p>

<pre><code>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;
}
</code></pre>

<p><a href="https://i.sstatic.net/vahR1.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/vahR1.png" alt="enter image description here"></a></p></li>
<li><p>And finally in case '2' it is supposed to draw only the outlines, which also does not work as expected, see below.</p>

<p><a href="https://i.sstatic.net/23zah.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/23zah.png" alt="enter image description here"></a></p></li>
</ol>

<p>So I wonder if it is possible to meet my requirements while using one vertexPositionBuffer. Should I maybe create another vertexPositionBuffer or can I just change mine "on the fly", before rendering?</p>

CC BY-SA 3.0
2016-07-11T20:00:48.447Z
Your data is off. You do not account for winding rules.
joojaa
CC BY-SA 3.0
2016-07-12T07:19:59.593Z
@ritwiksinha Yeah the thing is I want it to be that many vertices.
チーズパン
CC BY-SA 3.0
2016-07-12T07:21:42.937Z
@joojaa What do you mean by "data is off"? I know some of the points are not in the right order I changed that, It does not fix the issue.
チーズパン
CC BY-SA 3.0
2016-07-13T06:06:32.553Z
For doing the solid part, you're better off using something like TRIANGLE_STRIP. You will need topology information in the form of an indice buffer which tells the GPU how to interpret your list of points as a strip. Vertices will need be reused for TRIANGLE_STRIP so the indice buffer is necessary.
PaulHK
<rendering><webgl>
Rendering same vertex-array in different modes
チーズパン
# Rendering same vertex-array in different modes

(Asked by: username_0 on 2016-07-11)

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);
        break;
    case "1":
        gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
        break;
    case "2":
        gl.drawArrays(gl.LINE_LOOP, 0, squareVertexPositionBuffer.numItems);
        break;
    default:
        console.log("No rendering mode selected.");
}

```

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

   [![enter image description here](https://i.sstatic.net/ZiyIL.png)](https://i.sstatic.net/ZiyIL.png)
2. 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;
   }

   ```

   Vertex-shader:

   ```
   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;
   }

   ```

   [![enter image description here](https://i.sstatic.net/vahR1.png)](https://i.sstatic.net/vahR1.png)
3. And finally in case '2' it is supposed to draw only the outlines, which also does not work as expected, see below.

   [![enter image description here](https://i.sstatic.net/23zah.png)](https://i.sstatic.net/23zah.png)

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

**Tags:** rendering, webgl

> **Comments:**
> **username_1**: Your data is off. You do not account for winding rules.  
> **username_0**: @ritwiksinha Yeah the thing is I want it to be that many vertices.  
> **username_0**: @username_1 What do you mean by "data is off"? I know some of the points are not in the right order I changed that, It does not fix the issue.  
> **username_2**: For doing the solid part, you're better off using something like TRIANGLE_STRIP. You will need topology information in the form of an indice buffer which tells the GPU how to interpret your list of points as a strip. Vertices will need be reused for TRIANGLE_STRIP so the indice buffer is necessary.  

---

## 1 answers

### Answer by username_2 on 2016-07-27. Score: 4 | Accepted answer

Your shaders are fine, the problem is topological, that is the way the vertices are connected to create triangles.

For cases 1 & 2: You cannot really draw a grid of points in this mode (`GL_TRIANGLE_FAN`) as vertex 0 (the top left one) will be used in every triangle, as well as other issues. You should be using Triangle/Line strips, although these aren't so straightforward as some vertices are shared between each row.

For example, imagine you have vertices arranged like so:

> 0 1 2
>
> 3 4 5
>
> 6 7 8

You would draw strips by sending the above vertices in the following order:

> 0,3,1 (outputs triangle 0,1,3)
>
> 4, (outputs triangle 1,3,4)
>
> 2, (outputs triangle 1,2,4)

etc...

This you can do in code by scanning across 1 row of vertices and including the vertex on the next row for every other vertex.

e.g.

```
int numColumns = 5;   // As per your example..
int numRows = 5;
int vertexOffset = 0;
int vertexSize = 3;          // 3 floats per vertex
int nextRow = numColumns * vertexSize;   

// This loop is for each row-strip, which requires 2 vertex rows..
for(int j = 0; j < numRows - 1; j++) {

    // Inner loop sends vertices for each row-strip
    for(int n = 0; n < numColumns; n++, vertexOffset += vertexSize) {
       glVertex3fv(vertices + vertexOffset);            // Current row
       glVertex3fv(vertices + vertexOffset + nextRow);  // Row below
    }
    // This is special, we send a duplicate vertex to restart a new strip for the next row (This can be omitted if j == numRows - 1)
    glVertex3fv(vertices + vertexOffset - vertexSize + nextRow);
}

```

If you are concerned about sending duplicate vertices you could use an additional index buffer, as that will allow you to use the exact same vertex buffer you used for the `GL_POINTS` version.

> **Comments:**
> **username_3**: I've made some minor edits, and edited the code to match. Hopefully this leaves the answer as you intended it but feel free to revert anything that doesn't.  

---

