CPS 511

Computer Graphics

-The creation, storage, manipulation and animation of geometric models and images

Interactive Computer Graphics

-Users that can control content, structure and appearance of objects(Models)

Computer Graphics (Model > Image)

-Create best possible tools for producing realistic images

Computer Vision (Image > Model)

-Extraction of 3D geometric model from 2D image

Computational Geometry (Model > Model)

-Solving basic geometric problems between

Image Processing (Image > Image)

-Perform series of image transformation

Applications of Computer Graphics

-Visualization

Scientific Visualizations

Medical Images

Statistical Data

3D Structures

-Computer Aided Design(CAD) and Engineering Analysis

Mechanical Parts

Building Designs

-Simulation

Flight/Medical simulators

Games

Robotics

Animated Movies

-Movies and Games

Graphics Overview

-Modeling

Mathematical or other representation of an object or process

-Rendering

Convert Model to pixels, assign colors to pixels

-Parts

1)Visible Surfaces

What is in front of what for a given view

2)Lighting/Shading

Simulate interaction of material and light to produce pixel color

-Animation

Move the objects and/or the camera and re-render the scene

Requires fast rendering (60 fps)

Object Modelling

-Captures the Salient Features (Data, Behavior) of the thing being modelled

Mathematical in nature (Attributes)

-Real Object or information

Some Geometry Inherent

Physical(Actual object)

Non-Physical(Function)

-Abstract Information

No inherent geometry, need to visualize

Organizational

Quantitative

Modelling Represented in Complex Shapes

-Triangle/Polygon Mesh

A Large collection of connected polygonal facets

Approximates an object's surface, for accuracy need many polygons

-Free-Form spline curve/surface

Using low-degree polynomial

-Composing Primitive Shapes

Ex. Cubes, Spheres, Cylinders

Often a hierarchy

Uses transformations or boolean operations

Creating Complex Geometric Models

-Dive and Conquer Approach

-Hierarchy of geometric components

-Reduction to primitives (Shapes)

Constructed as triangle/Polygon mesh

Hierarchical Diagram (Nail example)

-Object is analyzed and decomposed of primitive shapes

-Also called Scene Graphs

Composition of a Complex Geometric Model

-Geometric Primitives must be assembled to create objects

-Use Affine transformations(Translate, Rotate, Scale)

Rendering

-Given a scene and viewing parameters it produces an image

Rendering Paradigm

1)Object Space

-Rasterization

For each object, render - convert to pixels then color

Efficient pipeline architecture

2)Image Space

-Ray Tracing

For each screen pixel, determine color

More realistic images

Intense computation

Rendering Important sub-tasks

1)Rasterization

2)Visible Surface Algorithms

3)Lighting and Shading

Animation

-Baked Animation(Keyframing)

Interpolation between keyframes in a sequence

-Procedural Animation (Kinematics)

Create pose from joint angles

-Motion Capture Animation

-Physics-based Animation

Interactive Graphics Framework

-Graphics Library/Package between application and the graphics hardware

-Application program maps application objects to view images of those objects called in the library

Graphics Pipeline

-Fragment

-Part of the rasterized data that corresponds to one pixel in the displayed image

Shaders

-Can use those vertices and triangles to generate more geometry

-Fragment(Pixel) shaders run on every output fragment

-Allow for a huge amount of flexibility in rendering

Raster Displays and Framebuffer

-Displays image to a screen

-Image is stored in Framebuffer

-All modern displays are raster-based

-Pixels has two properties

1)Color

2)Position

-Colors are expressed in RGB components %/Hex

-Screen position is expressed in -coordinates

Framebuffer

-GPU memory region for storing screen contents

-Several Layers with values

1)Color buffer

2)Depth Buffer(z-buffer)

3)Stencil Buffer

4)Accumulation buffer

-Double Buffering for Smoother Motion (Animation)

-Temporal aliasing (Flickering)

Two copies of the framebuffer

1)Front - Read from and displayed

2)Back - Written to (Filled)

Image Formation

-Form images which are generally two dimensional using a process analogous to how images are formed by physical imaging systems

Elements of Image Formation

-Objects

-Viewer

-Light Sources

-Attributes that govern how light interacts with the object materials in the scene

Synthetic Camera Model

-Advantages

-Separation(Independence) of objects, viewer, light sources

