Attributes of Graphics Primitives

Learning Objectives
OpenGL state variables Color and gray scale Color functions Point attributes and functions Line attributes and functions Curve attributes and functions Fill-area attribute functions Character attributes

Attributes
Effect the way a primitive is displayed Two main ways of introducing attributes: 1) added to primitives parameter list
e.g. setPixel(x, y, color)

2) a list of current attributes (to be updated when changed) e.g setColor(color); setPixel(x, y);

OpenGL State Variables

State parameters are attributes of the output primitives. In OpenGL, state parameters include
Color Current matrix mode Elements of the Modelview matrix Current position of frame buffer Lighting effects parameters.

Changes affect next operations.

Color and Gray Scale

RGB color buffer
Store RGB color codes in frame buffer or in a separate table Color code placed at pixel location Minimum number of colors for 3-bits Left bit Red, Middle bit Green, Left bit Blue 0 black, 1 blue, , 7 white More color bits increase the size of the frame buffer: 24-bits * 1024 * 1024 = 3MB

Color representations
Two different ways of storing a color value: 1) a direct color value storage/pixel 2) indirectly via a color look-up table index/pixel (typically 256 or 512 different colors in the table)

Color and Gray Scale

Color tables
Color map (color look-up table) Each pixel in the frame buffer contains a value (Ex. 196) corresponding to an entry in the color table (Ex. 2081), which has 256 entries. Color table contains a 3-byte color code that represents an RGB color 1-byte for the Red, 1-byte for the Green, 1-byte for the Blue. Pick 256 colors from a total of 17 million, and save storage: 1024 * 1024 = 1MB

Color and Gray Scale

(from Donald Hearn and Pauline Baker)

Color and Gray Scale

Gray scale
Shades of gray 0 dark gray, 1 light gray

Other color parameters

Intensity (amount of light energy) Luminance (perceived brightness)

Color Functions
Set color display mode to RGB
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

GLUT_SINGLE or GLUT_DOUBLE GLUT_RGB, GLUT_RGBA, GLUT_INDEX

gl.glEnable(gl.GL_COLOR_RGB); // in JOGL

Alpha value (RGBA) for color blending of overlapping primitives (transparent or not) Affects the color state from that function call on (not retroactive)
gl.glColor*

* means b (byte), i (int), s (short), d (double), f (float) default (1.0f, 1.0f, 1.0f, 1.0f) for white

Color Functions
public void triangleColor () // displays a three-colored triangle { gl.glClear (GL.GL_COLOR_BUFFER_BIT); // apply clear color to color buffer gl.glBegin(GL.GL_TRIANGLES); // Drawing Using Triangles gl.glColor3f(1.0f, 0.0f, 0.0f); gl.glVertex2i( 100, 150); gl.glColor3f(0.0f, 1.0f, 0.0f); gl.glVertex2i(10,10); gl.glVertex2i(180,15); gl.glEnd(); gl.glColor3f(0.0f, 0.0f, 1.0f); // set color to red // top // set color to green // set color to blue // bottom right // finished drawing the triangle // bottom Left

Color Functions

Color Functions
Point center = new Point(100, 75); float [][] CLUT ={{1.0f,0.0f,0.0f}, {1.0f,0.5f,0.0f}, {1.0f,1.0f,0.0f},{0.0f,1.0f,0.0f},{0.0f,0.0f,1.0f}, {1.0f,0.0f,1.0f}, {0.5f,0.0f,0.5f}, {1.0f,0.0f,0.5f}}; Point [] vertex = new Point [8]; for (k = 0; k < 8; k++) { theta = Math.PI * 2 * k / 8.0; vertex[k] = new Point(); vertex[k].setLocation( (int) (center.getX() + 50 * Math.cos (theta)), (int) (center.getY() + 50 * Math.sin (theta))); } gl.glBegin (GL.GL_POLYGON); for (k = 0; k < 8; k++) { gl.glColor3fv (CLUT[k]); gl.glVertex2d (vertex[k].getX(), vertex[k].getY()); } gl.glEnd ( ); // finished drawing The Triangle

Color Functions

Point Attributes and Functions

Attributes are any parameters that affect the way graphic primitives are displayed. Basic attributes
Color Size

Point
Color Size is a multiple of the pixel size (a square).
gl.glPointSize (size); // size is the number of pixels

Line Attributes and Functions

Line attributes
Basic attributes: color, width, style Width can be set in the line drawing algorithm as well as the length and point spacing. Raster algorithms display line attributes by plotting pixel spans, like plotting multiple pixels along the line either horizontally (m<1)of vertically (m>1). Produces lines of slightly different width according to the slope, and also abrupt ends (horizontal or vertical). Add line caps at the end (butt cap, round cap, projecting square cap).

Attributes for lines

Lines (and curves) are normally infinitely thin type
dashed, dotted, solid, dot-dashed, pixel mask, e.g. 11100110011

width
Problem with the joins; line caps are used to adjust shape

pen/brush shape color (intensity)

Line Attributes and Functions

