1 Buffers and Processing Fragments 2011 Autumn Animação e Visualização Tridimensional 2011/2012

1

Buffers and Processing Fragments

2011 Autumn

Animação e Visualização Tridimensional

2011/2012

2

BuffersBuffers

Color Buffers: (front|back)-(left|right),

Depth Buffer; Stencil Buffer; Accumulation Buffer.

3

OpenGL ArchitectureImmediate Mode

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

Operations

TextureMemory

CPU

PixelOperations

FrameBuffer

geometry pipeline

Fragments Operations

Fragment tests Blend operations

4

5

Fragments tests

Scissor test Culls fragments in a 2D box on screen

Alpha test Compares fragment alpha with a constant Culls fragments conditionally

Stencil test Compares value of stencil buffer with reference constant Culls fragments conditionally Can apply different operation to stencil value based mode Stencil-fail/S-pass & Z-fail / S-pass & Z-pass

Operations: Set, increment, decrements, … Depth test (visibility/occlusion test)

Compares Z value with value from Z-buffer Culls fragments conditionally, otherwise updates Z-buffer

6

Blend OperationsMerge fragments with frame buffer content

Order of operations: Blending operations (aka. compositing)

Weighted combination of fragment and pixel values Dithering operation

Approximation of color by spatial averaging Different rounding based pixel location Half-Toning“

Logical operations 16 combinations of fragment and pixel values (NOT, AND,

OR, XOR)

Window Coordinates (OpenGL API)

void glScissor (GLint x, GLint y, GLsizei width, GLsizei height)

7

Scissor TestScissor Test

8

Alpha TestAlpha Test

void glAlphaFunc (GLenum func, GLclampf ref);

Enum: GL_NEVER, GL_ALWAYS, GL_LESS, GL_LEQUAL, GL_EQUAL, GL_GEQUAL, GL_GREATER, GL_NOTEQUAL

9

How to Use Blending? Remember to enable

glEnable(GL_BLEND); Set up blend function

glBlendFunc(…,…)

10

Blending Equation

We can define source and destination blending factors for each RGBA component

s = [sr, sg, sb, s]

d = [dr, dg, db, d]

Suppose that the source and destination colors are b = [br, bg, bb, b]

c = [cr, cg, cb, c]

Blend asc’ = [br sr+ cr dr, bg sg+ cg dg , bb sb+ cb db , b s+ c d ]

11

OpenGL Blending and Compositing

Must enable blending and pick source and destination factors glEnable(GL_BLEND) glBlendFunc(source_factor,

destination_factor)Only certain factors supported

GL_ZERO, GL_ONE GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA See Redbook for complete list

12

Blend Function 2/2

Parameter (f(R), f(G), f(B), f(A))

GL_ZERO (0,0,0,0)

GL_ONE (1,1,1,1)

GL_SRC_COLOR (RS/kR,GS/kG,BS/kB,AS/kA)

GL_ONE_MINUS_SRC_COLOR (1,1,1,1)-(RS/kR,GS/kG,BS/kB,AS/kA)

GL_DST_COLOR (Rd/kR,Gd/kG,Bd/kB,Ad/kA)

GL_ONE_MINUS_DST_COLOR (1,1,1,1)-(Rd/kR,Gd/kG,Bd/kB,Ad/kA)

GL_SRC_ALPHA AS/kA,AS/kA,AS/kA,AS/kA

GL_ONE_MINUS_SRC_ALPHA (1,1,1,1) -(AS/kA,AS/kA,AS/kA,AS/kA)

GL_DST_ALPHA (AD/kA,AD/kA,AD/kA,AD/kA)

GL_ONE_MINUS_DST_ALPHA (1,1,1,1) -(AD/kA,AD/kA,AD/kA,AD/kA)

13

Example

Suppose that we start with the opaque background color (R0,G0,B0,1)

This color becomes the initial destination color We now want to blend in a translucent polygon with color (R1,G1,B1,1)

Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA as the source and destination blending factors

R’1 = 1 R1 +(1- 1) R0, ……

Note this formula is correct if polygon is either opaque or transparent

14

Order Dependency

Is this image correct?Probably notPolygons are renderedin the order they passdown the pipelineBlending functionsare order dependent

15

Red Book Example

Demo: alpha.c example in chapter 6 of the Red Book

16

Blending Example 1/6

#include <math.h>#include "glut.h"

GLfloat alpha = 0.0;GLfloat pos[4] = {0, 10, 10, 0};GLfloat dif_l[4] = {1.0, 1.0, 1.0, 1.0};GLfloat dif_t[4] = {1.0, 0.5, 0.8, 1.0};GLfloat dif_m[4] = {0.5, 0.8, 0.8, cos(alpha)};