-2D graphics is a special case of 3D graphics

-Leads to simple software API

-Leads to fast hardware implementation

Rendering Reality

-Photons come out of light sources

-Bounce around the scene, getting absorbed or redirected(Scattered as they hit objects)

Global VS Local illumination

-Cannot compute color or shade of each object independently as in the synthetic camera model

-Objects are blocked by light

-Light can reflect off objects to objects

-Objects might be translucent

Physical Approaches to image formation (Global)

-Backward Ray Tracing

-Follows rays of light from the center of the projection until they hit a light source or reflected, absorbed by other objects

-Can handle global effects

Multiple reflections

Shadows

Translucent objects

-Radiosity

-Computes amount of light energy transferred among surfaces

Slow but physically realistic for many materials

Ray Tracing

-Pros

More realistic

Can produce global lighting effects

More Simple

-Cons

More expensive

Require more memory and non local accesses

-Done in Real time

Rasterization

-Simplified approach to image formation

Process objects independently

-Pros

Fast parallel hardware implementation

Small memory footprint

-Cons

Triangles can overwrite each other

Shadows, reflections are more difficult

Vertex Processing

-Objects defined by vertices

-Work in the pipeline is converting vertices from one coordinate system to another

From Object (Model) Coordinates

To Camera Coordinates

To Clip Coordinates

Screen Coordinates

-Every change of Coordinate is equivalent to a matrix transformation

-Rendering in 3D is like taking a photo

Camera Analogy

-Modeling Transformation

Move Models(Objects) into virtual world (Scene)

-Viewing Transformation

Setup Tripod (Position and Orientation of the Camera)

Defines position and orientation

-Projection Transformation

Adjust the lens of the Camera

Defines the size of view volume

Control Perspective

-Viewport Transportation

Enlarge or reduce the physical photograph

Vertex Shading: Applying color to vertices

-Evaluate per-vertex lighting, compute vertex color

-Handle tessellation

-Projection: Convert Clip Coordinates

Process that combines the 3D camera view with the 3D objects to produce 2D images

Primitive Assembly

-Vertices must be collected into geometric objects before clipping and rasterization can happen

Clipping

-Objects that are not within the volume are "Clipped" out of the scene

-Rasterization

If objects are not clipped, rasterizer generates a set of "Fragments"

Fragments are assigned a color and depth value

Fragments are "Potential Pixels"

Might be displayed or not

Have a Location in frame buffer where color and depth are stored

Vertex Attributes of a triangle are interpolated by the rasterizer to determine values of fragment

Fragment Processing in a Fragment Shader

-Final fragment colors can be determined from:

Interpolation of assigned vertex color

From an image(Texture mapping

From blending with fragment colors from other triangle fragments

-Fragments may be blocked by other fragments closer to the camera

Visible surface determination (Hidden-surface removal)

Ex. Z-buffer

Parallelism

-Geometry processing, rasterization and fragment processing stages

-All vertices and pixels are independent at each stage and use little data

Open GL

-Software API that consists of many functions that allow you to talk to your graphics hardware

-Cross Platform

-Mid level, device-independent, portable graphics subroutine package

-2D/3D graphics, lover level primitives (polygons)

OpenGL Contents

-Functions that specify what we need to form an image

Objects

Viewer

Light Source

Materials

-Scene Description

-Geometry

Describe 3D objects, usually vertices and triangles

-Textures

Describe surface details, raster images

-Lights

Mathematical description of light sources(position etc)

-Camera

Position, Orientation, field of view (Zoom)

Object Specification

-Support a limited set of primitives including

Points (0D object)

Line segments (1D)

Polygons(2D)

Curved and surfaces

Quadrics

Parametric polynomials

-Defined through locations in space or vertices

Open GL State Machine

-Collection of attributes(or models) define the state of the machine

-Once defined attributes remained in effect until you changed them

-Can define an object with geometric primitives

-An attribute is any property that determines how a primitive is to be rendered(Color)

Open GL State

Two types of functions

1)Primitive Generating

2)State Changing

Primitive Generating(Triangles, line segments)

-Can cause output if primitive is visible

-How vertices are processed(Translated) and appearance of primitive(Color) are controlled by state

State Changing

-Transformation functions(Modeling, Viewing)

-Attributes functions

-Color Attribute

Set Color

-Polygon Attribute

Polygon drawn as points

