2/28/2016 cs 551 / 645: introductory computer graphics framebuffer mathematical foundations the...

05/08/23

CS 551 / 645: Introductory Computer Graphics

FramebufferMathematical Foundations

The Rendering Pipeline

05/08/23

Organization

Class List ITC accounts Class web page is up Assignment 1 goes out on Thursday Read OGLPG Chapter 1 for Thursday

05/08/23

Basic DefinitionsRaster: A rectangular array of points or dots.Pixel (Pel): One dot or picture element of the rasterScan line: A row of pixels

Video raster devices display an image by sequentially drawing out the pixels of the scan lines that form the raster.

05/08/23

Frame Buffers

A frame buffer may be thought of as computer memory organized as a two-dimensional array with each (x,y) addressable location corresponding to one pixel.

Bit Planes or Bit Depth is the number of bits corresponding to each pixel.

A typical frame buffer resolution might be

640 x 480 x 81280 x 1024 x 81280 x 1024 x 24

05/08/23

1-Bit Memory, Monochrome Display (Bitmap Display)

Electron Gun

1 bit 2 levels

05/08/23

3-Bit Color Display

3

red

greenblue

COLOR: black red green blue yellow cyan magenta white

R G B

0 0 0

1 0 0

0 1 0

0 0 1

1 1 0

0 1 1

1 0 1

1 1 1

05/08/23

True Color Display

Green

Red

Blue

8

8

8

24 bitplanes, 8 bits per color gun.224 = 16,777,216

05/08/23

Color Map Look-Up Tables

Extends the number of colors that can be displayed by a given number of bit-planes.

67100110100001

0

67

255

10011010 0001

R G B

REDGREENBLUE

Pixel displayedat x', y'

Pixel inbit mapat x', y'

0 x0

y

xmax

maxy

Frame buffer Look-up table Display

05/08/23

Pseudo color

0123

254255

RED GREEN BLUE

256 colors chosen from a palette of 16,777,216.

Each entry in the color map LUT can be user defined.

28 x 24 Color Map LUT

05/08/23

Display processor

Specialized hardware to assist in scan converting output primitives into the frame buffer.

Fundamental difference among display systems is how much the display processor does versus how much must be done by the graphics subroutine package executing on the general-purpose CPU.

Now often called graphics accelerator

05/08/23

Mathematical Foundations

FvD appendix gives good review I’ll give a brief, informal review of some of the

mathematical tools we’ll employ– Geometry (2D, 3D)– Trigonometry– Vector spaces

Points, vectors, and coordinates

– Dot and cross products– Linear transforms and matrices

05/08/23

2D Geometry

Know your high school geometry:– Total angle around a circle is 360° or 2π radians– When two lines cross:

Opposite angles are equivalent Angles along line sum to 180°

– Similar triangles: All corresponding angles are equivalent

05/08/23

Trigonometry

Sine: “opposite over hypotenuse” Cosine: “adjacent over hypotenuse” Tangent: “opposite over adjacent” Unit circle definitions:

– sin () = x– cos () = y– tan () = x/y– Etc…

(x, y)

05/08/23

Slope-intercept Line Equation

Slope = m = rise / runSlope = (y - y1) / (x - x1) = (y2 - y1) / (x2 - x1)Solve for y:y = [(y2 - y1)/(x2 - x1)]x + [-(y2-y1)/(x2 - x1)]x1 + y1

or: y = mx + b

x

y

P2 = (x2, y2)

P1 = (x1, y1)

P = (x, y)

05/08/23

Parametric Line Equation

Given points P1 = (x1, y1) and P2 = (x2, y2)x = x1 + t(x2 - x1)y = y1 + t(y2 - y1)

When:– t=0, we get (x1, y1)– t=1, we get (x2, y2)– (0<t<1), we get points

on the segment between(x1, y1) and (x2, y2)

x

y

P2 = (x2, y2)

P1 = (x1, y1)

05/08/23

Other helpful formulas

Length = sqrt (x2 - x1)2 + (y2 - y1)2

Midpoint, p2, between p1 and p3– p2 = ((x1 + x3) / 2, (y1 + y3) / 2))

Two lines are perpendicular if:– M1 = -1/M2– cosine of the angle between them is 0

05/08/23

3D Geometry