void display();void reshape(GLsizei, GLsizei);void idle();

17

Blending Example 2/6

void main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);glutInitWindowSize (500, 500);glutCreateWindow("Blending");glEnable(GL_DEPTH_TEST);glEnable(GL_LIGHTING);glutDisplayFunc(display);glutReshapeFunc(reshape);glutIdleFunc(idle);glutMainLoop();return;

}

18

Blending Example 3/6

void reshape(GLsizei w, GLsizei h){glViewport(0, 0, 500, 500);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(45, 1 / 1, 0.1, 1000);glMatrixMode(GL_MODELVIEW);glLoadIdentity();gluLookAt(-10, 10, 30, 0, 0, 0, 0, 1, 0);

}

void idle(){alpha += 0.05;dif_m[3] = (cos(alpha) + 1) / 2;glutPostRedisplay();

}

19

Blending Example 4/6

void display(){glClearColor(0, 0, 0, 0);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glEnable(GL_LIGHT0);glLightfv(GL_LIGHT0, GL_POSITION, pos);glLightfv(GL_LIGHT0, GL_DIFFUSE, dif_l);glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, dif_t);glutSolidTeapot(5);

20

Blending Example 5/6

glEnable(GL_BLEND);glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, dif_m);glBegin(GL_POLYGON);

glNormal3f(0, 0, 1);glVertex3f(-5, -5, 10);glVertex3f(5, -5, 10);glVertex3f(5, 5, 10);glVertex3f(-5, 5, 10);

glEnd();glFlush();glutSwapBuffers();

}

21

Blending Example 6/6

22

Billboards

•Replace a mesh with a pre-computed picture of the mesh

•Fast to render: a single textured polygon versus many

•Sometimes called“impostors”

•Always “aligned” with the viewing direction

23

What to use it for? Scenery

Trees, grass, spectators Mesh simplification

Replace far-away objects with billboards Non-polygonal objects

Fire, smoke, clouds, particles

24

Billboard basics A billboard is a

textured rectangle Texture is static Draw billboard

where mesh would have been drawn

25

Billboard basics Need to remove

texture background Two ways:

Masking Alpha blending

26

Billboards by using Masking

Billboard fragments alpha values are 0 or 1 Draw billboard fragments with alpha equal to 1

OpenGL: Alpha test

void glAlphaFunc (GLenum func, GLclampf ref);Enumerados: GL_NEVER, GL_ALWAYS, GL_LESS,

GL_LEQUAL, GL_EQUAL, GL_GEQUAL, GL_GREATER, GL_NOTEQUAL

glAlphaFunc (GL_GREATER, 0.0f)glEnable(GL_ALPHA_TEST)

27

Billboards with Blending Billboard fragments alpha values between [0,

1] Blending

void glBlendFunc (GLenum sfactor, GLenum dfactor);

Enumerados: GL_ZERO, GL_ONE, GL_DST_COLOR, GL_ONE_MINUS_DST_COLOR GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA...

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

glEnable(GL_BLEND)

28

Opaque and Translucent Polygons

Suppose that we have a group of polygons some of which are opaque and some translucent

How do we use hidden-surface removal? Opaque polygons block all polygons behind them and

affect the depth buffer Translucent polygons should not affect depth buffer

Render with glDepthMask(GL_FALSE) which makes depth buffer read-only

Sort polygons first to remove order dependency

29

3D Blending with the Depth Buffer

Steps:

Enable Depth Buffering Draw all the opaque objects (how?) Make the depth-buffer read-only (why?) Draw the translucent objects with

blending. Figure out the correct order of rasterization

30

How to Use Fog? Remember to enable

glEnable(GL_FOG); Set up fog function

glFogf(…,…)

31

Fog Function 1/2

glFog{f,i}[v]{GLenum pname, param}Pname param

GL_FOG_MODE GL_LINEAR, GL_EXP, GL_EXP2

GL_FOG_DENSITY default : 1.0

GL_FOG_START default : 0.0

GL_FOG_END default : 1.0

GL_FOG_INDEX default : 0.0

GL_FOG_COLOR default : (0,0,0,0)

32

Fog Function 2/2

GL_LINEAR

GL_EXP

GL_EXP2

COLOR:

33

How to use stencil buffer?

1. glutInitDisplayMode(GLUT_STENCIL);

2. glEnable(GL_STENCIL_TEST);

3. glClearStencil(0);4. glClear(GL_STENCIL_BUFFER_BIT);