-Geometric Transformation

Transformations matrix

Open GL Functions

-Glu - are utility functions

-Functions start with

gl

glut

glx - are for interfaces with X windows system

-Functions names indicate argument type and number

Endings with

F - floats

I - Ints

B - Bytes

Ub - unsigned bytes

V - array

Ex- glColor3f() - takes 3 floats

-Constant functions are written in CAPS

-GLUT_SINGLE

OpenGL Geometric Primitives

-Uses only a very small number of primitives

Points

Line segments

Polygons

Bitmaps/Images

-Polygon Types

gl_polygon

gl_Quads

gl_Triangles

gl_Triangle_Strip

gl_Quad_Strip

gl_triangle_fan

OpenGL Polygon Issues

-Will only display polygons correctly that are

Simple:Edges cannot cross

Convex: All points on line segment between two points in a polygon

Flat: All vertices are in the same plane

-Users program can check if above is true

Vertex Attributes

-Each vertex must be specified by at least a (x,y,z) position

-Normal vectors

-Color

-Texture Coordinates

Vertex - Other Attributes

-Part of the OpenGL state and determine the appearance of objects

Color

Size and Width

Stipple Pattern

-Polygon mode

Display as filled: solid color or stipple pattern

Display edges

Display vertices

OpenGL Shape Primitives

-Parametric

Cylinders

Spheres

Cones

Disks

Torus

RGB Color

-Each Color component is stored separately in the frame buffer

-8 bits per component in buffer

-glColor3F the color values ranges from 0.0(none) to 1.0(all) whereas in glColor3ub the values range from 0 to 255

-glColor3f(1,0,0) RGB

Drawing in OpenGL

-Simple way to draw primitives

-glBegin to glEnd

Ex.

glbegin()

-Specify Vertices and attributes

glNormal()

glVertex()

-Declare end

glEnd()

-Force execution

glFlush

Vertex Arrays

-Allows to specify vertex data using arrays and fewer function calls

-Must enable array

-Must specify data for array

-All other attributes have their own arrays

-3 ways to access the vertex array

glArrayElement - draw single vertex

glDrawArrays - draws a sequence of vertices

glDrawElements - draws a sequence of vertices based on an indexed array

-Index buffer contains offsets into vertex buffer

-Used to share vertices between triangles

-Also specifies rendering order

Interpolations of Vertex Colors

-Many attributes, including user-defined are interpolated during rasterization

Modelling Complex Objects

-Compose a complex object by putting its parts together with transformations

-Start with simple primitive shapes and define its local coordinate system then move it to the scene (Modeling transformation)

-Image is created by rendering process (Viewing and Projections operations)

Modeling > Viewing > Projection are each implemented with a transformation matrix

Transformation via Matrix

-All transformations are implemented using matrices

OpenGL Matrix Modes

-A sequence of transformations(modeling/viewing/projection) are multiplied together into a single matrix

-The matrix is called CTM(Current --Transformation Matrix) forms a part of the state of OpenGL

-There are two matrix modes in OpenGL

1)Modelview matrix = Modeling Matrix * Viewing Matrix

2)Projection Matrix

-glMatrixMode()

Used to set the mode

Default is ModelView

glMatrixMode(GL_PROJECTION)

glMatrixMode(GL_MODELVIEW)

OpenGL Camera: Viewing Transformation

-Default, OpenGL places a camera at the origin in the world coordinates pointed in the negative z direction

-In 3D apps

-gluLookAt() to set the the view (Set the camera)

-Viewing Transformations transforms object vertices from world coordinates to view (Camera/Eye Coordinates)

Projection Transformation

-Projection Matrix defines the type of projection(Orthographic or Perspective) and the view volume (Setting lens)

-Default is othographicand the viewing volume is a box centered at the origin

-glOrtho(Left,Right,Bottom,top,near,far

Near and far distances are measured from the camera position

-gluPerspective(fov,aspectRation,near,far)

fov:Field of View(degrees)

Basic OpenGl Program sequence

1)glutCreateWindow

Create window on screen

2)Decide World Coordinate Ranges

xmin/max, ymin/max, zmin/max

3)Use gluLookAt()

Set camera in the world

4)Use gluOrtho/gluPerspective

Define the part of the world is being looked at

5)Use glViewport()

Define the part of screen window will be used

6)Create objects/models and move them to the world

