Frame Buffer I/O and Blending

The structure of graphics memory, buffer

I/O instructions, and blending operation
(in the aspect of OpenGL)

Frame buffer structure 1

 Outline
• Frame buffer structure
• Buffer I/O, a review
• Blending and the alpha channel

Frame buffer structure 2

 Frame Buffer
(by OpenGL viewpoint)
• The memory for rendering and displaying results.
• It consists of at least the following buffers:
– two color buffers, front and back
– one depth buffer,
– one stencil buffer,
– one accumulation buffer (optional)
– other buffers (off-screen drawing, …)
– buffers created by the application program, like vertex
buffer, P-buffer,…
[note]:
In conventional definition, frame buffer = color buffer.
We adopt the definition given by OpenGL ARB.

Frame buffer structure 3

 Bitplanes
• A buffer contains multiple layers of bitplanes.
• A bitplane is a 2D array of bits.
– 1 bit = {0, 1}, (for 1 pixel像素)
– buffer depth = number (layers) of bit planes.
– resolution of the bit-planes = resolution of the
window (for example 800x800)
5 bitplanes

Frame buffer structure 4

 Pixel Value
• A pixel is associate with a bit in each bitplane.
• The bits in all the bitplanes keep the pixel’s value
(color, depth, …)
• These bits occupy the same 2D position in these
bitplanes!!! (same bitplane indices, [i, j])

(i,j)

Pixel[i,j]
Frame buffer structure 5
 Color Buffer
• Two color buffers – front and back buffers.
• Keep {r, g, b, a} values of pixels.
– In some definition, a color buffer consists of only the
RGB channels
• All drawing commands change color buffer contents.
• The R,G,B, and A channels are separate buffers.
– They are sub-buffers of the color buffer.
• Resolutions of all the buffers are the same
– Equal to the resolution of the window

Frame buffer structure 6

 Color Buffer Depth
(number of bit-planes)
• Depth of color buffer
– 8 bits for R, G, B, and A components.
– number of color = 224 //ignore the A-value
– True color mode
• Display modes:
– single buffer mode //front buffer only
– double buffer mode //front + back buffers
(explaining them in the following slides)
Frame buffer structure 7
 Buffer (Display) Modes
• Double buffer mode
– Using 2 color buffers, the front and back buffers.
– All drawings are carried in the back buffer.
– The contents of front buffer are shown on the screen.
– We swap these 2 buffers to create animation.
– Or showing the results.
• Single buffer mode
– Use only one color buffer
– Displaying and drawing contents in the front buffer at
the same time.
– For CAD, text editors, panel drawing, …
Frame buffer structure 8
 Depth Buffer
• Keep the relative distance from the eye
position to each pixel.
– Normalized distances, for example -1.0 ~
1.0. (in OpenGL)
• One color buffer pixel  one depth
buffer pixel.
• Its depth influences the accuracy of
graphical drawing.
• 32 bit depth buffer is better than an 8-
bit one.

[note] depth information is crucial for

rendering and the reconstruction of 3D
scene.

Frame buffer structure 9

 Stencil Buffer
• A mask (switch) to disable and enable updating in
the color buffer and the depth buffer.
• Used in shadow generation or clipping.

1
drawing 0

Stencil buffer Color & depth buffers

Frame buffer structure 10

 Alpha Buffer
• Alpha channel, opacity buffer
– Denoted by A, (RGBA)
• Possessing the same size of the RGB color buffers
– 1 pixel  1 alpha value
• Keeping the opacities of the pixels
– Opacity = 濃度=不透明度
– Range: 0.0 (全透明) ~ 1.0 (完全不透明)
Used in: 影像合成，drawing transparent objects,...
Frame buffer structure 11
 Accumulation Buffer
• To blend several images into one image.
• Very useful for special effects.
– Augmented reality, mixed reality, …
– Volume rendering
• Not all graphics cards support this
functionality.
– Sometimes, we have to create acc buffers and
blend images by ourselves.

Frame buffer structure 12

Review the buffer I/O
instructions !
(in previous lecture)

Frame buffer structure 13

 Scope of Buffer for Reading
We can read the contents of a rectangle in a buffer.
(0,0)
X_size

window

Y-size
Rectangle to be read

Lower left corner of the rectangle

Frame buffer structure 14

 Buffer Reading
• Step 1: specifying the buffer to be read;
– The front or back buffer
• Step 2: specifying the “packing” alignment;
– 0 and 4 are common selection. Why?
• Step 3: read the buffer; pack
– Using “glReadPixels(…).” G M
M M
unpack

