computer graphics n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Computer Graphics PowerPoint Presentation
Download Presentation
Computer Graphics

Loading in 2 Seconds...

play fullscreen
1 / 50

Computer Graphics - PowerPoint PPT Presentation


  • 145 Views
  • Uploaded on

Computer Graphics. Rendering Geometric Primitives Reading: HB4, HB8-1 to HB8-6, HK9.7, 11. Last updated on 06-02-2012. Rendering. Goal transform computer models into images may or may not be photo-realistic interactive rendering fast, but limited quality

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Computer Graphics


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
computer graphics

Computer Graphics

Rendering Geometric Primitives

Reading: HB4, HB8-1 to HB8-6, HK9.7, 11

Last updated on 06-02-2012

rendering
Rendering
  • Goal
    • transform computer models into images
    • may or may not be photo-realistic
  • interactive rendering
    • fast, but limited quality
    • roughly follows a fixed patterns of operations
      • rendering pipeline
  • offline rendering
    • ray tracing
    • global illumination
rendering1
Rendering
  • Tasks that need to be performed
  • project all 3D geometry onto the image plane
      • geometric transformations
    • determine which primitives or parts of primitives are visible
      • hidden surface removal
    • determine which pixels a geometric primitive covers
      • scan conversion
    • compute the color of every visible surface point
      • lighting, shading, texture mapping
rendering pipeline
Rendering Pipeline
  • What is the pipeline?
    • abstract model for sequence of operations to transform geometric model into digital image
    • abstraction of the way graphics hardware works
    • underlying model for application programming interfaces (APIs) that allow programming of graphics hardware
      • OpenGL
      • Direct 3D
  • Actual implementation details of rendering pipeline will vary
rendering pipeline1

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Frame-

Buffer

Texturing

Scan

Conversion

Depth

Test

Blending

Rendering Pipeline
geometry database
Geometry Database
  • Geometry database
    • Application-specific data structure for holding geometric information
    • Depends on specific needs of application
      • triangle, points, mesh with connectivity information, curved surface

Geometry

Database

model view transformation
Model/View Transformation
  • Modeling Transformation
    • Map all geometric objects from local coordinate system into world coordinates
  • Viewing transformation
    • Map all geometry from world coordinates into camera coordinates

Geometry

Database

Model/View

Transform.

lighting
Lighting
  • Lighting
    • Compute brightness based on property of material and light position(s)
    • Computation is performed per-vertex

Geometry

Database

Model/View

Transform.

Lighting

perspective transformation
Perspective Transformation
  • Perspective Transformation
    • Projecting the geometry onto the image plane
    • Projective transformations and model/view transformations can all be expressed with 4x4 matrix operations

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

clipping
Clipping
  • Clipping
    • Removal of parts of the geometry that fall outside the visible screen or window region
    • May require re-tessellation of geometry

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

scan conversion
Scan Conversion
  • Scan Conversion
    • Turn 2D drawing primitives (lines, polygons etc.) into individual pixels
    • Interpolate color across primitive
    • Generate discrete fragments

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Scan

Conversion

texture mapping
Texture Mapping
  • Texture Mapping
    • “Gluing images onto geometry”
    • Color of every fragment is altered by looking up a new color value from an image

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Texturing

Scan

Conversion

depth test
Depth Test

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Texturing

Scan

Conversion

Depth

Test

  • Depth Test
    • Remove parts of geometry hidden behind other geometric objects
    • Perform on every individual fragment
blending
Blending

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Texturing

Scan

Conversion

Depth

Test

Blending

  • Blending
    • Final image: write fragments to pixels
    • Draw from farthest to nearest
    • No blending – replace previous color
    • Blending: combine new & old values with arithmetic operations
frame buffer

Geometry

Database

Model/View

Transform.

Perspective

Transform.

Lighting

Clipping

Frame-

Buffer

Texturing

Scan

Conversion

Depth

Test

Blending

Frame Buffer
  • Frame Buffer
    • Video memory on graphics board that holds image
    • Double-buffering: two separate buffers
      • Draw into one while displaying other, then swap to avoid flicker
