# Vertex buffer

52

At last we have a GPU program to render some geometry. Now we need a geometry. In this lesson we will create a equilateral triangle and put it into GPU buffer.

First, let's create an array and fill it with triangle coordinates:

```
const h = Math.sqrt(0.75);
const vertices =
[
// Vertex A
// x y
-0.5, -h / 3,
// Vertex B
// x y
0.0, 2 * h / 3,
// Vertex C
// x y
0.5, -h / 3
];
```

I hope you remember your school's geometry lessons and know how to build an equilateral triangle ;-)

OK, we have an array of float-point numbers. Now, let's create a GPU buffer and transfer these values into that buffer:

```
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
```

As you can see, everything is quite a verbose, however still pretty simple. Now `buffer`

holds our float-point numbers representing coordinates of a single triangle. And we're ready to take the last step and finally draw that triangle!

Rate this post:

Lesson 8

Lesson 10

Share this page:

### Learning plan

Let's create a simple vertex shader, compile it, and check for compilation issues

Now let's create a fragment shader, compile it and check for errors

8. GLSL program

It's time to link our shaders into a completed GLSL program

9. Vertex buffer

Now we need to create a GPU buffer and transfer a geometry data into it

10. First triangle

Everything is ready to draw our first triangle

11. Uniforms

How to use draw call level parameters to control the shading process

Let's add more attributes to vertices and use them to enhance our triangle