<p>If you have a vertex buffer like this:</p>

<pre><code>var vertices = [
  0.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.5, 1.0, 0.0
]
</code></pre>

<p>And simply draw it as it is:</p>

<pre><code>// Create an empty buffer object
var vertex_buffer = gl.createBuffer();

// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);
</code></pre>

<p>It would require two dedicated coordinates for each line segment. With the <code>vertices</code> as defined above, it would only be possible two draw <strong>two lines</strong>:</p>

<p><a href="https://i.sstatic.net/HTDG6.png" rel="noreferrer"><img src="https://i.sstatic.net/HTDG6.png" alt="two lines"></a></p>

<p>If you have the following indices defined:</p>

<pre><code>var indices = [
  0, 2,
  2, 4,
  4, 3,
  3, 2,
  2, 1,
  1, 0,
  0, 3,
  3, 1
]
</code></pre>

<p>It is possible to draw lines which intersect the same vertices again and again. This reduces redundancy. If you bind the index buffer and tell the GPU to draw line segments connecting the vertices by the order specified in the indecies array:</p>

<pre><code>var index_buffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);
</code></pre>

<p>One can draw complexer figures without redefining the same vertices over and over again. This is the result:</p>

<p><a href="https://i.sstatic.net/oBLfK.png" rel="noreferrer"><img src="https://i.sstatic.net/oBLfK.png" alt="a house"></a></p>

<p>To achieve the same result without indices, the vertex buffer should look like the following:</p>

<pre><code>var vertices = [
  0.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.5, 1.0, 0.0,
  0.5, 1.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.0, 0.0
]

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);
</code></pre>

<p>Which results in the same image:</p>

<p><a href="https://i.sstatic.net/QOezA.png" rel="noreferrer"><img src="https://i.sstatic.net/QOezA.png" alt="yet another house"></a></p>

<p>Note the huge redundancy in stored vertices. </p>

CC BY-SA 3.0
2016-04-13T12:50:45.033Z
If you plan to immediately answer your own question please at least mention it in the question so others don't waste their time.
Rotem
CC BY-SA 3.0
2016-04-13T12:53:50.467Z
Every good question should have 2 or 3 good answers. You did not waste your time and I really appreciated your effords. I need this thread to explain the logic to a project partner and your post will help him alot.
q9f
CC BY-SA 3.0
2016-04-16T09:48:50.590Z
@5chdn [Self answering is highly encouraged](http://blog.stackoverflow.com/2012/05/encyclopedia-stack-exchange/). Thanks for adding this answer. If you have an answer in mind at the time you post a question, there is a tick box below the question which will allow you to write your answer before posting the question, so both will appear at the same time. This is just to let you know in case it is useful - you certainly don't need to do this and self answers are still very welcome at any interval of time after posting the question.
trichoplax is on Codidact now
CC BY-SA 3.0
2016-04-13T12:48:19.650Z
2016-04-13T12:48:19.650Z
q9f
<blockquote>
  <p>Could someone ELI5 to me, what is an index buffer and how is it
  related to vertex buffers</p>
</blockquote>

<p>Your vertex buffer contains the X and Y coordinates of 5 vertices. They are:</p>

<pre><code>index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0
</code></pre>

<p>Your index buffer contains information about which lines to draw between these vertices. It uses the index of each vertex in the vertex buffer as a value.</p>

<p>Since you are drawing lines, each pair of consecutive values in your index buffer indicate a line segment. For example, if the index buffer starts with <code>0, 2</code>, it means draw a line between the 0th and 2nd vertices in the vertex array, which in this case would draw a line going from <code>[0.0, 0.0]</code> to <code>[0.0, 0.6]</code>.</p>

<p>In the following graphic each pair of indices is color coordinated with the line it indicates:</p>

<p><a href="https://i.sstatic.net/0H9FS.png"><img src="https://i.sstatic.net/0H9FS.png" alt="enter image description here"></a></p>

<p>Similarly, if you were drawing triangles instead of lines, you would need to supply an index buffer where each 3 consecutive values indicate the indices of three vertices in the vertex buffer, e.g. </p>

<pre><code>0, 1, 2,
2, 1, 3,
2, 3, 4,
</code></pre>

CC BY-SA 3.0
2016-04-13T12:42:50.983Z
2016-04-14T17:27:49.293Z
2016-04-14T17:27:49.293Z
Rotem
<p>I have a vertex buffer like this:</p>
<pre><code>0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0
</code></pre>
<p>I have the following index buffer:</p>
<pre><code>0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1
</code></pre>
<p>I know I want to draw <code>gl.LINES</code> using WebGL, which means multiple separated line segments.</p>
<pre><code>gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);
</code></pre>
<p>It seems to enable drawing of multiple line segments in a single draw call in WebGL.</p>
<p>Could someone ELI5 to me, what is an index buffer and how is it related to vertex buffers? How to generate index buffers from my primitives?</p>

