6 7 8 9 10 11 12

Vertex buffer

16

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
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
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