Game Development Reference
In-Depth Information
Framebuffers
A graphics accelerator is the hardware dedicated to drawing graphics; it has a
region of memory to maintain the contents of the display screen. Every visible pixel
is represented by several bytes of memory called
display memory
. This memory is
refreshed a certain number of times per second for a flicker-free display. Graphic
accelerators also provide offscreen memory, which is only used to store data. The
allocation of display memory and offscreen memory is managed by the
window
system
. Also, the part of the memory that can be accessed by WebGL/OpenGL is
decided by the window system. There is a small set of function calls that ties WebGL
to the particular system. This set of calls supports allocating and deallocating regions
of graphics memory, as well as the allocating and deallocating of data structures
called graphics contexts, which maintain the WebGL state.
The region of graphics memory that is modified as a result of WebGL rendering
is called
framebuffer
. The default framebuffer is provided by the window system
and it is the drawing surface that will be displayed on the screen. The calls to create
the WebGL drawing surfaces let you specify the width and height of the surface
in pixels, whether the surface uses color, depth, and stencil buffers, and the bit
depths of these buffers. If the application is only drawing to an onscreen surface, the
framebuffer provided by the window system is usually sufficient. However, when
we need to render to a texture, we need to create offscreen framebuffers.
The following is the function used to clear/enable color, depth, and stencil buffers:
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
A walkthrough of the WebGL API
This section will explain the basic functions of the WebGL API. We will first
understand buffer objects. A WebGL application has two sections: JavaScript control
code and shader functions. We will explain the WebGL API functions used in the
control code as well as cover the code of a simple shader.
Initializing the WebGL context
To render WebGL 3D content, we need an HTML canvas element. The following
HTML code establishes a canvas object that will be used to render 3D content:
<canvas id="squareWithDrawArrays" style="border: none;"
width="500" height="500"></canvas>
