Real-Time Rendering Techniques in 3D Graphics explained

Introduction to 3D GraphicsLecture 6: Real-Time Rendering Anthony Steed University College London

Overview • Scanning Polygons • Filling Pixels • Gouraud and Phong Shading • Visibility Culling Re-Visited • Z-buffer • Texture Mapping

Recall Point in Polygon Test • Ray shooting is fast, but why not find the actual span for each line • I.E. use the intersection points we would have found and directly draw them (point coherency) -1 +1

x i x i - 1 Scan-Line Coherency • Intersection points of polygon edges with scan lines change little on a line by line basis y = i y = i - 1

Overview of Active Edge Table • For each scan-line in a polygon only certain edges need considering • Keep an ACTIVE edge table • Update this edge table based upon the vertical extent of the edges • From the AET extract the required spans

Setting Up • “fix” edges • make sure y1<y2 for each (x1,y1) (x2,y2) • Form an ET • Bucket sort all edges on minimum y value • 1 bucket might contain several edges • Each edge element contains • (max Y, start X, X increment)

Maintaining the AET • For each scan line • Remove all edges whose y2 is equal to current line • Update the x value for each remaining edge • Add all edges whose y1 is equal to current line

Drawing the AET • Sort the active edges on x intersection • Pairs of edges are the spans we require • Caveats (discussed in the notes) • Don’t consider horizontal lines • Maximum vertices are not drawn • Plenty of special cases when polygons share edges

Example 8 7 6 5 b a 4 3 c d 2 1 0 0 1 2 3 4 5 6 7 8

Setup • Edges are • Edge Table Contains Edge Label Coordinates y1 Structure a (1,1) to (4,7) 1 (7,1,0.5) b (7,2) to (4,7) 2 (7,7,-0.6) c (7,2) to (4,4) 2 (4,7,-1.5) d (1,1) to (4,4) 1 (4,1,1) y1 Sequence of Edges 1 (7,1,0.5), (4, 1, 1) 2 (7,7,-0.6), (4, 7,-1.5)

On Each Line Line Active Edge Table Spans 0 empty 1 (7,1,0.5), (4,1,1) 1 to 1 2 (7,1.5,0.5), (4,2,1), (7,7,-0.6), (4,7,-1.5) 1.5 to 2, 7 to 7 3 (7,2.0,0.5), (4,3,1), (4,5.5,-1.5), (7,6.4,-0.6) 2.0 to 3, 5.5 to 6.4 4 (7,2.5,0.5), (7,5.8,-0.6) 2.5 to 5.8 5 (7,3.0,0.5), (7,5.2,-0.6) 3.0 to 5.2 6 (7,3.5,0.5), (7,4.6,-0.6) 3.5 to 4.6 7 empty 8 empty

Gouraud Shading • Recall simple model for local diffuse reflection • Gouraud interpolates this colour down edges and across scan-lines in the same manner as we just did for depth

Gouraud Details • ET now contains • (y2,x1,dx,z1,dz,r1,dr,g1,dg,b1,db) • (we are running out of registers!) • Problems • not constant colour on rotation of points • misses specular highlights

Phong Shading • Include specular component • Interpolate normals across the scan-line instead of colours • Expensive square root to re-normalise • Recaptures highlights in the centre of polygons

Visibility Problem • Solution 1 (scan-line visibility): • Test spans in the AET and draw front-most • Requires non-intersecting polygons • Solution 2 (pixel visibility): • Do the test for every pixel

Z-buffer • Allocate a full screen-sized buffer that stores depth (between near and far clip) • When scan-converting a polygon • For each pixel in each polygon • If z < ZBUF[x,y] • set CBUF[x,y] = polygon_colour • set ZBUF[x,y] = z • At the beginning of each frame • Initialise buffer to Z_MAX

Z-buffer Details • Can do this in several ways • 1D z-buffer re-used on each scan line • Process each polygon with separate AET • Use as adjunct to extended AET for multiple polygons • Problems • Aliasing on depth (z-buffer tearing)

Scanning Depth into the Z-buffer • Now we have to write a z-value for each point • directly from plane equation (re-calculate for each point) • interpolate …

