Ray Casting and Filters - WebGL Game Development - page 333

Framebuffer objects have a number of benefits. They are easy to set up, save
memory, and are associated with a single WebGL context. We can use them for 2D
pixel images and textures. The functions used to set up textures and images are
different. The WebGL API for images uses renderbuffer objects. A renderbuffer
image is simply a 2D pixel image. To explain this better, a texture has only the
associated color value but a 2D pixel image has a color value and depth information.
We store the color data in a WebGL texture object but store the depth value in a
renderbuffer object.
Creating a texture object to store color
information
In the following code, first we create a texture object. The texture object is bound to
context for further processing. See Chapter 4 , Applying Textures , to understand the
parameters. Also, notice that the last parameter, null , is an API call gl.texImage2D .
In this parameter, we generally pass the image data, but as we are creating the
texture buffer for storing data, we pass null to just create memory. Also, the width
and height are that of the canvas:
frametexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, frametexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,
gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,
gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
gl.RGBA, gl.UNSIGNED_BYTE, null);
Creating a renderbuffer for depth information
We create a renderbuffer and bind it to apply further functions on it. Then, we
allocate the storage for the renderbuffer. It is of the same size as the texture, with
16-bit storage for the depth component. Other options are gl.DEPTH_COMPONENT8
and gl.DEPTH_COMPONENT24 . The createRenderbuffer() function is as follows:
renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER,renderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16,
width, height);