Game Development Reference
In-Depth Information
Associating a texture and a renderbuffer
to framebuffers
We first create our framebuffer. We associate our texture using the
framebufferTexture2D
API call and then associate our renderbuffer with the
framebufferRenderbuffer
API call:
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);
Then, we unbound the framebuffer and the renderbuffer as follows:
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
Rendering to framebuffers
If we want to render to the framebuffer, we simply make it the bound buffer object.
Remember the user display also happens in the display framebuffer, which is the
active bound buffer or default buffer. If we make any other buffer the active bound
buffer, it becomes the rendering target and when we want to render to the screen,
we simply unbind it and the default buffer becomes the active bound buffer. The
bindFramebuffer
function is as follows:
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
drawScene();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
Applying filters using framebuffers
Framebuffers are a very powerful extension to the WebGL API. A whole separate
topic can be written to explore its power, but we would like to conine ourselves to
exploring it in a use case that is mostly used in game engines: post processing filters.
So, let's understand what they are. Let's say that you want to render your game scene
and give a user the perception that your game is being viewed using night vision
goggles. Now, the night vision goggles give a perception of the green color all over
the rendered scene. Let's say you want to give the perception of day and night in
your game without creating static texture assets. There are many filter effects such as
blur, glow, snow, and edge detection that we can apply.