34

Stencil Testing 1/2

void glStencilFunc( GLenum func, GLint ref, GLuint mask ); sets the function and reference value

for stencil testing. func: test function, see next page. ref: reference value mask:A mask that is ANDed with both

the reference value and the stored stencil value when the test is done.

35

Stencil Testing 2/2

param Meaning

GL_NEVER Always fails.

GL_LESS Passes if ( ref & mask) < ( stencil & mask).

GL_LEQUAL Passes if ( ref & mask) ≤ ( stencil & mask).

GL_GEQUAL Passes if ( ref & mask) ≥ ( stencil & mask).

GL_NOTEQUAL Passes if ( ref & mask) ( stencil & mask).

GL_ALWAYS Always passes.

36

Modify stencil buffer 1/2

void glStencilOp( GLenum fail, GLenum zfail, GLenum zpass ); sets the stencil test actions. fail: The action to take when the

stencil test fails zfail: Stencil action when the stencil

test passes, but the depth test fails. zpass: both the stencil test and the

depth test pass

37

Stencil buffer + Z buffer

38

Modify stencil buffer 2/2

param Meaning

GL_KEEP keep the current value

GL_ZERO set the value in stencil buffer to zero

GL_REPLACE set the value in stencil buffer to ref in glStencilFunc()

GL_INCR increase the current value in stencil buffer

GL_DECR decrease the current value in stencil buffer

GL_INVERT bitwise inverse the current value in stencil buffer

Red Book example Demo: stencil.c example in chapter

10 of the Red Book

39

40

Another Stencil buffer example 1/3

#include<gl/glut.h>

void GL_display(){glEnable(GL_DEPTH_TEST);glEnable(GL_STENCIL_TEST);glClearStencil(0);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);glStencilFunc(GL_ALWAYS, 1, 1);glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE);glColor3f(0.0, 1.0, 1.0);glutSolidCube(16.0);glClear(GL_DEPTH_BUFFER_BIT);glStencilOp(GL_KEEP, GL_KEEP, GL_INVERT);glStencilFunc(GL_EQUAL, 1, 1);glColor3f(1.0, 1.0, 1.0);glutSolidTeapot(8);glFlush();

}

41

Stencil buffer example 2/3

void GL_reshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 0.5, 100.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();gluLookAt(0.0, 0.0, 50.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

}

int main(int argc, char** argv){

glutInit(&argc, argv);glutInitWindowSize(400, 400);glutInitWindowPosition(0, 0);glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL);glutCreateWindow("Stencil Buffer");glutDisplayFunc(GL_display);glutReshapeFunc(GL_reshape);glutMainLoop();

}

42

Stencil buffer example 3/3

43

Other example… 1/2

void GL_display(){glEnable(GL_DEPTH_TEST);glEnable(GL_STENCIL_TEST);glClearStencil(0);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);glStencilFunc(GL_ALWAYS, 1, 1);glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE);glColor3f(0.0, 1.0, 1.0);glutSolidCube(16.0);glClear(GL_DEPTH_BUFFER_BIT);glStencilOp(GL_KEEP, GL_KEEP, GL_INVERT);glStencilFunc(GL_EQUAL, 1, 1);glColor3f(1.0, 1.0, 1.0);glutSolidTeapot(8);glStencilFunc(GL_NOTEQUAL, 1, 1);glColor3f(1.0, 1.0, 0.0);glPushMatrix();glTranslatef(10, 0, 0);glutSolidSphere(12, 10, 6);glPopMatrix();glFlush();

}

44

Other example… 2/2

45

Cooler example…

46

How to use accumulation buffer? glutInitDisplayMode(GLUT_ACCUM)

;

glClear(GL_ACCUM_BUFFER_BIT);

47

Accumulation function void glAccum( GLenum op,

GLfloat value ); operates on the accumulation buffer. op: The accumulation buffer

operation. See next page. value: also see next page.

48

Accumulation functionop Meaning

GL_ACCUM read each pixel from the color buffer, multiplies the R, G, B, and alpha values by value, then add

the result to accumulation buffer.

GL_LOAD the same as GL_ACCUM, but replace the value in accumulation rather than add.

GL_RETURN read values from the accumulation buffer, multiplies them by value, and places the result in the

color buffers.

GL_ADD / GL_MULT simply add / multiply the values of each pixel in the accumulation buffer by value, and return to

the accumulation buffer. (GL_MULT will clamp value from –1.0 to 1.0 while GL_ADD will not.)

49

Supersampling Multiple samples per pixel: each

