In the last post, we created a simple WebGL program to draw a red point on a canvas, walking through the rendering pipeline and setting up basic shaders. That example used WebGL (version 1.0), which is widely supported but somewhat limited compared to its successor, WebGL2 (based on OpenGL ES 3.0). Since this series will focus on WebGL2, this post will explore the differences between WebGL and WebGL2 and adapt our previous code to run in a WebGL2 context.

WebGL is based on OpenGL ES 2.0, while WebGL2 builds on OpenGL ES 3.0. This upgrade brings new features like 3D textures, multiple render targets, and enhanced shader capabilities, along with some syntax changes. For our simple example of drawing a single point with hardcoded coordinates, most of these advanced features won’t come into play yet, but we still need to adjust how we access the rendering context and write our shaders.

In the previous post, we obtained the WebGL context with:

const gl = canvas.getContext("webgl");

For WebGL2, we simply change the argument to webgl2:

const gl = canvas.getContext("webgl2");

This gives us a WebGL2RenderingContext object instead of a WebGLRenderingContext. The new context supports all WebGL functionality plus WebGL2’s additional features.

WebGL uses GLSL ES 1.00, while WebGL2 uses GLSL ES 3.00. This requires us to update our shader code with the correct version directive and adjust the fragment shader’s output syntax. Here’s how our original shaders evolve.

void main() {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);   // Point at the center
  gl_PointSize = 100.0;                     // 100x100 pixel point
}

#version 300 es
void main() {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);   // Point at the center
  gl_PointSize = 100.0;                     // 100x100 pixel point
}

The only change here is adding #version 300 es at the top to specify GLSL ES 3.00. Since our vertex shader hardcodes the point’s position and size without using attributes, no further adjustments are needed for this example. Also precision qualifiers are not required, defaulting to highp for floats.

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Red color
}

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

The original uses gl_FragColor, which is deprecated in GLSL 3.00. Instead, webgl2 requires declaring an output variable, such as out vec4 fragColor. Additionally, precision for floats must be specified, in this case precision mediump float;

The rest of the code remains the same. Here’s the complete WebGL2 version of our simple point-drawing program:

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

// Vertex shader: defines the point's position and size
const vertexShaderSource = `
#version 300 es
void main() {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);   // Point at the center
  gl_PointSize = 100.0;                     // 100x100 pixel point
}
`;

// Fragment shader: sets the point color to red
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
}
`;

// Create and compile the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Create and compile the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Create a program, attach shaders, and link them
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Clear the canvas and draw the point
gl.clearColor(1.0, 1.0, 1.0, 1.0); // White background
gl.clear(gl.COLOR_BUFFER_BIT); // Clear the canvas
gl.drawArrays(gl.POINTS, 0, 1); // Draw one point