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!