Creating the Geometry

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);
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.59.231.155