In the previous posts, we set up a WebGL2 context and rendered a single point on the canvas by hardcoding its position in the vertex shader. Now, we’ll draw a triangle and learn how to pass vertex data from JavaScript to the shaders. This process introduces key WebGL concepts like buffers and attributes, which are essential for rendering more complex scenes.

In our previous example, the vertex position was fixed in the vertex shader with gl_Position = vec4(0.0, 0.0, 0.0, 1.0). While this worked for a single point, it’s impractical for shapes requiring multiple vertices, like a triangle. Instead, we’ll define vertex positions in JavaScript and pass them to the vertex shader using attributes (attributes are per-vertex data inputs for the vertex shader, such as position, color, or texture coordinates).

A triangle requires three vertices. In WebGL2, coordinates are in clip space, ranging from -1 to 1 in both x and y directions.

Figure 1: Clip Space (Source: MDN)

const vertices = [
  0.0,  0.5,   // Vertex 1: Top
 -0.5, -0.5,   // Vertex 2: Bottom-left
  0.5, -0.5    // Vertex 3: Bottom-right
];

This array represents the triangle’s geometry, which we’ll send to the GPU.

To get the vertex data to the GPU, we use a buffer, a chunk of memory managed by WebGL. Here’s how we create, bind, and fill it:

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

• gl.createBuffer(): Allocates a new buffer object.
• gl.bindBuffer(gl.ARRAY_BUFFER, buffer): Binds the buffer to the ARRAY_BUFFER target, making it the active buffer for vertex data operations.
• gl.bufferData(): Uploads the vertex data to the GPU. gl.STATIC_DRAW hints that the data won’t change often, optimizing performance.

Previously, our vertex shader hardcoded the position. Now, it needs to accept vertex positions from the buffer via an attribute. In GLSL ES 3.00 (used by WebGL2), attributes are declared with the in keyword. Here’s the updated vertex shader:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

• #version 300 es: Specifies GLSL ES 3.00 for WebGL2.
• in vec2 a_position: Declares an attribute named a_position that holds a 2D vector (x, y) for each vertex.
• gl_Position: Sets the vertex position in clip space, adding z=0.0 and w=1.0 to make it a 4D vector (required by WebGL).

Since we’re drawing a triangle (not a point), we no longer need gl_PointSize.

To connect the buffer to the a_position attribute, we need to configure WebGL to read the data correctly:

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

• gl.getAttribLocation(program, "a_position"): Retrieves the attribute’s location.
• gl.enableVertexAttribArray(positionAttributeLocation): Activates the attribute for use.
• gl.vertexAttribPointer(): Defines how WebGL pulls data from the buffer:
  • 2: Each vertex has 2 components (x and y, matching vec2).
  • gl.FLOAT: Data type is 32-bit float.
  • false: No normalization.
  • 0, 0: No stride or offset (data is tightly packed starting at the buffer’s beginning).

This links the buffer’s data to a_position, so each vertex shader execution processes one vertex from vertices.

Finally, we can draw the triangle using the vertex data:

gl.drawArrays(gl.TRIANGLES, 0, 3);

gl.drawArrays(gl.TRIANGLES, 0, 3) draws a triangle using the first 3 vertices in the buffer. gl.TRIANGLES tells WebGL to connect every three vertices into a triangle.

Here’s the complete code to draw a triangle using WebGL2:

const canvas = document.getElementById("example-canvas");
const gl = canvas.getContext("webgl2");

// Define vertex data
const vertices = [
  0.0,  0.5,   // Top
 -0.5, -0.5,   // Bottom-left
  0.5, -0.5    // Bottom-right
];

// Create and bind buffer
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

const vertexShaderSource = `#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Red color
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Set up the attribute
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);