Rendering and rasterization
1 / 54

Rendering and Rasterization - PowerPoint PPT Presentation

  • Updated On :

Rendering and Rasterization. Lars M. Bishop ([email protected]). Rendering Overview . Owing to time pressures, we will only cover the basic concepts of rendering Designed to be a high-level overview to help you understand other references

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

PowerPoint Slideshow about 'Rendering and Rasterization' - niveditha

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
Rendering and rasterization l.jpg

Rendering and Rasterization

Lars M. Bishop ([email protected])

Rendering overview l.jpg
Rendering Overview

  • Owing to time pressures, we will only cover the basic concepts of rendering

  • Designed to be a high-level overview to help you understand other references

  • Details of each stage may be found in the references at the end of the section

  • No OpenGL/D3D specifics will be given

Essential Math for Games

Rendering the last step l.jpg
Rendering: The Last Step

  • The final goal is drawing to the screen

  • Drawing involves creating a digital image of the projected scene

  • Involves assigning colors to every pixel on the screen

  • This may be done by:

    • Dedicated hardware (console, modern PC)

    • Hand-optimized software (cell phone, old PC)

Essential Math for Games

Destination the framebuffer l.jpg
Destination: The Framebuffer

  • We store the rendered image in the framebuffer

    • 2D digital image (grid of pixels)

    • Generally RGB(A)

  • The graphics hardware reads these color values out to the screen and displays them to the user

Essential Math for Games

Top level steps l.jpg
Top-level Steps

We have a few steps remaining

  • Tessellation: How do we represent the surfaces of objects?

  • Shading: How do we assign colors to points on these surfaces?

  • Rasterization: How do we color pixels based on the shaded geometry?

Essential Math for Games

Representing surfaces points l.jpg
Representing Surfaces: Points

  • The geometry pipeline leaves us with:

    • Points in 2D screen (pixel) space (xs, ys)

    • Per-point depth value (zndc)

  • We could render these points directly by coloring the pixel containing each point

  • If we draw enough of these points, maybe we could represent objects with them

    • But that could take millions of points (or more)

Essential Math for Games

Representing surfaces line segments l.jpg
Representing Surfaces: Line Segments

  • Could connect pairs of points with line segments

    • Draw lines in the framebuffer, just like a 2D drafting program

  • This is called wireframe rendering

    • Useful in engineering and app debugging

    • Not very realistic

  • But the idea is good – use sets of vertices to define higher-level primitives

Essential Math for Games

Representing surfaces triangles l.jpg
Representing Surfaces: Triangles

  • We saw earlier that three points define a triangle

  • Triangles are planar surfaces, bounded by three edges

  • In real-time 3D, we use triangles to join together discrete points into surfaces

Essential Math for Games

A simple cube l.jpg
A Simple Cube

Cube represented by 8 points

(trust us)

Cube represented by triangles

(defined by 8 points)

Essential Math for Games

The power of triangles l.jpg
The Power of Triangles

  • Flexible

    • We can approximate a wide range of surfaces using sets of triangles

  • Tunable

    • A smooth surface can be approximated by more or fewer triangles

    • Allows us to trade off speed and accuracy

  • Simple but Effective

    • We already know how to transform and project the three vertices that define a triangle

Essential Math for Games

Vertices heavy points l.jpg
Vertices – “Heavy” Points

  • As we will see, we often need to store additional data at each distinct point that define our triangles

  • We call these data structures vertices

  • Vertices provide a way of storing the added values we need to compute the color of the surface while rendering

Essential Math for Games

Common per vertex values l.jpg
Common Per-vertex Values

  • Position

    • The “points” we’ve been transforming

  • Color

    • The color of the surface at/near the point

  • Normal vector

    • A vector perpendicular to the surface at/near the point

  • Texture coordinates

    • A value used to apply a digital image (akin to a decal on a plastic model) to the surface

Essential Math for Games

Efficient rendering of triangle sets l.jpg
Efficient Rendering ofTriangle Sets

  • Indexed geometry allows vertices to be shared by several triangles

  • Uses an array of indices into the array of vertices

  • Each set of three indices determine a triangle

  • Uses much fewer verts than (3 x Tris)

Essential Math for Games

Indexed geometry example l.jpg
Indexed Geometry Example









18 Individual vertices

(exploded view)

7 shared vertices

Index list for shared vertices (0,1,2),(0,2,3),(0,3,4),(0,4,5),(0,5,6),(0,6,1)

Essential Math for Games

Even more efficient l.jpg
Even More Efficient

  • Triangle Strips (tristrips)

    • Every vertex after the first two defines a triangle: (i-2, i-1, i)

  • Tristrips use much shorter index lists

    • (2 + Tris) versus (3 x Tris)

  • You may not quite get this stated efficiency

    • You may have to include degenerate triangles to fit some topologies

    • For example, try to build our earlier 6-tri fan…

Essential Math for Games

Tristrip example l.jpg
Tristrip Example









Index list for shared vertices