pipeline advantages
Pipeline Advantages
  • Modularity: logical separation of different components
  • Easy to parallelize
      • Earlier stages can already work on new data while later stages still work with previous data
      • Similar to pipelining in modern CPUs
      • But much more aggressive parallelization possible (special purpose hardware!)
      • Important for hardware implementations
  • Only local knowledge of the scene is necessary
pipeline disadvantages
Pipeline Disadvantages
  • Limited flexibility
  • Some algorithms would require different ordering of pipeline stages
      • hard to achieve while still preserving compatibility
  • Only local knowledge of scene is available
      • shadows, global illumination difficult
3d scene representation
3D Scene Representation
  • Scene is usually approximated by 3D primitives
    • Point
    • Line segment
    • Polygon
    • Polyhedron
    • Cylinder
    • Curved surface
    • Solid object
    • etc.
opengl attributes of graphics primitives
OpenGLAttributes of Graphics Primitives
  • Color, antialiasing, …
  • Point attributes,
  • Line attributes,
  • Curve attributes,
  • Character attributes
opengl attributes of graphics primitives1
OpenGLAttributes of Graphics Primitives
  • Attributes are any parameters that affect the way graphic primitives are displayed.
  • Basic attributes
    • Color
    • Size
    • Style
    • Fill patterns
opengl attributes of graphics primitives2
OpenGLAttributes of Graphics Primitives
  • Attribute parameter
    • A parameter that affects the way a primitive is to be displayed, ex: color, size.
  • State system / State machine
    • A graphics system that maintains a list for the current values of attributes
opengl state variables
OpenGLState Variables
  • All OpenGL state parameters have default values.
  • Set the state once, remains until overwritten
  • Changing the attribute settings
    • Only affects those primitives that are specified after the OpenGL state is changed
      • Lines: blue or orange, dotted or dashed, and fat or thin.
  • State parameters can have more than two states, e.g., colors, styles, etc.
opengl color gray scale

Stored Color Values in Frame Buffer

Displayed Color

Red

GREEN

Blue

Black

Blue

Green

Cyan

Red

Magenta

Yellow

White

0

1

2

3

4

5

6

7

0

0

0

0

1

1

1

1

0

0

1

1

0

0

1

1

0

1

0

1

0

1

0

1

OpenGLColor & Gray Scale
  • Color is a common attribute for all primitives
  • Color information can be stored in two ways

1. RGB color codes

2. Color table

opengl color gray scale1
OpenGLColor & Gray Scale
  • Color is a common attribute for all primitives
  • Color information can be stored in two ways
    • 1. RGB color codes
    • 2. Color table
opengl color functions
OpenGLColor Functions

Set color display mode

1. OpenGL RGB and RGBA mode

2. OpenGL Color-Index Mode

glutInitDisplayMode ( GLUT_SINGLE | GLUT_RGB )

GLUT_RGBA

GLUT_INDEX

glColor* (colorComponents);

// Select current color

glIndexi(196);

glutSetColor (index, red, green, blue);

// Select current color

// Specify color into a table

opengl color functions1

Source

OpenGLColor Functions

OpenGL color blending

    • Combining the color of overlapping objects
    • Blending an object with the background

Color-blending function

Destination object: Current object in the frame buffer

  • Source object: Other object in the frame buffer

glEnable(GL_BLEND);

glDisable(GL_BLEND);

Destination

 Blending methods can be performed only in RGB or RGBA mode.

opengl color functions2

Source

OpenGLColor Functions

Blending Factors

  • glColor4f(R, G, B, A), A is a blending factor
  • Source color components are (Rs, Gs, Bs, As)
  • Destination color components are (Rd, Gd, Bd, Ad)
  • Source blending factors are (Sr, Sg, Sb, Sa)
  • Destination blending factors are (Dr, Dg, Db, Da)
  • The new blending color that is then loaded into the frame buffer is calculated as:
  • (SrRs+DrRd, SrGs+DgGd, SbBs+DbBd, SaAs+DaAd)

Destination

opengl color functions3