Line attributes
Width thick polylines with previous method do nto connect smoothly
miter join: extend the outer boundaries of each segment until they join round join: cap connection with circular boundary bevel join: display line segments with butt caps and fill-in triangular gap between the two butts.

Line Attributes and Functions

Line attributes
Style
Solid lines, dashed lines, dotted lines can be generated by modifying the line drawing algorithm spacing between drawn pixels Can be also generated from the raster by using a pixel mask, for example 11111000 will display a dashed line with dash length of 5 and inter-dash length of 3.

Line Attributes and Functions

Line attributes
Pen and brush options
Select several pen and brush styles Shape, size, pattern Can be implemented in a pixel mask Change the mask to change the pen/brush

Line Attributes and Functions

Line attribute functions
gl.glLineWidth (width); // width is the width of the line

Default width is 1.0

gl.glLineStipple (repeatFactor, pattern);
pattern references a 16-bit integer that describes how the line should be displayed (default 0xFFFF, all bits set to 1, solid line) repeatFactor specifies how many times each bit in the pattern is to be repeated before the next bit in the pattern in applied (default 1). Example: displays 0x00FF --------------8 solid line pixels, followed by 8 spaces -------

Requires first glEnable (GL_LINE_STIPPLE); line-pattern feature can be disabled by glDisable (GL_LINE_STIPPLE);

gl.glShadeModel (GL.GL_SMOOTH); // linear interpolation of colors

Attributes for lines

Lines (and curves) are normally infinitely thin type
dashed, dotted, solid, dot-dashed, pixel mask, e.g. 11100110011

width
Problem with the joins; line caps are used to adjust shape (butt cap,round cap,Projecting cap)

pen/brush shape color (intensity)

Line Attributes and Functions

Lines with width

Line caps

Joins

Curve Attributes and Functions

Same parameters as for lines
Width Color Dot-dash patterns Pen/brush options

Raster curves produced by horizontal/vertical span

Fill-Area Attributes
OpenGL fill-area routines for convex polygons only. Four steps:
Define a fill pattern Invoke the polygon-fill routine Activate the polygon-fill feature Describe the polygons to be filled.

Tiling
Tiling = filling surfaces (polygons) with a rectangular pattern

Attributes for area fill

fill style
hollow, solid, pattern, hatch fill,

color pattern
Tiling Soft Fill(soften the fill colors)

Other output primitives

* pattern (to fill an area) normally, an n by m rectangular color pixel array with a specified reference point * polymarker (marker symbol) a character representing a point * (polyline) a connected sequence of line segments

Fill-Area Attributes
Define a fill pattern
Store pattern in a 32 x 32 byte array (fillPattern) Bytes are numbered from right to left

Invoke the polygon-fill routine Activate the polygon-fill feature Describe the polygons to be filled At the end
gl.glBegin ( GL.GL_POLYGON ) gl.glDisable ( GL.GL_POLYGON_STIPPLE ) gl.glEnable ( GL.GL_POLYGON_STIPPLE ) gl.glPolygonStipple ( fillPattern)

Fill-Area Attributes
gl.glPolygonStipple (stripe); gl.glEnable (GL.GL_POLYGON_STIPPLE); gl.glBegin (GL.GL_POLYGON); for (k = 0; k < 6; k++) { gl.glColor3f (1.0f, 0.0f, 0.0f); gl.glVertex2d (vertex[k].getX(), vertex[k].getY()); }; gl.glEnd ( ); gl.glDisable (GL.GL_LINE_STIPPLE);

Character Attributes
Character attributes
Font (typeface) Helvetica, Courier, Times Roman, Underlining style solid, dotted, double Style boldface, italics, outline, shadow Size 10-point, 12-point, Color.

Character Attributes

(from Donald Hearn and Pauline Baker)

Character Attributes
Character attributes
Font (typeface) Helvetica, Courier, Times Roman, Underlining style solid, dotted, double Style boldface, italics, outline, shadow Size 10-point, 12-point, Color Direction (up vector)

Text attributes

Text attributes, contd

Text attributes, contd

Text attributes, contd

Character Attributes
Two methods
With bitmap functions create images of each character With GLUT character generating routines available in OpenGL from GLUT class BITMAP_HELVETICA_10 BITMAP_HELVETICA_12 BITMAP_HELVETICA_18 BITMAP_TIMES_ROMAN_10 BITMAP_TIMES_ROMAN_24 glutBitmapCharacter, glutBitmapString, glutBitmapLength, glutBitmapWidth

Antialiasing
Used to improve the appearance of lines. gl.glEnable ( primitive_type ) primitive_type: GL_POINT_SMOOTH GL_LINE_SMOOTH GL_POLYGON_SMOOTH Color-blending gl.glEnable (GL.GL_BLEND) gl.glBlendFunc ( GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA)

Aliasing
Aliasing is cause by the discrete nature of pixels (Sampling Error). Approximation of lines and circles with discrete points often gives a staircase appearance or "Jaggies". Desired line

Aliased rendering of the line

Stairstepping
What about the jagged right angle patterns we see at the edges of triangles? This is known as the stairstepping problem, also affectionately known as the jaggies These can be visually distracting, especially for high contrast edges near horizontal or vertical Stairstepping is another form of aliasing