7)Draw the scene

glFlush()

gllSwapBuffers()

Viewports

-Don't have to use entire window for viewport

Values in pixels(Screen Coordinates)

GLUT Functions

-glutInit

-Allows applications to get command line arguments and initializes systems

-glutInitDisplayMode

-Request properties for the window (Rendering Context)

Color

-Properties

glutWindowSize - In pixels

glutWindowPosition - From top-left corner of display

glutCreateWindow - Create a window with a title

glutDisplayFunc - Display Callback

glutMainLoop - Enter Infinite Loop

Event Loop

-OpenGL programs define a display callback function

-The Display callback is executed whenever OpenGl decides the display must be refreshed

-The Main function ends with the program entering an event loop

Geometric Transformations

-Translations

-Scaling

-Rotations

Transformations Via Matrix

-Separate matrices also perform transformations for different stages of the graphics pipeline

-All multiplied to give overall transformation (CTM)

2D Translation

-Moves object without deformation

-Translate by adding to offsets to its coordinates to create new coordinates

-Apply the changes to each vertex

2D Rotation

-Rotate a point about the origin

-Positive angles are measured counterclockwise

2D Transformation

-Translation is a vector addition

-Scaling/Rotation are matrix - vector multiplication

Homogeneous Coordinates

-Write any point (x,y) = (wx,wy,w) = (xh,yh,w)

-Points are equal if(x,y,z) and (xh,yh,w) are multiples of each other

2,4,2 = 4,8,4

-W must be a non-zero

-Coordinates are same points in the Euclidean plane

-Represent 2D transformations as a 3x3 matrix

-Allows to calculate transformations

Composite Transformations

-Sequence of transformations

-Calculate composite transformation matrix than applying individual transformations

-Composite Two Dimensional Translation

-Apply Two successive translations T1 and T2

T1=T(T1x,T1y)

T2=T(T2x,T2y)

P' = T2 (T1P) = (T2T1)P

Composite 2D Rotations

Composite 2D Scaling

Order of Transformation Matters

-Basic Transformations (Transformation, Scaling) is about the Origin

-Use transformation sequence to achieve

Scaling from a fixed point

Rotation from a fixed point

1)Translate to Origin

2)Scale or Rotate

3)Inverse Translation

3D Geometric Transformation

-Matrices are now 4x4

-Rotation is about an axis

3D Rotation

-Rotates about an axis

-Can rotate from origin

-Rotate from any direction

-Every Rotation has the following properties

-Each row or column dotted with itself is 1

-Each row/column with a different row/column is zero

-A matrix with those properties are called orthonormal

-To rotate about an axis that is parallel to one of the primary coordinate axes

1)Translate object so that the rotation axis is parallel to the coordinate axis

2)Rotate to that axis

3)Translate the object so that the rotation axis is moved back to its original position

3D Rotation from an Arbitrary Axis

1)Translate object such that one end point of the rotation axis is at the origin

2)Rotate object until axis of rotation is aligned with one of the primary coordinate axes(z)

3)Perform required rotation of the object about the z axis

4)Apply the inverse of the transformations in 1 & 2 until axis of rotation is back to original orientation

OpenGL Matrix Stack

-glPushMatrix()

Copies the current modelview matrix and pushes the copy on the top of the stack

Top matrix is identical to the current modelview matrix

glPopMatrix

Removes the top matrix from the stack and makes it the current modelview matrix

glLoadIdentity() Identity Matrix

glPushMatrix() Saves Current Matrix

glPopMatrix() Return Current Matrix

Scene Graph

-How anything with a position and orientation is stored in graphics software

-A hierarchical tree of transformations rooted at the world frame

-Transforms for objects are multiplied together traversing down the tree

OpenGL Transformation ordering

1)Scale

2)Rotate

3)Translate

-----------------

glTranslate

glRotate

glScale

Viewing Transformation

-Converts points in the world coordinates to eye coordinates

-Redefines all objects in terms of the camera's coordinate system

Creating Eye Coordinates

-Translating the eye coordinates system so that the origin lines up with the world coordinate system

-Then need to rotate camera coordinate system so that the axis line up to the worlds

-Apply this translation to all points in the object (Now all eye coordinates)

-P(eye) = RTp(world) OR V-1 = T-1R-1

-V = RT (viewing transformation matrix)