Frame buffer structure 15

 Buffer Reading Example
• Read RBGA channels from the front buffer.
unsigned char image[XSIZE][YSIZE][4]; //declare an array.
int pos_x, pos_y;

glReadBuffer(GL_FRONT); /* select the front buffer */

glPixelStorei(GL_PACK_ALIGNMENT, 1); /* set alignment=1 */

/*---Read the front buffer and store its contents in image[][][], (pos_x,pos_y) is the lower-
left corner. The size is SIZE by SIZE*/
glReadPixels(pos_x, 500-pos_y, //lower left corner.視窗高度=500
XSIZE, YSIZE, //shape of the rectangle, width & height
GL_RGBA, //read RGBA channels.
GL_UNSIGNED_BYTE, //convert the data into unsigned bytes.
image); //keep data in the array image[][][4].
Frame buffer structure 16
 Buffer Writing
• Write data into a rectangle in a buffer.
X_size

Y-size
Rectangle to be written
window

Lower left corner of the rectangle

Frame buffer structure 17

 Define Lower-Left Corner
• Specify as position (as the lower-left corner) in the current
buffer. (as the lower left corner of the rectangle)

glRasterPos2i(pos_x, 500-pos_y); //window height = 500

–

pos_y

Frame buffer structure 18

 The Procedure of Buffer-Writing
• Select the destination buffer.
glDrawBuffer(GL_FRONT); /*Select front buf as destination*/
• Define unpack alignment.
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
• Define lower left corner.
glRasterPos2i(pos_x, 500-pos_y);
• Write data into the destination.
glDrawPixels(SIZE, SIZE, //Data size
GL_RGBA, // channels
GL_UNSIGNED_BYTE, //Data type
image); //the source from the main memory.

Frame buffer structure 19

 Blending
• Beside drawing the frame buffer, we can
perform blending.
– Blending the incoming image fragments with the
background (stored in the color buffer).
• To produce transparent effects.
• To show the object and the background at the same time.
• Volume rendering.
• Accumulation.
• Shadowing, reflection, …

Frame buffer structure 20

 Blending & Rendering
• Draw transparent polygons or combining images.
• Blend them with the background image in the
frame buffer.

Transparent
polygon

Frame (color) buffer

Frame buffer structure 21
 Blending Function
• Defining the blending equation:
pix_value = src_factor * src_pix_value +
dst_factor * dst_pix_value.
– source pixels: pixels of the polygon  src.
– destination pixels: pixels in the color buffer  dst.
dst_factor src_factor
* *
+
Final Destination Source
Pixel pixels pixels
Values

Frame buffer structure 22

 Blending Computing
• Commonly used blending factors:
src_factor = alpha value (A-channel) of the source pixel,
dst_factor = 1 – src_factor.

• Where does the alpha value come from ?

– Given by the drawing procedures
– Defined in the vertices of the polygon
– From the texture map
–
[note] Discussing billboards and texture-maps in later lectures.

Frame buffer structure 23

 OpenGL Blending Procedure
• The enable & disable instructions
glEnable(GL_BLEND); //enable blending
glDisable(GL_BLEND); //disable blending
• Define the blending function
glBlendFunc(GL_SRC_ALPHA, //source factor
GL_ONE_MINUS_SRC_ALPHA); //dst factor.
• Draw the scene as usual
– with texture mapping or transparent polygons.
See the demo program.

Frame buffer structure 24

 Usage of Frame Buffer I/O
• Image storage/Image display
• Texture map creation/modification
• Background drawing
• Image blending/accumulation
• Shadow creation
• Environmental mapping / reflection
• …
Frame buffer structure 25
 Conclusion
• What is the frame buffer for?
– Keeping information of the image shown in the window
– Being a drawing canvas.
• Frame buffer structure
– Multiple layers of bit-planes
– Multiple channels
• R, G, B, A channels
– Depth buffer
– Stencil buffer
• Using OpenGL instructions to perform framebuffer I/O
– glReadPixel(…)
– glDrawBuffer(…)

Frame buffer structure 26

 Conclusion
• Blending allows us to combine images and
draw transparent polygons.
• We use blending function to compute the
final pixel values.
• Commonly used blending factors are
– GL_SRC_ALPHA
– GL_ONE_MINUS_SRC_ALPHA)

Frame buffer structure 27