Aliasing
These examples cover a wide range of problems, but they all result from essentially the same thing In each situation, we are starting with a continuous signal We then sample the signal at discreet points Those samples are then used to reconstruct a new signal, that is intended to represent the original signal However, the reconstructed signals are a false representation of the original signals In the English language, when a person uses a false name, that is known as an alias, and so it was adapted in signal analysis to apply to falsely represented signals Aliasing in computer graphics usually results in visually distracting artifacts, and a lot of effort goes into trying to stop it. This is known as antialiasing

Signals
The term signal is pretty abstract, and has been borrowed from the science of signal analysis Signal analysis is very important to several areas of engineering, especially electrical, audio, and communications Signal analysis includes a variety of mathematical methods for examining signals such as Fourier analysis, filters, sampling theory, digital signal processing (DSP), and more In electronics, a one dimensional signal can refer to a voltage changing over time. In audio, it can refer to the sound pressure changing over time In computer graphics, a one dimensional signal could refer to a horizontal or vertical line in our image. Notice that in this case, the signal doesnt have to change over time, instead it varies over space (the x or y coordinate) Often signals are treated as functions of one variable and examples are given in the 1D case, however the concepts of signal analysis extend to multidimensional signals as well, and so we can think of our entire 2D image as a signal

Sampling
If we think of our image as a bunch of perfect triangles in continuous (floating point) device space, then we are thinking of our image as a continuous signal This continuous signal can have essentially infinite resolution if necessary, as the edges of triangles are perfect straight lines To render this image onto a regular grid of pixels, we must employ some sort of discreet sampling technique In essence, we take our original continuous image and sample it onto a finite resolution grid of pixels If our signal represents the red intensity of our virtual scene along some horizontal line, then the sampled version consists of a row of discreet 8 bit red values This is similar to what happens when a continuous analog sound signal is digitally sampled onto a CD

Reconstruction
Once we have our sampled signal, we then reconstruct it In the case of computer graphics, this reconstruction takes place as a bunch of colored pixels on a monitor In the case of CD audio, the reconstruction happens in a DAC (digital to analog converter) and then finally in the physical movements of the speaker itself

Reconstruction Filters
Normally, there is some sort of additional filtration that happens at the reconstruction phase In other words, the actual pixels on the monitor are not perfect squares of uniform color. Instead they will have some sort of color distribution Additional filtration happens in the human eye so that the grid of pixels appears to be a continuous image In audio, the perfect digital signal is filtered first by the analog electronic circuitry and then by the physical limitations of the speaker movement

Low Frequency Signals

Original signal

Point sampled at relatively high frequency

Reconstructed signal

High Frequency Signals

Original signal

Point sampled at relatively low frequency

Reconstructed signal

Regular Signals

Original repeating signal

Point sampled at relatively low frequency

Reconstructed signal repeating at incorrect frequency

Nyquist Frequency
Theoretically, in order to adequately reconstruct a signal of frequency x, the original signal must be sampled with a frequency of greater than 2x This is known as the Nyquist frequency or Nyquist limit However, this is assuming that we are doing a somewhat idealized sampling and reconstruction In practice, its probably a better idea to sample signals at a minimum of 4x

Aliasing Problems
Shimmering / Buzzing:
Rapid pixel color changes (flickering) caused by high detail textures or high detail geometry. Ultimately due to point sampling of high frequency color changes at low frequency pixel intervals

Stairstepping / Jaggies:
Noticeable stairstep edges on high contrast edges that are nearly horizontal or vertical. Due to point sampling of effectively infinite frequency color changes (step gradient at edge of triangle)

Moir patterns:
Strange concentric curve features that show up on regular patterns. Due to sampling of regular patterns on a regular pixel grid

Strobing:
Incorrect or discontinuous motion in fast moving animated objects. Due to low frequency sampling of regular motion in regular time intervals

Spatial / Temporal Aliasing

Aliasing shows up in a variety of forms, but usually those can be separated into either spatial or temporal aliasing Spatial aliasing refers to aliasing problems based on regular sampling in space. This usually implies device space, but we see other forms of spatial aliasing as well Temporal aliasing refers to aliasing problems based on regular sampling in time The antialiasing techniques used to fix these two things tend to be very different, although they are based on the same fundamental principles

Point Sampling
The aliasing problems weve seen are due to low frequency point sampling of high frequency information With point sampling, we sample the original signal at precise points (pixel centers, etc.) Is there a better way to sample continuous signals?

Edge Antialiasing

Supersampling
A more popular method (although less elegant) is supersampling With supersampling, we point sample the pixel at several locations and combine the results into the final pixel color For high quality rendering, it is not uncommon to use 16 or more samples per pixel, thus requiring the framebuffer and zbuffer to store 16 times as much data, and requiring potentially 16 times the work to generate the final image This is definitely a brute force approach, but is straightforward to implement and very powerful

Uniform Sampling
With uniform sampling, the pixel is divided into a uniform grid of subpixels Uniform supersampling should certainly generate better quality images than single point sampling It will filter out some high frequency information, but may still suffer from Moir problems with highly repetitive signals