rendering algorithms
DESCRIPTION
Rendering algorithms. Mark Nelson [email protected]. Last lecture: Wireframe projection. Wireframe -> opaque. Starts the same Transform vertices to (x,y) coordinates But instead of connecting the 3 vertices, flood-fill it with a color But, how to deal with overlapping triangles?. Occlusion. - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/2.jpg)
Last lecture: Wireframe projection
![Page 3: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/3.jpg)
Wireframe -> opaque
Starts the same Transform vertices to (x,y) coordinates But instead of connecting the 3 vertices, flood-fill it with a color
But, how to deal with overlapping triangles?
![Page 4: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/4.jpg)
Occlusion
Wireframes have no occlusion
Front and back side of objects are visible
If surfaces are opaque, that won’t do
How do we draw only visible surfaces?
![Page 5: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/5.jpg)
Painter’s algorithm
Simplest solution
Sort triangles from back to front by center z-coord
Draw in order
Further-front triangles overwrite further-back ones
![Page 6: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/6.jpg)
Painter’s algorithm
![Page 7: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/7.jpg)
Painter’s algorithm downsides
Wasted drawing effort Triangles are drawn only to be overwritten
Possible artifacts since it only sorts by triangle centers
![Page 8: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/8.jpg)
Scanline algorithm
Line by line
Find all triangle edges that intersect this line Start scanning left to right When we encounter an edge:
Add triangle to stack if it’s not on it (starting edge) Remove triangle if it was already on the stack (closing edge)
Draw pixel that corresponds to nearest triangle on stack
![Page 9: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/9.jpg)
Simple ray-casting
From viewport, draw a ray from each pixel until it hits the first surface
Render that pixel
Simple but inefficient
![Page 10: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/10.jpg)
Z-buffering
Render triangle to (x,y) framebuffer but also save the z’s
Z buffer: current z-depth of every pixel
Don’t write a pixel to the framebuffer if z > zbuffer
Optimization: draw front to back to minimize overwrites
![Page 11: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/11.jpg)
Z-buffering / scanline
Generally combined
Proceed in scanline order Z-buffer for occlusion test
Why not stack-based scanline algorithm? Z-buffer correctly handles each pixel
![Page 12: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/12.jpg)
Hierarchical z-buffer
![Page 13: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/13.jpg)
Optimizations
Z-buffering stops us from rendering some unnecessary pixels
Can we avoid entire unnecessary triangles?
![Page 14: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/14.jpg)
Frustum culling
Exclude triangles outside the frustum Clip triangles on the edges to the edge
Can be done either in view space or clip space
![Page 15: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/15.jpg)
Occlusion culling
Fast-fail completely invisible triangles
E.g. ”early z test”
Potentially visible set algorithms
![Page 16: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/16.jpg)
Some alternative perspectives Isometric graphics
Parallel projection, tiled, fixed viewing angle Graphics can therefore be predrawn to fake 3d The angle is the one where axes have the same scale Rotated 45 degrees around vertical, 35.264 around horizontal In pixel art, approximated with a 2:1 ratio
Oblique projection Fake 3d Draw a 2d front view of the object, and then a skewed 2 side view Depth often foreshortened (e.g. 0.5)
![Page 17: Rendering algorithms](https://reader035.vdocuments.site/reader035/viewer/2022081503/56814b4a550346895db8463c/html5/thumbnails/17.jpg)
Isometric (Age of Empires 2)