Getting Started with WebGL: Drawing a Point Using Shaders

WebGL is a 3D drawing standard that combines JavaScript with OpenGL ES 2.0, allowing hardware‑accelerated rendering in an HTML5 canvas.

The article explains how to create a WebGL context, write vertex and fragment shaders in GLSL, compile and link them, and draw a simple point.

Code examples show creating the canvas element, obtaining the WebGL context (with fallback to experimental‑webgl), defining shader source strings, and the sequence of WebGL API calls to compile shaders, attach them to a program, link the program, and render.

var canvas = document.getElementById("glcanvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

Vertex shader source definition:

var VSHADER_SOURCE = `
void main() {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  gl_PointSize = 10.0;
}
`;

Fragment shader source definition (square point):

var FSHADER_SOURCE = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

Program creation and shader attachment:

var program = gl.createProgram();
var vShader = gl.createShader(gl.VERTEX_SHADER);
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vShader, VSHADER_SOURCE);
gl.shaderSource(fShader, FSHADER_SOURCE);
gl.compileShader(vShader);
gl.compileShader(fShader);
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);

Drawing a single point:

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

The article discusses the difference between canvas pixel coordinates and WebGL’s normalized device coordinates, emphasizing that the canvas size should be set via HTML attributes (width/height) rather than CSS to avoid stretching.

// Incorrect (CSS)
// Correct (attributes)

To render a circular point, the fragment shader discards fragments whose distance from the point center exceeds 0.5:

var FSHADER_SOURCE = `
#ifdef GL_ES
precision mediump float;
#endif
void main() {
  float d = distance(gl_PointCoord, vec2(0.5, 0.5));
  if (d < 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else { discard; }
}
`;

Finally, the article hints that the next topic will cover WebGL buffers for efficiently drawing large numbers of points.