<webgl><line-drawing><mapping><vertex-buffer-object>
What is an index buffer and how is it related to vertex buffers?
q9f
# What is an index buffer and how is it related to vertex buffers?

(Asked by: username_0 on 2016-04-13)

I have a vertex buffer like this:

```
0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0

```

I have the following index buffer:

```
0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1

```

I know I want to draw `gl.LINES` using WebGL, which means multiple separated line segments.

```
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);

```

It seems to enable drawing of multiple line segments in a single draw call in WebGL.

Could someone ELI5 to me, what is an index buffer and how is it related to vertex buffers? How to generate index buffers from my primitives?

**Tags:** webgl, line-drawing, mapping, vertex-buffer-object


---

## 2 answers

### Answer by username_1 on 2016-04-13. Score: 16 | Accepted answer

> Could someone ELI5 to me, what is an index buffer and how is it
> related to vertex buffers

Your vertex buffer contains the X and Y coordinates of 5 vertices. They are:

```
index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0

```

Your index buffer contains information about which lines to draw between these vertices. It uses the index of each vertex in the vertex buffer as a value.

Since you are drawing lines, each pair of consecutive values in your index buffer indicate a line segment. For example, if the index buffer starts with `0, 2`, it means draw a line between the 0th and 2nd vertices in the vertex array, which in this case would draw a line going from `[0.0, 0.0]` to `[0.0, 0.6]`.

In the following graphic each pair of indices is color coordinated with the line it indicates:

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

Similarly, if you were drawing triangles instead of lines, you would need to supply an index buffer where each 3 consecutive values indicate the indices of three vertices in the vertex buffer, e.g.

```
0, 1, 2,
2, 1, 3,
2, 3, 4,

```


---

### Answer by username_0 on 2016-04-13. Score: 6

If you have a vertex buffer like this:

```
var vertices = [
  0.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.5, 1.0, 0.0
]

```

And simply draw it as it is:

```
// Create an empty buffer object
var vertex_buffer = gl.createBuffer();

// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);

```

It would require two dedicated coordinates for each line segment. With the `vertices` as defined above, it would only be possible two draw **two lines**:

[![two lines](https://i.sstatic.net/HTDG6.png)](https://i.sstatic.net/HTDG6.png)

If you have the following indices defined:

```
var indices = [
  0, 2,
  2, 4,
  4, 3,
  3, 2,
  2, 1,
  1, 0,
  0, 3,
  3, 1
]

```

It is possible to draw lines which intersect the same vertices again and again. This reduces redundancy. If you bind the index buffer and tell the GPU to draw line segments connecting the vertices by the order specified in the indecies array:

```
var index_buffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);

```

One can draw complexer figures without redefining the same vertices over and over again. This is the result:

[![a house](https://i.sstatic.net/oBLfK.png)](https://i.sstatic.net/oBLfK.png)

To achieve the same result without indices, the vertex buffer should look like the following:

```
var vertices = [
  0.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.5, 1.0, 0.0,
  0.5, 1.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.0, 0.0
]

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);

```

Which results in the same image:

[![yet another house](https://i.sstatic.net/QOezA.png)](https://i.sstatic.net/QOezA.png)

Note the huge redundancy in stored vertices.

> **Comments:**
> **username_1**: If you plan to immediately answer your own question please at least mention it in the question so others don't waste their time.  
> **username_0**: Every good question should have 2 or 3 good answers. You did not waste your time and I really appreciated your effords. I need this thread to explain the logic to a project partner and your post will help him alot.  
> **username_2**: @5chdn [Self answering is highly encouraged](http://blog.stackoverflow.com/2012/05/encyclopedia-stack-exchange/). Thanks for adding this answer. If you have an answer in mind at the time you post a question, there is a tick box below the question which will allow you to write your answer before posting the question, so both will appear at the same time. This is just to let you know in case it is useful - you certainly don't need to do this and self answers are still very welcome at any interval of time after posting the question.  

---