(0, 1, 2, 3, 4, 5, 6, 7)

Essential Math for Games

Triangle set implementation l.jpg
Triangle Set Implementation

  • Most 3D hardware is optimized for tristrips

  • However, transformed vertices are often “cached” in a limited-size cache

    • Indexed geometry is not “perfect” – using a vertex in two triangles may not gain much performance if the vertex is kicked out of the cache between them

  • Lots of papers available from the hardware vendors on how to optimize for their caches

Essential Math for Games

Geometry representation summary l.jpg
Geometry Representation Summary

  • Generally, we draw triangles

  • Triangles are defined by three screen-space vertices

  • Vertices include additional information required to store or compute colors

  • Indexed primitives allow us to represent triangles more efficiently

Essential Math for Games

Shading assigning colors l.jpg
Shading - Assigning Colors

  • The next step is known as shading, and involves assigning colors to any and all points on the surface of each triangle

  • There are several common shading techniques

  • We’ll present them from least complex (and expensive) to most complex

Essential Math for Games

Triangle shading methods l.jpg
Triangle Shading Methods

  • Per-triangle:

    • Called “Flat” shading

    • Looks faceted

  • Per-vertex:

    • Called “Smooth” or “Gouraud” shading

    • Looks smooth, but still low-detail

  • Per-pixel:

    • Image-based texturing is one example

    • Programmable shaders are more general

Essential Math for Games

Flat shading l.jpg
Flat Shading

  • Uses colors defined per-triangle directly as the color for the entire triangle

Essential Math for Games

Gouraud smooth shading l.jpg
Gouraud (Smooth) Shading

  • Gouraud shading defines a smooth interpolation of the colors at the three vertices of a triangle

  • The colors at the vertices (C0,C1,C2) define an affine mapping from barycentric coordinates (s,t) on a triangle to a color at that point:

Essential Math for Games

Gouraud shading l.jpg
Gouraud Shading

Essential Math for Games

Generating source colors l.jpg
Generating Source Colors

  • Both Flat and Gouraud shading require source colors to interpolate

  • There are several common sources:

    • Artist-supplied colors (modeling package)

    • Dynamic lighting

Essential Math for Games

Dynamic lighting l.jpg
Dynamic Lighting

  • Dynamic lighting assigns colors on a per-frame basis by computing an approximation of the light incident upon the point to be colored

    • Uses the vertex position, normal, and some per-object material color information

  • Dynamic lighting is detailed in most basic rendering texts, including ours

Essential Math for Games

Imaged based texturing l.jpg
Imaged-based Texturing

  • Extremely powerful shading method

  • Unlike Flat and Gouraud shading, texturing allows for sub-triangle, sub-vertex detail

  • Per-vertex values specify how to map an image onto the surface

  • Visual result is as if a digital image were “pasted” onto the surface

Essential Math for Games

Imaged based texturing27 l.jpg
Imaged-based Texturing

  • Per-vertex texture coordinates (or UVs) define an affine mapping from barycentric coords to a point in R2.

  • Resulting point (u,v) is a coordinate in a texture image:



V Axis



U Axis

Essential Math for Games

Texture applied to surface l.jpg
Texture Applied to Surface

  • The vertices of this cylinder include UVs that wrap the texture around it:



Essential Math for Games

Rasterization coloring the pixels l.jpg
Rasterization:Coloring the Pixels

The final step in rendering is called rasterization, and involves

  • Determining which parts of a triangle are visible (Visible Surface Determination)

  • Determining which screen pixels are covered by each triangle

  • Computing the color at each pixel

  • Writing the pixel color to the framebuffer

Essential Math for Games

Computing per pixel colors l.jpg
Computing Per-pixel Colors

  • Even though rasterization is almost universally done in hardware today, it involves some interesting and instructive mathematical concepts

  • As a result, we’ll cover this topic in greater detail

  • Specifically, we’ll look at perspective projections and texturing

Essential Math for Games

Conceptual rasterization order l.jpg
Conceptual Rasterization Order

  • Conceptually, we draw triangles to the framebuffer by rendering adjacent pixels in screen space one after the other

  • Rasterization draws pixel (x,y), then (x+1,y), then (x+2,y) etc. across each horizontal span covered by a triangle

  • Then, it draws the next horizontal span

Essential Math for Games

Stepping in screen space l.jpg
Stepping in Screen Space

  • If we have a fast way to compute the color of a triangle at pixel (x+1,y) from the color of pixel (x,y), we can draw a triangle quite quickly

  • The same is true for computing texture coordinates

  • Affine mappings are perfect for this

Essential Math for Games

Affine mappings on triangles l.jpg
Affine Mappings on Triangles

  • Gouraud shading defines an affine mapping from world-space points in a triangle to colors

  • Texturing defines an affine mapping from world-space points on a triangle to texture coordinates (UVs)

  • Note, however, these are mappings from world space to colors and UVs

Essential Math for Games