Interpolating Depth • Interpolate z along edges AND interpolate between edges on each scan-line (bi-linear interpolation) (X2,Y2,Z2) (XL,YL,ZL) (XR,YR,ZR) (X1,Y1,Z1)

0 1 2 3 4 5 6 7 8 Zbuffer Fill Example • General form of ET • (y2,x1,dx/dy,z1,dz/dy) • ET[1] = • ac (7,3,1/6,1,3/6) • ab (4,3,4/3,1,1/3) • ET[4] = • cb (7,7,-1,2,2/3) c 7 6 5 b 4 3 2 1 a 0 a=(3,1,1) b=(7,4,2) c=(4,7,4)

…Contents of AET • Scanline y=1 • ac (7,3,1/6,1,3/6) • ab (4,3,4/3,1,1/3) zspans 1 to 1 • y=2 • ac (7,3.166,1/6,1.5,3/6) • ab (4,4.333,4/3, 1.333, 1/3) zspans 1.5 to 1.333 • y3 • ac (7,3.333,1/6,2.0,3/6) • ab (4,5.666, 4/3, 1.666, 1/3) zspans 2 to 1.666

Trade-Offs • Z-buffer can be inaccurate with few bits • really simple to implement though! • Scan-line AET good for large polygons • good coherency across lines • requires non-intersecting polygons • Z-buffer good for small, sparse polygons • AET more time consuming to maintain

Texture Mapping • Why? • Approximation for surface colouring • Efficient packing of flat detail • Standard texture mapping modifies diffuse mapping • Pasting a picture onto the polygon

Inverse Mapping • Each vertex is associated with a point on an image (u,v)

Quick and Dirty Solution • Yet more parameters in the ET! • Bilinear interpolation of u&v down scene edges, and across scan-lines • Works, but is very ugly • Does not consider fore-shortening of image in depth

The Problem • Same problem exists with phong and gouraud shading, but it much less noticeable z incorrect z correct

The Solution • Need to compensate for fore-shortening by interpolating over 1/z • Interpolate (u’,v’,q) where q=1/z • At vertices we know (u1,v1,z1), (u2,v2,z2) • Interpolate between (u1*z1,v1 *z1,1/z1) and (u2*z2,v2 *z2,1/z2) to get (u’,v’,q) • Restore u,v, by dividing u’ and v’ by q

Sanity Check • At p0 (u’,v’,q) = (0,0.1,0.1) • At p1 (u’,v’,q) = (0,0,0.05) • On scanline 5 (u’,v’,q) = (0,0.05,0.075) (u,v) = 0.6666 z = 1/0.075 = 13.33 p1=(15,15,20,0,1) (x, y, z,u,v) scanlines Y=15 Y=10 Y=5 p0=(10,5,10,0,0)

Minor Issues • Now have two divides per pixel! • Some optimisations • only do the divide at end of the spans and interpolate across spans • or only do the divide every n pixels • Remaining problem • we have not touched upon how to clip u,v values in 3D or 2D!

Major Issues • Picking your pixel! image

Sampling • A pixel maps to a non-rectangular region • Usually only perform map on centre of pixel • Still have a problem of over-sampling (same texel maps to several pixels) or under-sampling the image (pixels only sparsely sample the texels)

Nearest neighbour Pick pixel with closest centre Bilinear Weighted average based on distance to pixel centre Filtering

Filtering • Bilinear filtering solves (partially) the oversampling problem since it provides smooth shading between pixels scanline

Mip-Mapping • When undersampling we use mip-mapping • Resample image at lower resolution • Create a “pyramid” of textures. • Interpolate texture between two adjacent layers

Texture Pyramid 1x1 ... 32x32 64x64 128x128

Sampling • Choose two layers based on texel span • Choice is made selecting the two levels where the du and dv for dx and dy are closest to one • Interpolate between four pixels in higher layer and one in lower layer

Conclusion • A real-time pipeline that is fairly close to silicon • Note the liberties we have taken: • Screen space approximations • Interpolation schemes • Paucity of modelling presentations • The future is probably not polygonal!

Real-Time Rendering Techniques in 3D Graphics explained