Game Development Reference
In-Depth Information
Implementing the filter
Let's put all the pieces together. Open
09-Filters-FrameBuffer-Scan-Lines.html
in your editor.
We first declare all our variables as follows:
var shaderProgram;
var postProcessShaderProgram;
...
var frametexture = null;
var framebuffer = null;
var renderbuffer = null;
var square=null;
The first two variables are used to hold shader program objects while the next three
variables are used to hold the texture, framebuffer, and renderbuffer objects.
The
bindPostProcessShaderAttributes()
function is as follows:
function bindPostProcessShaderAttributes(){
postProcessShaderProgram = gl.createProgram();
initShaderCommon("scanlines-vertex-shader","scanlines-fragment-
shader",postProcessShaderProgram);
square=new Square();
square.createBuffers(gl);
createFrameBuffer();
}
The preceding function initializes the shader program and initializes the
SquareGeometry
class. We also invoke our
createFrameBuffer()
function. The
createFrameBuffer()
function does exactly as expressed in section
Offscreen
rendering using framebuffers
. The only important section of the code has been listed
here. The
gl.texImage2D
function is invoked with the
null
parameter because
memory is being allocated. We create a renderbuffer and also create memory to
hold texture depth using the API call
renderbufferStorage
. We then associate
the renderbuffer and texture to our framebuffer object.
The important thing to note is that the
frametexture
and
renderbuffer
variables
take the size (
height
,
width
) of the viewport:
functioncreateFrameBuffer(){
var width=gl.viewportWidth;
var height=gl.viewportHeight;
frametexture = gl.createTexture();
//...
