Embed Size (px)
DESCRIPTION
UBI 516 Advanced Computer Graphics. Graphics Output Primitives ( Chapter 3 ). Screen & Window Coordinates. Screen coordinates. Setting a pixel glBegin(GL_POINTS); glVertex2f(px,py); glEnd(); Setting Orthogonal Camera - PowerPoint PPT Presentation
Citation preview
UBI 516 Advanced Computer Graphics
Graphics Output PrimitivesGraphics Output Primitives
( Chapter 3 )( Chapter 3 )
Graphics Output PrimitivesGraphics Output Primitives
( Chapter 3 )( Chapter 3 )
Screen & Window Coordinates
Setting a pixelSetting a pixel
• glBegin(GL_POINTS);glBegin(GL_POINTS);glVertex2f(px,py);glVertex2f(px,py);
glEnd();glEnd();
Setting Orthogonal CameraSetting Orthogonal Camera
• glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);glLoadIdentity();glLoadIdentity();gluOrtho2D(xmin,xmax,ymin,ymax);gluOrtho2D(xmin,xmax,ymin,ymax);
Setting a pixelSetting a pixel
• glBegin(GL_POINTS);glBegin(GL_POINTS);glVertex2f(px,py);glVertex2f(px,py);
glEnd();glEnd();
Setting Orthogonal CameraSetting Orthogonal Camera
• glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);glLoadIdentity();glLoadIdentity();gluOrtho2D(xmin,xmax,ymin,ymax);gluOrtho2D(xmin,xmax,ymin,ymax);
xScreen coordinates
y
(0,0)
(799,599)
(0,0)xmin,ymin
(399,299)xmax,ymax
x
y
(px,py)
Curve=Polyline
GLU has many polynomials that are defined with GLU has many polynomials that are defined with discrete point sets (like spheres, cylinders)discrete point sets (like spheres, cylinders)GLU has many polynomials that are defined with GLU has many polynomials that are defined with discrete point sets (like spheres, cylinders)discrete point sets (like spheres, cylinders)
. . .
Pixels and Object Geometry
PixelPixel LineLineRectangleRectangle
PixelPixel LineLineRectangleRectangle
Drawing a Circle
Midpoint and modified midpoint algorithm.Midpoint and modified midpoint algorithm.Midpoint and modified midpoint algorithm.Midpoint and modified midpoint algorithm.
Polygon Fill
Convex Convex ConcaveConcaveConvex Convex ConcaveConcave
<180o
E1E2
E3
E4
E5
E6
>180o
(E1xE2)z>0(E2xE3)z>0(E3xE4)z<0(E4xE5)z>0(E5xE6)z>0
E1E2
E3
E4
E5
E6
Splitting Splitting concave concave polygonpolygon
Splitting Splitting concave concave polygonpolygon
Slitting of a Polygon into Triangles
OpenGL guarentees correct rendering of polygons only if they OpenGL guarentees correct rendering of polygons only if they are convex. A triangle is a convex polygon.are convex. A triangle is a convex polygon.
But a polygon which has >3 vertices can be concave.But a polygon which has >3 vertices can be concave.
So, we must tesselate a given polygon into So, we must tesselate a given polygon into triangles.The GLU library has a tesselator.triangles.The GLU library has a tesselator.
OpenGL guarentees correct rendering of polygons only if they OpenGL guarentees correct rendering of polygons only if they are convex. A triangle is a convex polygon.are convex. A triangle is a convex polygon.
But a polygon which has >3 vertices can be concave.But a polygon which has >3 vertices can be concave.
So, we must tesselate a given polygon into So, we must tesselate a given polygon into triangles.The GLU library has a tesselator.triangles.The GLU library has a tesselator.
Inside-Outside Testing
Flat and convex Flat and convex polygonpolygons are guarenteed to be s are guarenteed to be rendered correctly by OpenGL.rendered correctly by OpenGL.
For nonflat polygons:For nonflat polygons:
• We can work with their projections.We can work with their projections.
• Or we can use first three vertices to determine a flat plane Or we can use first three vertices to determine a flat plane to use for the interrior.to use for the interrior.
For nonsimple flat polygons, we must decide how to For nonsimple flat polygons, we must decide how to determine whether a given point is inside or determine whether a given point is inside or outside of the polygon (outside of the polygon (Jordan theoremJordan theorem). ).
Flat and convex Flat and convex polygonpolygons are guarenteed to be s are guarenteed to be rendered correctly by OpenGL.rendered correctly by OpenGL.
For nonflat polygons:For nonflat polygons:
• We can work with their projections.We can work with their projections.
• Or we can use first three vertices to determine a flat plane Or we can use first three vertices to determine a flat plane to use for the interrior.to use for the interrior.
For nonsimple flat polygons, we must decide how to For nonsimple flat polygons, we must decide how to determine whether a given point is inside or determine whether a given point is inside or outside of the polygon (outside of the polygon (Jordan theoremJordan theorem). ).
We want fill inside of a polygon with constant color.
Inside-Outside Testing
OOdd-even ruledd-even rule (easy implementation) (easy implementation)
= = crossing, crossing, odd parity rule, even-odd ruleodd parity rule, even-odd rule
Crossed odd edgesCrossed odd edges : : inside pointinside point
Crossed even edges Crossed even edges : : outside pointoutside point
OOdd-even ruledd-even rule (easy implementation) (easy implementation)
= = crossing, crossing, odd parity rule, even-odd ruleodd parity rule, even-odd rule
Crossed odd edgesCrossed odd edges : : inside pointinside point
Crossed even edges Crossed even edges : : outside pointoutside point
NNon-zero winding ruleon-zero winding rule
Clocwise edgesClocwise edges : +1: +1
Counterclocwise edgesCounterclocwise edges : –1: –1
Don’t fill while total 0Don’t fill while total 0
NNon-zero winding ruleon-zero winding rule
Clocwise edgesClocwise edges : +1: +1
Counterclocwise edgesCounterclocwise edges : –1: –1
Don’t fill while total 0Don’t fill while total 0
–1 –1 +1 +1
Polygon Tables
VERTEX TABLE
V1: x1 y1 z1
V2: x2 y2 z2
V3: x3 y3 z3
V4: x4 y4 z4
V5: x5 y5 z5
EDGE TABLE
E1 : V 1, V 2
E2 : V 2, V 3
E3 : V 3, V 1
E4 : V 3, V 4
E5 : V 4, V 5
E6 : V 5, V 1
POLYGON-SURFACE TABLE
S1 : E1, E 2, E3 S2 : E 3, E4, E5, E6
E1
S1 S2
V2
V5
V1
V3
V4
E2E2 E4E5
E6
E3
Vertex Arraystypedef GLint vertex3[3]; vertex3 pt[8] = { (0,0,0), (0,1,0), (1,0,0), (1,1,0),
(0,0,1), (0,1,1), (1,0,1), (1,1,1) }
void quad(GLint n1, GLint n2, GLint n3, GLint n4) { glBegin(GL_QUADS); glVertx3iv( pt[ n1 ]); glVertx3iv( pt[ n2 ]); glVertx3iv( pt[ n3 ]); glVertx3iv( pt[ n4 ]); }}
void cube( ) { quad( 6,2,3,7 ); quad( 5,1,0,4 ); quad( 7,3,1,5 ); quad( 4,0,2,6 ); quad( 2,0,1,3 ); quad( 7,5,4,6 );}
typedef GLint vertex3[3]; vertex3 pt[8] = { (0,0,0), (0,1,0), (1,0,0), (1,1,0),
(0,0,1), (0,1,1), (1,0,1), (1,1,1) }
void quad(GLint n1, GLint n2, GLint n3, GLint n4) { glBegin(GL_QUADS); glVertx3iv( pt[ n1 ]); glVertx3iv( pt[ n2 ]); glVertx3iv( pt[ n3 ]); glVertx3iv( pt[ n4 ]); }}
void cube( ) { quad( 6,2,3,7 ); quad( 5,1,0,4 ); quad( 7,3,1,5 ); quad( 4,0,2,6 ); quad( 2,0,1,3 ); quad( 7,5,4,6 );}
0 1
2 3
4 5
6 7
Plane Equations
(x,y,z)
Surface Normal
Surface (plane) equation : Surface (plane) equation : Ax+By+Cz+D=0Ax+By+Cz+D=0
N = (VN = (V11-V-V22)x(V)x(V11-V-V33))
= [ A B C] = [ A B C]TT
If P is any point on the plane :If P is any point on the plane :
NN••P+D = 0 P+D = 0 NN••P = -DP = -D
Surface (plane) equation : Surface (plane) equation : Ax+By+Cz+D=0Ax+By+Cz+D=0
N = (VN = (V11-V-V22)x(V)x(V11-V-V33))
= [ A B C] = [ A B C]TT
If P is any point on the plane :If P is any point on the plane :
NN••P+D = 0 P+D = 0 NN••P = -DP = -D
x
y
z
V2
V1
V3
OpenGL: Front/Back Rendering
Each polygon has two sides, Each polygon has two sides, front and back (front and back (ExampleExample))
glFrontFace(GL_CCW);glFrontFace(GL_CCW);
glCullFace(GL_BACK);glCullFace(GL_BACK);glEnable(GL_CULL_FACE);glEnable(GL_CULL_FACE);
OpenGL can render the two differentlyOpenGL can render the two differently
The ordering of vertices in the list determines which is the front The ordering of vertices in the list determines which is the front side:side:
• When looking at theWhen looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise
– This is basically the right-hand ruleThis is basically the right-hand rule
Each polygon has two sides, Each polygon has two sides, front and back (front and back (ExampleExample))
glFrontFace(GL_CCW);glFrontFace(GL_CCW);
glCullFace(GL_BACK);glCullFace(GL_BACK);glEnable(GL_CULL_FACE);glEnable(GL_CULL_FACE);
OpenGL can render the two differentlyOpenGL can render the two differently
The ordering of vertices in the list determines which is the front The ordering of vertices in the list determines which is the front side:side:
• When looking at theWhen looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise
– This is basically the right-hand ruleThis is basically the right-hand rule
Culling
For convex objects, such as the cube, we could simply remove all For convex objects, such as the cube, we could simply remove all the faces pointing away from viewer.the faces pointing away from viewer.
• glEnable(GL_CULL);glEnable(GL_CULL);
Normally, if we use only the z-buffer algorithm, we pass 6n Normally, if we use only the z-buffer algorithm, we pass 6n polygons through the pipeline.polygons through the pipeline.
If we enable culling, only 3n polygons can pass throughIf we enable culling, only 3n polygons can pass throughthe pipeline.the pipeline.
For convex objects, such as the cube, we could simply remove all For convex objects, such as the cube, we could simply remove all the faces pointing away from viewer.the faces pointing away from viewer.
• glEnable(GL_CULL);glEnable(GL_CULL);
Normally, if we use only the z-buffer algorithm, we pass 6n Normally, if we use only the z-buffer algorithm, we pass 6n polygons through the pipeline.polygons through the pipeline.
If we enable culling, only 3n polygons can pass throughIf we enable culling, only 3n polygons can pass throughthe pipeline.the pipeline.
OpenGL Bitmap Functions
OpenGL Pixel OperationsglReadPixels( xmin, ymin, width, height, dataFormat, dataType, array);glEnable( GL_COLOR_LOGIC_OP );glLogicOp( LogicOp );glDrawPixels( width, height, dataFormat, dataType, array );
dataFormat : GL_RGB, GL_LUMINANCE, ...dataType : GL_UNSIGNED_BYTE, LogicOp : GL_COPY, GL_AND, GL_XOR, ...
glReadPixels( xmin, ymin, width, height, dataFormat, dataType, array);glEnable( GL_COLOR_LOGIC_OP );glLogicOp( LogicOp );glDrawPixels( width, height, dataFormat, dataType, array );
dataFormat : GL_RGB, GL_LUMINANCE, ...dataType : GL_UNSIGNED_BYTE, LogicOp : GL_COPY, GL_AND, GL_XOR, ...
with GL_COPY_INVERTED
Bitmap FontsTText in computer graphics is problematic.ext in computer graphics is problematic.• OpenGL : no text primitive (use window primitives)OpenGL : no text primitive (use window primitives)
• GLUT : minimal supportGLUT : minimal support
glRasterPosition2i(x1, y1); // First Character PositionglutBitmapCharacter(font, character);glRasterPosition2i(x2, y2); // Second Character PositionglutBitmapCharacter(font, character);
Font: Font: GLUT_BITMAP_TIMES_ROMAN_10,GLUT_BITMAP_TIMES_ROMAN_10,GLUT_STROKE_ROMAN, ...GLUT_STROKE_ROMAN, ...
TText in computer graphics is problematic.ext in computer graphics is problematic.• OpenGL : no text primitive (use window primitives)OpenGL : no text primitive (use window primitives)
• GLUT : minimal supportGLUT : minimal support
glRasterPosition2i(x1, y1); // First Character PositionglutBitmapCharacter(font, character);glRasterPosition2i(x2, y2); // Second Character PositionglutBitmapCharacter(font, character);
Font: Font: GLUT_BITMAP_TIMES_ROMAN_10,GLUT_BITMAP_TIMES_ROMAN_10,GLUT_STROKE_ROMAN, ...GLUT_STROKE_ROMAN, ...
Text
Stroke TextStroke Text• Use vertices to define line segments or curvesUse vertices to define line segments or curves that that
outline each character.outline each character.
Advantages:Advantages:• It is defined in the same way as otherIt is defined in the same way as other objects.objects.• It can be manipulated as other objectsIt can be manipulated as other objects (rotate, make (rotate, make
bigger, smaller, etc.)bigger, smaller, etc.)
Disadvantages:Disadvantages:• Take up too much memory and Take up too much memory and
processingprocessing timetime• SlowSlow
Stroke TextStroke Text• Use vertices to define line segments or curvesUse vertices to define line segments or curves that that
outline each character.outline each character.
Advantages:Advantages:• It is defined in the same way as otherIt is defined in the same way as other objects.objects.• It can be manipulated as other objectsIt can be manipulated as other objects (rotate, make (rotate, make
bigger, smaller, etc.)bigger, smaller, etc.)
Disadvantages:Disadvantages:• Take up too much memory and Take up too much memory and
processingprocessing timetime• SlowSlow
Text
Raster TextRaster Text• Characters are defined as rectangles of bitsCharacters are defined as rectangles of bits
called bit blocks.called bit blocks.
• Each bit block defines a single character by Each bit block defines a single character by thethe pattern of 0 and 1pattern of 0 and 1 bits in the block.bits in the block.
Raster TextRaster Text• Characters are defined as rectangles of bitsCharacters are defined as rectangles of bits
called bit blocks.called bit blocks.
• Each bit block defines a single character by Each bit block defines a single character by thethe pattern of 0 and 1pattern of 0 and 1 bits in the block.bits in the block.
Text
Advantages:Advantages:• Simple and fastSimple and fast
• A raster character can be placed in theA raster character can be placed in the frame frame bufferbuffer rapidlyrapidly by a by a bit-block-transferbit-block-transfer operation operation ((butbltbutblt))
• Does not take up too much memory andDoes not take up too much memory and processing processing ttimeime
Disadvantages:Disadvantages:• It caIt cann not be defined in the same way as not be defined in the same way as other objects.other objects.
• It can not be manipulated as other objects.It can not be manipulated as other objects.
Advantages:Advantages:• Simple and fastSimple and fast
• A raster character can be placed in theA raster character can be placed in the frame frame bufferbuffer rapidlyrapidly by a by a bit-block-transferbit-block-transfer operation operation ((butbltbutblt))
• Does not take up too much memory andDoes not take up too much memory and processing processing ttimeime
Disadvantages:Disadvantages:• It caIt cann not be defined in the same way as not be defined in the same way as other objects.other objects.
• It can not be manipulated as other objects.It can not be manipulated as other objects.
Display Lists
Command block for often used objects.Command block for often used objects.
Creation :Creation : GLuint blockNum;GLuint blockNum;blockNum = glGenLists( 1 );blockNum = glGenLists( 1 );glNewList( blockNum, GL_COMPILE );glNewList( blockNum, GL_COMPILE ); ... // OpenGL commands ... // OpenGL commandsglEndList( );glEndList( );
Execution:Execution: glCallList( blockNum );glCallList( blockNum );
Deletion:Deletion: glDeleteLists( blockNum, 1 );glDeleteLists( blockNum, 1 );
Command block for often used objects.Command block for often used objects.
Creation :Creation : GLuint blockNum;GLuint blockNum;blockNum = glGenLists( 1 );blockNum = glGenLists( 1 );glNewList( blockNum, GL_COMPILE );glNewList( blockNum, GL_COMPILE ); ... // OpenGL commands ... // OpenGL commandsglEndList( );glEndList( );
Execution:Execution: glCallList( blockNum );glCallList( blockNum );
Deletion:Deletion: glDeleteLists( blockNum, 1 );glDeleteLists( blockNum, 1 );
UBI 516 Advanced omputer Graphics
Attributes of Graphics PrimitivesAttributes of Graphics Primitives
( Chapter 4 )( Chapter 4 )
Attributes of Graphics PrimitivesAttributes of Graphics Primitives
( Chapter 4 )( Chapter 4 )
OpenGL is a State Machine
Use current attribute, change it, use new attribute.Use current attribute, change it, use new attribute.Use current attribute, change it, use new attribute.Use current attribute, change it, use new attribute.
time2 : glColor3fv( Red );glColor3fv( Red ); // New color is red
time1 : glBegin( ... );glBegin( ... ); ... // Present color ?glEnd( );glEnd( );
time3 : glBegin( ... );glBegin( ... ); ... glEnd( );glEnd( );
Light
VVisible isible LLightight in E in Electromagnetic lectromagnetic SpectrumSpectrumVVisible isible LLightight in E in Electromagnetic lectromagnetic SpectrumSpectrum
104 106 108 1010 1012 1014 1016 1018 1020
AMFM
microwaveinfrared
visibleultraviolet
X-rayfrequency(Hz)
red yellow green blue violet
Red
Blue
Green
M
Y
C
Color
C(C() : ) : Strenght of Strenght of wavelength wavelength in the in the colorcolor ((energy distributionenergy distribution))
AAdditive color modeldditive color model
• C(C() ) = Sum of 3 color’s energy= Sum of 3 color’s energy
TThree-color theoryhree-color theory
• CC = = TT11 RR + + TT22 GG + + TT33 BB
= Desired color= Desired color
• T1, T2, T3T1, T2, T3 (Tristimulus Values)(Tristimulus Values) : : TThe numbers that specify he numbers that specify the values ofthe values of R, G, BR, G, B
C(C() : ) : Strenght of Strenght of wavelength wavelength in the in the colorcolor ((energy distributionenergy distribution))
AAdditive color modeldditive color model
• C(C() ) = Sum of 3 color’s energy= Sum of 3 color’s energy
TThree-color theoryhree-color theory
• CC = = TT11 RR + + TT22 GG + + TT33 BB
= Desired color= Desired color
• T1, T2, T3T1, T2, T3 (Tristimulus Values)(Tristimulus Values) : : TThe numbers that specify he numbers that specify the values ofthe values of R, G, BR, G, B
Human Visual System
Human Visual System
cones : cones : red, green, bluered, green, blue receptorsreceptors
sensitivsensitivyy curve curve of a cone : of a cone : SSii(())
brain perception valuesbrain perception values
three-color theorythree-color theory works for human eye works for human eye
• ((AAredred, , AAgreengreen, , AAblueblue) )
three parameter ofthree parameter of color color
cones : cones : red, green, bluered, green, blue receptorsreceptors
sensitivsensitivyy curve curve of a cone : of a cone : SSii(())
brain perception valuesbrain perception values
three-color theorythree-color theory works for human eye works for human eye
• ((AAredred, , AAgreengreen, , AAblueblue) )
three parameter ofthree parameter of color color)(C
Color Model
CColor modelolor model
• CColorolors are differents are different on a CRT, a film or a printer.on a CRT, a film or a printer.
• Color modelsColor models : : RGB, CMY, YIQ, CIE, …RGB, CMY, YIQ, CIE, …
CColor gamutolor gamut
• The ranges of color produced by given systemThe ranges of color produced by given system..
CColor solid olor solid (= color cube) (= color cube) ((ExampleExample))• CColor model olor model based onbased on three primary colors three primary colors..
• TThree primary colorhree primary color are three axis of are three axis of a a cubecube..
• CColor gamut olor gamut is set of all points on the cube.is set of all points on the cube.
CColor modelolor model
• CColorolors are differents are different on a CRT, a film or a printer.on a CRT, a film or a printer.
• Color modelsColor models : : RGB, CMY, YIQ, CIE, …RGB, CMY, YIQ, CIE, …
CColor gamutolor gamut
• The ranges of color produced by given systemThe ranges of color produced by given system..
CColor solid olor solid (= color cube) (= color cube) ((ExampleExample))• CColor model olor model based onbased on three primary colors three primary colors..
• TThree primary colorhree primary color are three axis of are three axis of a a cubecube..
• CColor gamut olor gamut is set of all points on the cube.is set of all points on the cube.
RGB color model
Red, Green, BlueRed, Green, Blue
• TTri-stimulus theoryri-stimulus theory..
• Additive Additive system : Adding ligths system : Adding ligths to blank points.to blank points.
• RGB cube RGB cube has has 33 axis (0 to 1). axis (0 to 1).
Red, Green, BlueRed, Green, Blue
• TTri-stimulus theoryri-stimulus theory..
• Additive Additive system : Adding ligths system : Adding ligths to blank points.to blank points.
• RGB cube RGB cube has has 33 axis (0 to 1). axis (0 to 1).
Green
Red
Blue
C
M
Y
CMY, CMYK color model
HHard copy ard copy systems : printing, paiting ...systems : printing, paiting ...
• SSubtractive systemubtractive system : Adding : Addingcolors to white surface (ex:paper)colors to white surface (ex:paper)
• Convertion CMY to RGB, and RGB to CMY.Convertion CMY to RGB, and RGB to CMY.
CMYK color model : K (black) CMYK color model : K (black) for cartridge saving.for cartridge saving.
• NormallyNormally, cyan + magenta + yellow = black, cyan + magenta + yellow = black
• CMY can beCMY can be used for used for dark graydark gray..
• But, But, (K) ink(K) ink will be used for black. will be used for black.
HHard copy ard copy systems : printing, paiting ...systems : printing, paiting ...
• SSubtractive systemubtractive system : Adding : Addingcolors to white surface (ex:paper)colors to white surface (ex:paper)
• Convertion CMY to RGB, and RGB to CMY.Convertion CMY to RGB, and RGB to CMY.
CMYK color model : K (black) CMYK color model : K (black) for cartridge saving.for cartridge saving.
• NormallyNormally, cyan + magenta + yellow = black, cyan + magenta + yellow = black
• CMY can beCMY can be used for used for dark graydark gray..
• But, But, (K) ink(K) ink will be used for black. will be used for black.
Yellow
Magenta
Cyan
G
B
R
Y
M
C
B
G
R
B
G
R
Y
M
C
1
1
1
,
1
1
1
RGB vs. CMY
RGB color systemRGB color system
AAdditive primariesdditive primaries
• Adding ligthsAdding ligths
For For monitormonitor, datashows, datashows
• R, G, B R, G, B lights.lights.
GGraphicsraphics system generally system generally useuse RGB RGB color systemcolor system
RGB color systemRGB color system
AAdditive primariesdditive primaries
• Adding ligthsAdding ligths
For For monitormonitor, datashows, datashows
• R, G, B R, G, B lights.lights.
GGraphicsraphics system generally system generally useuse RGB RGB color systemcolor system
CMY color systemCMY color system
SSubtractive primiariesubtractive primiaries
• Adding color pigmentsAdding color pigments
For For printerprinter, plotter ..., plotter ...
• C, M, YC, M, Y inkinks.s.
CMY color systemCMY color system
SSubtractive primiariesubtractive primiaries
• Adding color pigmentsAdding color pigments
For For printerprinter, plotter ..., plotter ...
• C, M, YC, M, Y inkinks.s.
Direct color systemVVideo cardideo card characteristics : characteristics :
• Each pixelEach pixel stored with RGB values stored with RGB values onon frame buffer frame buffer
• If If frame buffer frame buffer storesstores nn bit bit for for every valuesevery values
– 22nn × 2 × 2nn × 2 × 2nn colors = 2 colors = 233nn colors colors
• 33nn = 24 : true color system = 24 : true color system
• 8 bit for every RGB values (0~255).8 bit for every RGB values (0~255).
• Frame buffer wold have over 3MB of memory that would have to be redisplay at video rates.Frame buffer wold have over 3MB of memory that would have to be redisplay at video rates.
VVideo cardideo card characteristics : characteristics :
• Each pixelEach pixel stored with RGB values stored with RGB values onon frame buffer frame buffer
• If If frame buffer frame buffer storesstores nn bit bit for for every valuesevery values
– 22nn × 2 × 2nn × 2 × 2nn colors = 2 colors = 233nn colors colors
• 33nn = 24 : true color system = 24 : true color system
• 8 bit for every RGB values (0~255).8 bit for every RGB values (0~255).
• Frame buffer wold have over 3MB of memory that would have to be redisplay at video rates.Frame buffer wold have over 3MB of memory that would have to be redisplay at video rates.
Direct color system
OpenGL functionsOpenGL functions
• Video card has Video card has 33nn system system
• OpenGL always use OpenGL always use 0.0 ~ 1.00.0 ~ 1.0 values for values for red, green, bluered, green, blue..
• It means, OpenGL is independent of hardware.It means, OpenGL is independent of hardware.
glColorglColor**();();
• For setting colors.For setting colors.
OpenGL functionsOpenGL functions
• Video card has Video card has 33nn system system
• OpenGL always use OpenGL always use 0.0 ~ 1.00.0 ~ 1.0 values for values for red, green, bluered, green, blue..
• It means, OpenGL is independent of hardware.It means, OpenGL is independent of hardware.
glColorglColor**();();
• For setting colors.For setting colors.
Direct color system
RGBA color modelRGBA color model
• RGB + A (alpha channelRGB + A (alpha channel = = opacity value)opacity value)
• A = 1.0 A = 1.0 is for invisible objects.is for invisible objects.
glColor4f(red, green, blue, alpha);
Clearing system to color Clearing system to color (i.e. pure white with alpha(i.e. pure white with alpha value of 0.0)value of 0.0)
glClearColor(1.0, 1.0, 1.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);..
RGBA color modelRGBA color model
• RGB + A (alpha channelRGB + A (alpha channel = = opacity value)opacity value)
• A = 1.0 A = 1.0 is for invisible objects.is for invisible objects.
glColor4f(red, green, blue, alpha);
Clearing system to color Clearing system to color (i.e. pure white with alpha(i.e. pure white with alpha value of 0.0)value of 0.0)
glClearColor(1.0, 1.0, 1.0, 0.0);glClear(GL_COLOR_BUFFER_BIT);..
Indexed color system
If the frame buffer is limited in depth (i.e. If the frame buffer is limited in depth (i.e. eacheach pixel is only 8-bits deep), then we pixel is only 8-bits deep), then we can select colorscan select colors by interpreting our by interpreting our limited depthlimited depth pixels as pixels as indicesindices,, rather rather than as color values.than as color values.
The indices point to a The indices point to a color-lookup tablecolor-lookup table..
ExampleExample::
• For a frame buffer that has k-bits per pixel, For a frame buffer that has k-bits per pixel, eacheach pixel index is a value from 0 to 2k-1.pixel index is a value from 0 to 2k-1.
• Assume that the display can display Assume that the display can display colors with ancolors with an accuracy of m accuracy of m (2m reds, 2m greens, 2m blues).(2m reds, 2m greens, 2m blues).
If the frame buffer is limited in depth (i.e. If the frame buffer is limited in depth (i.e. eacheach pixel is only 8-bits deep), then we pixel is only 8-bits deep), then we can select colorscan select colors by interpreting our by interpreting our limited depthlimited depth pixels as pixels as indicesindices,, rather rather than as color values.than as color values.
The indices point to a The indices point to a color-lookup tablecolor-lookup table..
ExampleExample::
• For a frame buffer that has k-bits per pixel, For a frame buffer that has k-bits per pixel, eacheach pixel index is a value from 0 to 2k-1.pixel index is a value from 0 to 2k-1.
• Assume that the display can display Assume that the display can display colors with ancolors with an accuracy of m accuracy of m (2m reds, 2m greens, 2m blues).(2m reds, 2m greens, 2m blues).
color-lookup table
Indexed color system
WWhy indexed color system ?hy indexed color system ?
• IImage mage and and frame buffer size frame buffer size is reduced.is reduced.
• IImage file format : GIF, BMPmage file format : GIF, BMP use this system. use this system.
OpenGL functionsOpenGL functions : :
• Sets Sets current colorcurrent color to LUT[index]. to LUT[index].glIndeglIndexixi((indexindex););
• Change color at LUT[index].Change color at LUT[index].glutSetColor(index, red, green, blue);glutSetColor(index, red, green, blue);
WWhy indexed color system ?hy indexed color system ?
• IImage mage and and frame buffer size frame buffer size is reduced.is reduced.
• IImage file format : GIF, BMPmage file format : GIF, BMP use this system. use this system.
OpenGL functionsOpenGL functions : :
• Sets Sets current colorcurrent color to LUT[index]. to LUT[index].glIndeglIndexixi((indexindex););
• Change color at LUT[index].Change color at LUT[index].glutSetColor(index, red, green, blue);glutSetColor(index, red, green, blue);
OpenGL Blending
// // destinationdestination
DDraw the rectangle (dr, dg, db, da) raw the rectangle (dr, dg, db, da) glEnable(GL_BLEND);glEnable(GL_BLEND);glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA);GL_SRC_ALPHA);
// // sourcesource
DDraw the triangle (sr, sg, sb, sa)raw the triangle (sr, sg, sb, sa)
Don’t forget disabling !Don’t forget disabling !glglDisDisable(GL_BLEND);able(GL_BLEND);
// // destinationdestination
DDraw the rectangle (dr, dg, db, da) raw the rectangle (dr, dg, db, da) glEnable(GL_BLEND);glEnable(GL_BLEND);glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA);GL_SRC_ALPHA);
// // sourcesource
DDraw the triangle (sr, sg, sb, sa)raw the triangle (sr, sg, sb, sa)
Don’t forget disabling !Don’t forget disabling !glglDisDisable(GL_BLEND);able(GL_BLEND);
transparentopaque
Point AttributesPoint color & size :Point color & size :Point color & size :Point color & size :
Pixel size = 1
Line AttributesLine color, width & style :Line color, width & style :
glLineWidth ( width );
glLineStipple ( repeatFactor, pattern );
// 0x1c47 for dash-dot pattern
// binary: 1110001000111glEnable ( GL_LINE_STIPPLE );
......
glDisable ( GL_LINE_STIPPLE );
See page 192 for example code.See page 192 for example code.
Line color, width & style :Line color, width & style :
glLineWidth ( width );
glLineStipple ( repeatFactor, pattern );
// 0x1c47 for dash-dot pattern
// binary: 1110001000111glEnable ( GL_LINE_STIPPLE );
......
glDisable ( GL_LINE_STIPPLE );
See page 192 for example code.See page 192 for example code.
Line AttributesImplementation of line width :Implementation of line width :Implementation of line width :Implementation of line width :
Smooth Lines ?
Fill-Area Attributes
Hollow, solid or patterned.Hollow, solid or patterned.GLubyte fillPattern[ ] = {0xff,0,0xff,0,...}
glPolygonStipple ( fillPattern );
glEnable ( GL_POLYGON_STIPPLE );......
glDisable ( GL_POLYGON_STIPPLE );
Hollow, solid or patterned.Hollow, solid or patterned.GLubyte fillPattern[ ] = {0xff,0,0xff,0,...}
glPolygonStipple ( fillPattern );
glEnable ( GL_POLYGON_STIPPLE );......
glDisable ( GL_POLYGON_STIPPLE );
Smoothed Fill Patterns
OpenGL Polygon Modes
glPolygonMode( face, displayMode ); (glPolygonMode( face, displayMode ); (ExampleExample))
Face:Face: GL_FRONT, GL_BACK, GL_FRON_AND_BACK
Display Modes:Display Modes:GL_POINT (Only edge points)GL_LINE (Wireframe)GL_FILL (Default)
glFrontFace( faceOrder );glFrontFace( faceOrder ); // GL_CW or GL_CCW// GL_CW or GL_CCW
glEdgeFlag( flag ); glEdgeFlag( flag ); // GL_TRUE or GL_FALSE for line mode// GL_TRUE or GL_FALSE for line mode
glPolygonMode( face, displayMode ); (glPolygonMode( face, displayMode ); (ExampleExample))
Face:Face: GL_FRONT, GL_BACK, GL_FRON_AND_BACK
Display Modes:Display Modes:GL_POINT (Only edge points)GL_LINE (Wireframe)GL_FILL (Default)
glFrontFace( faceOrder );glFrontFace( faceOrder ); // GL_CW or GL_CCW// GL_CW or GL_CCW
glEdgeFlag( flag ); glEdgeFlag( flag ); // GL_TRUE or GL_FALSE for line mode// GL_TRUE or GL_FALSE for line mode
General Scan-Line Polygon-Fill Algorithm
Consider the following polygon:Consider the following polygon:
How do we know whether a given pixel on the How do we know whether a given pixel on the scanline is inside or outside the polygon?scanline is inside or outside the polygon?
Consider the following polygon:Consider the following polygon:
How do we know whether a given pixel on the How do we know whether a given pixel on the scanline is inside or outside the polygon?scanline is inside or outside the polygon?
A
B
C
D
E
F
Polygon Rasterization
Inside-Outside PointsInside-Outside PointsPoint a, c : +1Point b, d : -1if zero then fill
For edge E ?For edge E ?
For edges A and C? For edges A and C?
Inside-Outside PointsInside-Outside PointsPoint a, c : +1Point b, d : -1if zero then fill
For edge E ?For edge E ?
For edges A and C? For edges A and C?
Do not changes
Flood-Fill Algorithm
Set pixel to fill color value until bounds.Set pixel to fill color value until bounds.• AAn interior point (n interior point (xx, , yy))
• AA boundary color boundary color
• AA fill color fill color
Set pixel to fill color value until bounds.Set pixel to fill color value until bounds.• AAn interior point (n interior point (xx, , yy))
• AA boundary color boundary color
• AA fill color fill color
Boundary color
Interior point (x, y)
Fill color
4-connected vs. 8-connected
4-connected4-connected4-connected4-connected 8-connected8-connected8-connected8-connected
Start point
Flood-Fill Algorithm
RRough algorithm for 4-connected caseough algorithm for 4-connected casevoid flood_fill4(int x, int y, Color fill, Color boundary) {
Color current = getPixel(x, y);
ifif ( (currentcurrent boundaryboundary && && currentcurrent fillfill) {) {setPixel(setPixel(xx, , yy, , fillfill););flood_fflood_fillill44((xx+1, +1, yy, , fillfill, , boundaryboundary);); // recursion ! // recursion !flood_fflood_fillill44((xx–1, –1, yy, , fillfill, , boundaryboundary););flood_fflood_fillill44((xx, , yy+1, +1, fillfill, , boundaryboundary););flood_fflood_fillill44((xx, , yy–1, –1, fillfill, , boundaryboundary););
}}
}
RRough algorithm for 4-connected caseough algorithm for 4-connected casevoid flood_fill4(int x, int y, Color fill, Color boundary) {
Color current = getPixel(x, y);
ifif ( (currentcurrent boundaryboundary && && currentcurrent fillfill) {) {setPixel(setPixel(xx, , yy, , fillfill););flood_fflood_fillill44((xx+1, +1, yy, , fillfill, , boundaryboundary);); // recursion ! // recursion !flood_fflood_fillill44((xx–1, –1, yy, , fillfill, , boundaryboundary););flood_fflood_fillill44((xx, , yy+1, +1, fillfill, , boundaryboundary););flood_fflood_fillill44((xx, , yy–1, –1, fillfill, , boundaryboundary););
}}
}
Character Attributes
Anti-aliasing
AAliasingliasingIInformation loss due to nformation loss due to low-frequency samplinglow-frequency samplingJJagged or stair-step appearanceagged or stair-step appearance
AAnti-aliasingnti-aliasingModified Modified Bresenham’s line algorithmBresenham’s line algorithm : :
We put a pixels to We put a pixels to yykk, and lightened pixel , and lightened pixel yykk-1 and -1 and yykk+1.+1.
AAliasingliasingIInformation loss due to nformation loss due to low-frequency samplinglow-frequency samplingJJagged or stair-step appearanceagged or stair-step appearance
AAnti-aliasingnti-aliasingModified Modified Bresenham’s line algorithmBresenham’s line algorithm : :
We put a pixels to We put a pixels to yykk, and lightened pixel , and lightened pixel yykk-1 and -1 and yykk+1.+1.
2 4
1 2 1
1 2 1
2
Subpixelweighting
mask
OpenGL Anti-aliasing
In RGB display modeIn RGB display mode
glEnable(mode);glEnable(mode);GL_POINT_SMOOTHGL_POINT_SMOOTHGL_LINE_SMOOTHGL_LINE_SMOOTHGL_POLYGON_SMOOTHGL_POLYGON_SMOOTH
Also type these :Also type these : glEnable(GL_BLEND);glEnable(GL_BLEND);glBlendFunc(GL_SRC_ALPHA,glBlendFunc(GL_SRC_ALPHA,
GL_ONE_MINUS_SRC_ALPHA);GL_ONE_MINUS_SRC_ALPHA);
In RGB display modeIn RGB display mode
glEnable(mode);glEnable(mode);GL_POINT_SMOOTHGL_POINT_SMOOTHGL_LINE_SMOOTHGL_LINE_SMOOTHGL_POLYGON_SMOOTHGL_POLYGON_SMOOTH
Also type these :Also type these : glEnable(GL_BLEND);glEnable(GL_BLEND);glBlendFunc(GL_SRC_ALPHA,glBlendFunc(GL_SRC_ALPHA,
GL_ONE_MINUS_SRC_ALPHA);GL_ONE_MINUS_SRC_ALPHA);
Push/Pop Attributes
glPushAttrib( mode );glPushAttrib( mode );
ModesModes::
GL_ALL_ATTRIB_BITSGL_ALL_ATTRIB_BITS
GL_POINT_BITGL_POINT_BITGL_LINE_BITGL_LINE_BITGL_POLYGON_BITGL_POLYGON_BIT
glPopAttrib( );glPopAttrib( );
glPushAttrib( mode );glPushAttrib( mode );
ModesModes::
GL_ALL_ATTRIB_BITSGL_ALL_ATTRIB_BITS
GL_POINT_BITGL_POINT_BITGL_LINE_BITGL_LINE_BITGL_POLYGON_BITGL_POLYGON_BIT
glPopAttrib( );glPopAttrib( );
Current Style
glPushAttrib()// Change attribute
glPopAttrib()