Source

OpenGLColor Functions

glBlendFunc (sFactor, dFactor);

Default: GL_ONE GL_ZERO

(1.0, 1.0, 1.0, 1.0) (0.0, 0.0, 0.0, 0.0)

Ex. glBlendFunc(GL_SRC_ALPHA,GL_ONE);

Ex: implement it by using glColor4f (0.8, 0.2, 0.2, 0.4);

Destination

opengl example blending 1 3
OpenGLExample: Blending 1/3

#include <GL/glut.h>

void init (void)

{

glEnable(GL_BLEND);

glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // (sFactor, dFactor)

glClearColor (1.0, 1.0, 1.0, 0.0); //(red, green, blue, alpha)

}

opengl example blending 2 3
OpenGLExample: Blending 2/3

void display(void)

{

glClear (GL_COLOR_BUFFER_BIT);

glBegin(GL_TRIANGLES); // Draw triangle

glColor4f(1.0, 0.0, 0.0, 0.75);

glVertex3f(0, -0.5, 0.0);

glVertex3f(0.5, -0.5, 0.0);

glVertex3f(0, 1, 0.0);

glEnd();

glBegin(GL_POLYGON); // Draw rectangle

glColor4f(0.0, 0.0, 1.0, 0.75);

glVertex3f (-0.6, -0.6, 0);

glVertex3f (0.6, -0.6, 0);

glVertex3f (0.6, 0.6, 0);

glVertex3f (-0.6, 0.6, 0);

glEnd();

glFlush ();

}

opengl example blending 3 3
OpenGLExample: Blending 3/3

int main(intargc, char** argv)

{

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

glutInitWindowSize (600, 400);

glutInitWindowPosition (200, 100);

glutCreateWindow ("Hello Students");

init();

glutDisplayFunc(display);

glutMainLoop();

return 0;

}

opengl home work
OpenGLHome Work

Plot red, green & blue circles overlapping as shown in figure.

Reading: HB4, RB

opengl point attributes functions
OpenGLPoint Attributes & Functions
  • Basic attributes
    • Color
    • Size
    • A multiple of the pixel size (a square)
    • glPointSize (size); // size is the number of pixels
opengl line attributes functions
OpenGLLine Attributes & Functions
  • Basic attributes
    • Color
    • Width
    • glLineWidth(width);
    • Style
      • glEnable(GL_LINE_STIPPLE);
      • glLineStippel(repeatFactor, pattern);
  • Other attributes
    • Shade
      • glShadeModel(GL_SMOOTH);

How many times each bit is to be repeat

16-bit integer

Default: 0xFFFF Solid line

Lower-order bits are applied first

opengl line attributes functions1

dashed line

Inter-dash

spacing

OpenGLLine Attributes & Functions

Pixel mask

  • A pattern of binary digits
  • For example, 11111000
opengl fill area attribute functions
OpenGLFill-Area Attribute Functions
  • 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.
opengl example
OpenGLExample

void init(void)

{

glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_SMOOTH)}

void triangle(void)

{

glBegin (GL_TRIANGLES);

glColor3f (1.0, 0.0, 0.0);

glVertex2f (5.0, 5.0);

glColor3f (0.0, 1.0, 0.0);

glVertex2f (25.0, 5.0);

glColor3f (0.0, 0.0, 1.0);

glVertex2f (5.0, 25.0);

glEnd();

}

opengl polygon stippling1
OpenGLPolygon Stippling