pixel is divided into several sub-pixels

Multiple samples per pixel are taken in various ways and these are blended together to give the resulting pixel

50

Supersampling example Viewport resolution 2 x 2

51

Filter 3 x 3

52

Virtual Image

53

Weighted filter 3 x 3

Rendering multiple images Example: 3 x 3 filter Avoid to use 9 x original image resolution

memory Solution: rendering 9 times the entire scene

with the original resolution Each rendering is obtained by jittering a

sub-pixel amount in screen space Each final pixel is the average of the images

that intersect it.

54

55

Antialiasing with accumulation buffer entire scene is offset (jittered) by small, subpixel amounts

in screen space, and accumulated. Enable and clear the accumulator GL ACCUM reads each pixel from the current color buffer

and multiplies the R,G,B,and alpha values by 1/n and adds the result to the accumulator.

Scene gets drawn n times with slight perturbations (jittering), so that each pixel is the average of the images that intersect it.

GL_RETURN copies the values into the color buffer for viewing.

glClearAccum(r; g; b; alpha)glClear(GL ACCUM BUFFER BIT)glAccum(GL ACCUM; 1/n)glAccum(GL RETURN; 1.0)

Antialiasing example Demo: accpersp.c example in Chapter 10 “The

Framebuffer” of the Red Book Final scene results from the accumulation of 8

jittered images Jittering an image implies a slightly changing

in the corresponding frustumdx = jitter_x*(xwsize / viewport[2])

dy = jitter_y*(ywsize / viewport[3])

For each image rendering the viewpoint remains unchanged which implies the use of non-symmetric frustum

56

Depth of Field effect Demo: dof.c example in chapter 10 of the

Red Book Scene drawn 8 times corresponding to

jittering 8 times the viewpoint Jitter the volume while holding it stationary

at the focal plane Teapot located in focal plane is “in focus” Teapots not in the focal plane get blurred

57

Depth of Field effect

58

Non-symmetric frustum

59

60

Other accumulation example 1/3

#include <GL/glut.h>void GL_display(){

// clear the bufferglClearColor(0.0, 0.0, 0.0, 0.0);glClearAccum(0.0, 0.0, 0.0, 0.0); glClear(GL_ACCUM_BUFFER_BIT);for(int i = 0; i < 360; i++){

glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0, 1 - (float)i / 180, 1 - (float)i / 360);glPushMatrix();glTranslatef(0, -6, -10);glRotatef(i,0, 1, 0);glutWireTeapot(5);glPopMatrix();glAccum(GL_ACCUM, 0.01);

}glAccum(GL_RETURN, 1.0) ;glutSwapBuffers();

}

61

Accumulation example 2/3

void GL_reshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 1.0, 20.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();gluLookAt(0.0, 3.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

}

int main(int argc, char** argv){

glutInit(&argc, argv);glutInitWindowSize(500, 500);glutInitWindowPosition(0, 0);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_ACCUM);glutCreateWindow("Accumulation");glutDisplayFunc(GL_display);glutReshapeFunc(GL_reshape);glutMainLoop();

}

62

Accumulation example 3/3

Motion blur

63

Accumulation example 2 1/3

#include <GL/glut.h>void GL_display(){

glClearColor(0.0, 0.0, 0.0, 0.0);glClearAccum(0.0, 0.0, 0.0, 0.0); glClear(GL_ACCUM_BUFFER_BIT);for(int i = 0; i < 30; i++){

glClear(GL_COLOR_BUFFER_BIT);glLoadIdentity();gluLookAt(i * 0.01, 0.0, 3.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);glPushMatrix();glTranslatef(0, 4, -10);glColor3f(1, 0, 0);glutWireTeapot(2);glPopMatrix();glAccum(GL_ACCUM, 0.03333);

}glAccum(GL_RETURN, 1.0) ;glPushMatrix();glColor3f(1, 1, 1);glutWireTeapot(1);glPopMatrix();glutSwapBuffers();glutSwapBuffers();

}

64

Accumulation example 2 2/3

void GL_reshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 1.0, 50.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();

}

int main(int argc, char** argv){

glutInit(&argc, argv);glutInitWindowSize(500, 500);glutInitWindowPosition(0, 0);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_ACCUM);glutCreateWindow("Accumulation");glutDisplayFunc(GL_display);glutReshapeFunc(GL_reshape);glutMainLoop();

}

65

Accumulation example 2 3/3

66

Cooler example

Buffers Wrap-Up Open GL Buffer

n x m elements of k bits

67

Buffers Wrap-up OpenGL Frame Buffer

68