Although we could load the quad from a file, the geometry is simple enough that we can include it directly in the code. All that's needed are the vertex positions and texture coordinates:
// 1. Define the geometry for the full-screen quad
const vertices = [
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1
];
const textureCoords = [
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1
];
// 2. Create and bind VAO
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
// 3. Init the buffers
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
// Configure instructions for VAO
gl.STATIC_DRAW);gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
const textureBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
// Configure instructions for VAO
gl.enableVertexAttribArray(program.aVertexTextureCoords);
gl.vertexAttribPointer(program.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
// 4. Clean up
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);