Ray Casting and Filters - WebGL Game Development - page 343

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
//Postprocessing
drawScenePostProcess();
}
The drawScene() function is modified to use the shaderProgram parameter to
render the scene:
functiondrawScene() {
gl.useProgram(shaderProgram);
...
}
The drawScenePostProcess() function scene basically prepares attributes and
uniforms to render the texture on the square. It also switches to the new shader using
gl.useProgram :
function drawScenePostProcess() {
gl.useProgram(postProcessShaderProgram);
gl.enableVertexAttribArray(postProcessShaderProgram.
vertexPositionAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, square.vbo);
gl.vertexAttribPointer(postProcessShaderProgram.
vertexPositionAttribute, square.vbo.itemSize, gl.FLOAT, false,
0, 0);
gl.enableVertexAttribArray(postProcessShaderProgram.
textureCoordAttribute);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, frametexture);
gl.uniform1i(gl.getUniformLocation(postProcessShaderProgram,
"uSampler"), 0);
gl.bindBuffer(gl.ARRAY_BUFFER, square.verticesTextureBuffer);
gl.vertexAttribPointer(postProcessShaderProgram.
textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, square.ibo);
gl.drawElements(gl.TRIANGLES, square.geometry.indices.length,
gl.UNSIGNED_SHORT,0);
}
The preceding function informs WebGL to use the new shader program. It then
activates the vertex buffer object and index buffer object of the square object and
associates the indices and vertices to the buffers to be processed by the shader. It also
uploads the frameTexture object to the zeroth texture location. The zeroth location
is associated with the uSampler uniform to be processed in the shader. Note that
the frameTexture object is associated with the framebuffer object which in turn is
populated in the drawScene() call.