To model, animate, and render 3D scenes, we must specify:– Location– Displacement from arbitrary locations– Orientation

05/08/23

Vector Spaces

Two types of elements:– Scalars (real numbers): … – Vectors (n-tuples): u, v, w, …

Supports two operations:– Addition operation u + v, with:

Identity 0 v + 0 = v Inverse - v + (-v) = 0

– Scalar multiplication: Distributive rule:(u + v) = (u) + (v)

( + )u = u + u

05/08/23

Vector Spaces

A linear combination of vectors results in a new vector:

v = 1v1 + 2v2 + … + nvn

If the only set of scalars such that 1v1 + 2v2 + … + nvn = 0

is 1 = 2 = … = 3 = 0 then we say the vectors are linearly independent The dimension of a space is the greatest number of linearly

independent vectors possible in a vector set For a vector space of dimension n, any set of n linearly

independent vectors form a basis

05/08/23

Vector Spaces: A Familiar Example Our common notion of vectors in a 2D plane

is (you guessed it) a vector space:– Vectors are “arrows” rooted at the origin– Scalar multiplication “streches” the arrow, changing

its length (magnitude) but not its direction– Addition uses the “trapezoid rule”:

u+vy

xu

v

05/08/23

Vector Spaces: Basis Vectors

Given a basis for a vector space:– Each vector in the space is a unique linear

combination of the basis vectors– The coordinates of a vector are the scalars from

this linear combination– Best-known example: Cartesian coordinates– Note that a given vector v will have different

coordinates for different bases

05/08/23

Vectors And Points

We commonly use vectors to represent:– Points in space (i.e., location)– Displacements from point to point– Direction (i.e., orientation)

05/08/23

Points

Points support these operations– Point-point subtraction: Q - P = v

Result is a vector pointing from P to Q– Vector-point addition: P + v = Q

Result is a new point

– Note that the addition of two points is not defined

P

Q

v

05/08/23

Dot Product

The dot product or, more generally, inner product of two vectors is a scalar:

v1 • v2 = x1x2 + y1y2 + z1z2 (in 3D) Useful for many purposes

– Computing the length of a vector: length(v) = sqrt(v • v)

– Normalizing a vector, making it unit-length– Computing the angle between two vectors:

u • v = |u| |v| cos(θ)

– Checking two vectors for orthogonality– Projecting one vector onto another

θu

v

05/08/23

Cross Product

The cross product or vector product of two vectors is a vector:

The cross product of two vectors is orthogonal to both

Right-hand rule dictates direction of cross product

1221

1221

1221

