Ray Casting and Filters - WebGL Game Development - page 342

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
gl.RGBA, gl.UNSIGNED_BYTE, null);
renderbuffer = gl.createRenderbuffer();
//...
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16,
width, height);
framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D, frametexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,
gl.RENDERBUFFER, renderbuffer);
...
}

The start() function initializes the shaders and invokes the
bindPostProcessShaderAttributes() function:

function start() {
...
initShaders("shader-vs","shader-fs");
bindPostProcessShaderAttributes();
...
}

The last part is the rendering logic. We changed our animate function to invoke the
draw() function instead of the drawScene() function:

function animate(){
...
draw();
...
}

The draw() function now does two things:

• Makes our framebuffer the active bound buffer so that the scene can render

offscreen and then invokes drawScene() to render the scene.

• Unbinds the framebuffer to use the default display framebuffer and then

invokes drawScenePostProcess() . Now the texture is drawn on the screen.

The draw() function is defined as follows:

function draw(){
// resizeSize();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
drawScene();