# Vertex buffer

151

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