Affine in screen space l.jpg
Affine in Screen Space

  • For the moment, assume that we have an affine mapping from screen space (xs, ys) to color:

  • Note that the depth value is ignored

Essential Math for Games

Forward differences l.jpg
Forward Differences

  • Note the difference in colors between a pixel and the pixel directly to the right:

Wow – that’s nice!

Essential Math for Games

Forward differencing l.jpg
Forward Differencing

  • This simple difference leads to a useful trick:

  • Given the color for a base pixel in a triangle, the color of the other pixels are:

  • To step from pixel to adjacent pixel (i=1 and/or j=1) is just an addition!

  • This is called forward differencing

Essential Math for Games

Perspective l.jpg

  • Perspective projection is by far the most popular projection method in games

  • It looks the most like reality to us

  • Perspective rendering does involve some interesting math and surprising visual results

Essential Math for Games

Affine mapping of texture uvs l.jpg
Affine Mapping of Texture UVs

  • Over the next few slides, we’ll apply a texture to a pair of triangles

  • We’ll use screen-space affine mappings to compute the texture coordinates for each pixel

  • First, let’s look at a special case: a pair of triangles parallel to the view plane

Essential Math for Games

Polygon parallel to view affine interpolation l.jpg
Polygon Parallel to View:Affine Interpolation

Wire-frame view

Textured view


Essential Math for Games

Looking good so far l.jpg
Looking good so far…

  • That worked correctly – maybe we can get away with using affine mappings (and thus forward differencing) for all of our texturing…

  • Not so fast – next, we’ll tilt the top of the square away from the camera…

Essential Math for Games

Polygon tilted in depth affine interpolation l.jpg
Polygon Tilted in Depth: Affine Interpolation

Wire-frame view

Textured view


Essential Math for Games

What happened l.jpg
What Happened?

  • We were interpolating using an affine mapping in (2D) screen space.

  • Perspective doesn’t preserve affine maps

  • Let’s look at the inverse mapping: namely, we’ll derive the mapping from world space to screen space

  • If this mapping isn’t affine, then the inverse (screen to triangle) can’t be affine, either

Essential Math for Games

Example projecting a line l.jpg
Example – Projecting a Line

  • We’ll project a 2D line segment (y,z) into 1D using perspective:

Projection of any point (not necessarily on line) to 1D:

Line in world space:

Essential Math for Games

Projecting a line segment l.jpg
Projecting a Line Segment


View Plane




Essential Math for Games

Special case parallel to view l.jpg
Special Case – Parallel to View


View Plane




Affine when projected -That’s why this case worked

Essential Math for Games

General case l.jpg
General Case





Not affine when projected – That’s why this case was wrong

Essential Math for Games

Correct interpolation l.jpg
Correct Interpolation

  • The perspective projection breaks our nice, simple affine mapping

    • Affine in world space becomes projective in screen space

    • Per-vertex depth matters

  • The correct mapping from screen space to color or UVs is projective:

Essential Math for Games

Perspective correct stepping l.jpg
Perspective-correct Stepping

  • The per-pixel method for stepping our projective mapping in screen space is:

    • Affine forward diff to step numerator

    • Affine forward diff to step denominator

    • Division to compute final value

  • This requires an expensive per-pixel division, or even several divisions

Essential Math for Games

Polygon tilted in depth correct perspective l.jpg
Polygon Tilted in Depth: Correct Perspective

Wire-frame view

Textured view


Essential Math for Games

Colors versus texture uvs l.jpg
Colors versus Texture UVs

  • Textures need to be perspective-correct because the detailed features in most textures make errors obvious

    • This is why the example images that we have shown involve texturing

  • Gouraud-shaded colors are more gradual and can often get by without perspective correction

Essential Math for Games

Cheating faster perspective l.jpg
Cheating – Faster Perspective

  • SW and HW systems have optimized perspective correction by approximation

    • Subdivide tris or scanlines into smaller bits and use affine stepping (very popular)

    • Use a quadratic function to approximate the projective interpolation

    • Reorder pixel rendering to render pixels of constant depth together (very rare)

Essential Math for Games

Cheating artifacts l.jpg
Cheating - Artifacts

  • Some tricks are better than others, and some break down in extreme cases

  • Look at some early PS1 games, and you’ll see plenty of interesting and different perspective-correction artifacts

  • As with most approximations, you tend to trade speed for accuracy

Essential Math for Games

References l.jpg

  • Eberly, David H., 3D Game Engine Design, Morgan Kaufmann Publishers, San Francisco, 2001

  • Hecker, Chris, Behind the Screen: Perspective Texture Mapping (Series), Game Developer Magazine, Miller Freeman, 1995-1996

Essential Math for Games

References54 l.jpg

  • Van Verth, James, Bishop, Lars, Essential Mathematics for Games and Interactive Applications: A Programmer’s Guide, Morgan Kaufmann Publishers, San Francisco, 2004

  • Woo, Mason, et al, OpenGL® Programming Guide: The Official Guide to Learning OpenGL, Addison-Wesley, 1999

Essential Math for Games