21 )(y x y xz x z x

z y z yvv

05/08/23

Linear Transformations

A linear transformation: – Maps one vector to another– Preserves linear combinations

Thus behavior of linear transformation is completely determined by what it does to a basis

Turns out any linear transform can be represented by a matrix

05/08/23

Matrices

By convention, matrix element Mrc is located at row r and column c:

By (OpenGL) convention, vectors are columns:

mnm2m1

2n2221

1n1211

MMM

MMMMMM

M

3

2

vvv

v1

05/08/23

Matrices

Matrix-vector multiplication applies a linear transformation to a vector:

Recall how to do matrix multiplication

z

y

x

vvv

MMMMMMMMM

vM333231

232221

131211

05/08/23

Matrix Transformations

A sequence or composition of linear transformations corresponds to the product of the corresponding matrices– Note: the matrices to the right affect vector first– Note: order of matrices matters!

The identity matrix I has no effect in multiplication

Some (not all) matrices have an inverse: vvMM 1

05/08/23

The Rendering Pipeline: A Whirlwind Tour

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

The Display You Know

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

The Framebuffer You Know

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

The Rendering Pipeline

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

2-D Rendering: Rasterization(Coming Soon)

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

The Rendering Pipeline: 3-D

Transform

Illuminate

Transform

Clip

Project

Rasterize

Model & CameraModel & CameraParametersParameters Rendering PipelineRendering Pipeline FramebufferFramebuffer DisplayDisplay

05/08/23

The Rendering Pipeline: 3-D

ModelingTransforms

Scene graphObject geometry

LightingCalculations

ViewingTransform

Clipping

ProjectionTransform

Result:Result:• All vertices of scene in shared 3-D “world” coordinate All vertices of scene in shared 3-D “world” coordinate systemsystem

• Vertices shaded according to lighting modelVertices shaded according to lighting model

• Scene vertices in 3-D “view” or “camera” coordinate Scene vertices in 3-D “view” or “camera” coordinate systemsystem

• Exactly those vertices & portions of polygons in view Exactly those vertices & portions of polygons in view frustumfrustum

• 2-D screen coordinates of clipped vertices2-D screen coordinates of clipped vertices

05/08/23

The Rendering Pipeline: 3-D

Scene graphObject geometry

LightingCalculations

Clipping

Result:Result:• All vertices of scene in shared 3-D “world” coordinate All vertices of scene in shared 3-D “world” coordinate systemsystem

• Vertices shaded according to lighting modelVertices shaded according to lighting model

• Scene vertices in 3-D “view” or “camera” coordinate Scene vertices in 3-D “view” or “camera” coordinate systemsystem

• Exactly those vertices & portions of polygons in view Exactly those vertices & portions of polygons in view frustumfrustum

• 2-D screen coordinates of clipped vertices2-D screen coordinates of clipped vertices

ModelingTransforms

ViewingTransform

ProjectionTransform

05/08/23

Rendering: Transformations

So far, discussion has been in screen space But model is stored in model space

(a.k.a. object space or world space) Three sets of geometric transformations:

– Modeling transforms– Viewing transforms– Projection transforms

05/08/23

Rendering: Transformations

Modeling transforms– Size, place, scale, and rotate objects and parts of

the model w.r.t. each other– Object coordinates world coordinates

Z

X

Y

X

Z

Y

05/08/23

Rendering: Transformations

Viewing transform– Rotate & translate the world to lie directly in front of

the camera Typically place camera at origin Typically looking down -Z axis

– World coordinates view coordinates

05/08/23

Rendering: Transformations

Projection transform– Apply perspective foreshortening

Distant = small: the pinhole camera model

– View coordinates screen coordinates

05/08/23

Rendering: Transformations

All these transformations involve shifting coordinate systems (i.e., basis sets)

That’s what matrices do… Represent coordinates as vectors, transforms

as matrices

Multiply matrices = concatenate transforms!

YX

YX

cossinsincos

05/08/23

The Rendering Pipeline: 3-D

ModelingTransforms

Scene graphObject geometry

LightingCalculations

ViewingTransform

Clipping

ProjectionTransform

Result:Result:• All vertices of scene in shared 3-D “world” coordinate All vertices of scene in shared 3-D “world” coordinate systemsystem

• Vertices shaded according to lighting modelVertices shaded according to lighting model

• Scene vertices in 3-D “view” or “camera” coordinate Scene vertices in 3-D “view” or “camera” coordinate systemsystem

• Exactly those vertices & portions of polygons in view Exactly those vertices & portions of polygons in view frustumfrustum

• 2-D screen coordinates of clipped vertices2-D screen coordinates of clipped vertices

05/08/23

Rendering: Lighting

Illuminating a scene: coloring pixels according to some approximation of lighting– Global illumination: solves for lighting of the whole

scene at once– Local illumination: local approximation, typically

lighting each polygon separately Interactive graphics (e.g., hardware) does

only local illumination at run time

05/08/23

The Rendering Pipeline: 3-D

ModelingTransforms

Scene graphObject geometry

LightingCalculations

ViewingTransform

Clipping

ProjectionTransform

Result:Result:• All vertices of scene in shared 3-D “world” coordinate All vertices of scene in shared 3-D “world” coordinate systemsystem

• Vertices shaded according to lighting modelVertices shaded according to lighting model

• Scene vertices in 3-D “view” or “camera” coordinate Scene vertices in 3-D “view” or “camera” coordinate systemsystem

• Exactly those vertices & portions of polygons in view Exactly those vertices & portions of polygons in view frustumfrustum

• 2-D screen coordinates of clipped vertices2-D screen coordinates of clipped vertices

05/08/23

Rendering: Clipping

Clipping a 3-D primitive returns its intersection with the view frustum:

See Foley & van Dam section 19.1

05/08/23

Rendering: Clipping

Clipping is tricky!

In: 3 verticesIn: 3 verticesOut: 6 verticesOut: 6 verticesClip

Clip In: 1 polygonIn: 1 polygonOut: 2 polygonsOut: 2 polygons

05/08/23

The End

Next: Basic OpenGL