byte fly[] = {

(byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,

(byte) 0x03, (byte) 0x80, (byte) 0x01, (byte) 0xC0, (byte) 0x06, (byte) 0xC0, (byte) 0x03, (byte) 0x60,

(byte) 0x04, (byte) 0x60, (byte) 0x06, (byte) 0x20, (byte) 0x04, (byte) 0x30, (byte) 0x0C, (byte) 0x20,

(byte) 0x04, (byte) 0x18, (byte) 0x18, (byte) 0x20, (byte) 0x04, (byte) 0x0C, (byte) 0x30, (byte) 0x20,

(byte) 0x04, (byte) 0x06, (byte) 0x60, (byte) 0x20, (byte) 0x44, (byte) 0x03, (byte) 0xC0, (byte) 0x22,

(byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22,

(byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22,

(byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22,

(byte) 0x66, (byte) 0x01, (byte) 0x80, (byte) 0x66, (byte) 0x33, (byte) 0x01, (byte) 0x80, (byte) 0xCC,

(byte) 0x19, (byte) 0x81, (byte) 0x81, (byte) 0x98, (byte) 0x0C, (byte) 0xC1, (byte) 0x83, (byte) 0x30,

(byte) 0x07, (byte) 0xe1, (byte) 0x87, (byte) 0xe0, (byte) 0x03, (byte) 0x3f, (byte) 0xfc, (byte) 0xc0,

(byte) 0x03, (byte) 0x31, (byte) 0x8c, (byte) 0xc0, (byte) 0x03, (byte) 0x33, (byte) 0xcc, (byte) 0xc0,

(byte) 0x06, (byte) 0x64, (byte) 0x26, (byte) 0x60, (byte) 0x0c, (byte) 0xcc, (byte) 0x33, (byte) 0x30,

(byte) 0x18, (byte) 0xcc, (byte) 0x33, (byte) 0x18, (byte) 0x10, (byte) 0xc4, (byte) 0x23, (byte) 0x08,

(byte) 0x10, (byte) 0x63, (byte) 0xC6, (byte) 0x08, (byte) 0x10, (byte) 0x30, (byte) 0x0c, (byte) 0x08,

(byte) 0x10, (byte) 0x18, (byte) 0x18, (byte) 0x08, (byte) 0x10, (byte) 0x00, (byte) 0x00, (byte) 0x08

};

rendering2
Rendering
  • Generate an image from geometric primitives

Rendering

Geometric

Primitives

Raster

Image

3d rendering example
3D Rendering Example

What issues must be addressed by a 3D rendering system?

opengl 3d primitives
OpenGL 3D Primitives
  • Cube
    • glutWireCube(GLdouble size)
    • size = length of a side
  • Sphere
    • glutWireSphere(GLdouble radius, GLintnSlices, GLintnStacks)
    • Approximated by polygonal faces
    • nSlices = # of polygons around z-axis
    • nStacks = # of bands along z-axis

There are solid counterparts of the wire objects

opengl 3d primitives1
OpenGL 3D Primitives
  • Regular Polyhedron
  • Tetrahedron (4 sided)
    • glutWireTetrahedron()
  • Hexahedron (6 sided)
    • glutWireHexahedron()
  • Octahedron (8 sided)
    • glutWireOctahedron()
  • Dodecahedron (12 sided)
    • glutWireDodecahedron()
  • Icosahedron (20 sided)
    • glutWireIcosahedron()

Display with center at the origin and with radius (distance from the center of polyhedron to any vertex) equal to Sqrt(3)

opengl 3d primitives2
OpenGL 3D Primitives
  • Cone
    • glutWireCone(GLdoublebaseRad, GLdouble height, GLintnSlices, GLintnStacks)
    • Axis coincides with the z-axis
    • Base rests on xy-plane and extends to +ve z = height
    • baseRad: radius at z = 0
    • nSlices: The number of subdivisions around the z axis.
    • nStacks: The number of subdivisions along the z axis.
opengl 3d primitives3
OpenGL 3D Primitives
  • Torus
    • glutWireTorus(GLdoubleinRad, GLdoubleoutRad, GLintnSlices, GLintnStacks)
  • Approximated by polygonal faces
  • Teapots
  • glutWireTeapot(GLdouble size)
things to do
Things to do

OpenGL practice: HB 2.9

references
References
  • http://www.ugrad.cs.ubc.ca/~cs314/
  • http://faculty.cs.tamu.edu/schaefer/teaching/441_Spring2012/index.html
  • http://faculty.cs.tamu.edu/schaefer/teaching/441_Spring2012/index.html
  • http://www.ugrad.cs.ubc.ca/~cs314/Vjan2007/