Sequence of Steps in 2D

1)Establish a world coordinate system

2)Move objects into the world

3)Create camera view

-gluOrtho2D(L,R,B,T)

4)Viewing Transformations:Convert from world to eye(Camera) coordinates

Camera Analogy - Steps

1)Modeling Transformations

2)Viewing Transformations

3)Projection Transformation

4)Viewport Transformation

Set up the 3D camera: OpenGL

1)gluLookAt(x,y,z,x,y,z,V,V,V)

2)P=(x,y,z) "Look From" point

3)P(ref) = (x(ref),y(ref),z(ref)

4)V(x),V(y),V(z) camera 'up'

3D Viewing Transformation

-Transforms world coordinates to eye coordinates(camera or view coordinates)

-Similar to the 2D case (Redefine all objects in terms of eye coordinate system)

-Do this by finding a translation and rotation that aligns the eye coord. System

-Apply this transformation to all vertices of objects

Constructing an eye/camera coordinate system

-Specify the graphics program (gluLookAt()

1)Camera/Eye Position(World Coordinates)

2) A LookAt Point

3) A View up vector

-OpenGL begins by constructing a view plane normal vector N (Z positive axis)

Camera Orientation

-View up vector - Determines camera orientation

-Often choose world (Y (0,1,0) in gluLookAt

-Choose anything not parallel to N

-Up Vector initially is the y axis

3D Viewing Transformations (World To Eye)

1)Translate the camera to origin / to the origin of the world coordinate system

2)Apply rotations to align the X(eye),Y(eye),Z(eye) axis to the world X(w),Y(w),Z(w)

- P(eye) = RTP(w)

- V = RT

3D Projections

-3D object points must be projected onto a 2D view plane

Parallel Projection

-3D points are transferred to view plane along parallel lines (Orthographic)

Perspective Projection

-3D points are transferred to view plane along lines that converge to a point(Center of Projection COP) behind the view plane

Parallel Projection

-Preserves relative proportions of objects

-Size of projected object independent of distance to view plane

Orthographic

-Project along lines that are perpendicular to view the plane

Oblique

-Project lines that are at an oblique angle to view the plane

Perspective Projection

-Does not preserve relative proportions of objects

-Size of projected object dependent on distance to view plane

-Approximates the projection formed by the real world

-Provides depth cue

Orthographic Projection Matrix

-Redesign P to

1)Preserve Depth

2)Allow for easy clipping

-glOrtho defines a view volume and creates a projection matrix P

-CTM x P

View Volume Normalization

-Simplest clipping volume is a cube with center at the origin and -1

Perspective Projection

-Increasing W make things small(getting further away) in the 4x4 matrix

-Homogeneous coordinates as defining a projective space

-Homogeneous coordinates allow us to capture perspective projection using matrix multiplication

-Exhibits foreshortening distant objects appear smaller

-COP also called projection reference point

-Projection plane is also called the view plane

-Use of triangles to determine the ratio of how big or small an object should be

3-D Euclidean space

-(x/(z/d), y/(z/d) , d) where d = distance

-Is a transformation

-Perspective transformation matrix "prepares" a point for projection

Perspective Projection Matrix

-Orthographic projection needs to redesign matrix P to allow simple clipping

-Normalize the view volume to the same canonical view volume

-Use the w to store some sort of z value(depth value)

-Want to transform view frustum (truncated pyramid) into a cube then form the projected 2D image as in ortho projection

-The projection transformation matrix used a warping of 3D space

-Preserves straightness and flatness

-Lines transform into lines, planes into planes

Perspective Projection - Aspect Ratio

-View volume normalization will convert all objects into intermediate shapes

-Truncated pyramid has a ration less or greater than 1 but the cube has exactly 1

-Warping introduces x,y distortion but will be eliminated in the viewport transformation

-After clipping is performed, the 4D coordinates are divided by the parameter w

OpenGL Perspective Projection Matrix

-General (asymmetric) frustum view volume is converted(normalized) to the canonical cube in 3 steps

1)shear to create a symmetric frustum and center the frustum centerline along z axis

-H is shear matrix

2)Depth-dependent scaling to normalize it to 2x2x2 cube

-Where S is scale matrix

3)Z translation to center the frustum at the origin and z reflection

-Part of matrix N

P=NSH

P(clip) = PVMp(modelling transformation)