How to Render a fullscreen quad using WebGL

Rendering a full-screen quad with WebGL is a common requirement, especially when implementing full-screen post-processing effects such as full-screen shading, image processing, and other visual effects. The following are the steps to render a full-screen quad with WebGL:

1. Create the Canvas and WebGL Context

First, create a canvas element in HTML and obtain the WebGL context for it in JavaScript.

html
<canvas id="glcanvas" width="640" height="480"></canvas>

javascript
var canvas = document.getElementById('glcanvas');
var gl = canvas.getContext('webgl');
if (!gl) {
  console.error('Unable to initialize WebGL. Your browser may not support it.');
  return;
}

2. Define Vertex Data

A full-screen quad can be represented by two triangles. Defining vertex data to cover the entire screen is straightforward. Using normalized device coordinates (NDC, ranging from -1 to 1) for vertex description facilitates covering the entire screen.

javascript
var vertices = new Float32Array([
  -1.0, -1.0,  // First triangle's vertices
   1.0, -1.0,
  -1.0,  1.0,

  -1.0,  1.0,  // Second triangle's vertices
   1.0, -1.0,
   1.0,  1.0
]);

3. Create Vertex Buffer

Next, transfer the vertex data to the GPU's vertex buffer.

javascript
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

4. Write Shader Programs

Define the vertex shader and fragment shader. The vertex shader passes the vertex coordinates directly to the fragment shader, and the fragment shader sets a color.

javascript
var vertexShaderSource = `\nattribute vec2 position;\nvoid main() {\n    gl_Position = vec4(position, 0.0, 1.0);\n}`;\nvar fragmentShaderSource = `\nprecision mediump float;\nvoid main() {\n    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red\n}`;

5. Compile Shaders and Create Shader Program

javascript
function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}

6. Connect Vertex Attributes

javascript
var positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

7. Render

Finally, render the full-screen quad using the created shader program and vertex data.

javascript
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 6);

By following these steps, you can render a full-screen quad in WebGL and extend it to implement various graphical effects.