Basics of 3D Rendering CS 148: Summer 2016 Introduction of Graphics and Imaging Zahid Hossain http://www.pling.org.uk/cs/cgv.html What We Have So Far 3D geometry 2D pipeline CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 2 Handy Fact Matrices preserve flat geometry CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 3 Handy Fact Matrices preserve flat geometry CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 4 So What? 3D triangles look like 2D triangles under camera transformations. CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 5 So What? 3D triangles look like 2D triangles under camera transformations. Use 2D pipeline for 3D Rendering ! CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 6 Side Note Only true for flat shapes http://drawntothis.com/wp-content/uploads/2010/09/Random_Guy.jpg CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 7 Side Note Only true for flat shapes http://drawntothis.com/wp-content/uploads/2010/09/Random_Guy.jpg CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 8 Frame Buffering CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 9 Double and Triple Buffering Tearing : Data from multiple frames appear on the screen at the same time. This happens when GPU rendering rate and monitor refresh rate are not synced. http://www.newcluster.com/wp-content/uploads/2015/01/g-sync_diagram_0.jpgitokgxy9kpos CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 10 Double Buffering with V-Sync Front Buffer Back Buffer Front Buffer (video memory) SwapBuffer: Either copy Back Buffer to Front Buffer, or Swap Pointers (Usually in Fullscreen mode). Vertical Retraces CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 11 Double Buffering with V-Sync Front Buffer Back Buffer Front Buffer (video memory) SwapBuffer: Either copy Back Buffer to Front Buffer, or Swap Pointers (Usually in Fullscreen mode). Vertical Retraces CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 12 Triple Buffering with V-Sync Front Buffer Back Buffer 1 Back Buffer 2 Front Buffer (Video Memory) Vertical Retraces CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 13 Triple Buffering with V-Sync Front Buffer Back Buffer 1 Back Buffer 2 Front Buffer (Video Memory) Vertical Retraces CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 14 Occulusion CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 15 Painter’s Algorithm Draw items one at a time CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 16 Painter’s Algorithm Draw items one at a time CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 17 Painter’s Algorithm Draw items one at a time CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 18 Painter’s Algorithm Draw items one at a time CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 19 Painter’s Algorithm Draw items one at a time CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 20 What Order? CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 21 What Order? CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 22 Early Hidden Surface Approaches •Pre-compute rendering order •Cut geometry as needed •… CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 23 Observation Each pixel can decide what is on top independently. CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 24 Observation Each pixel can decide what is on top independently. CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 25 Z Buffer Color Buffer (RGB each cell) Depth buffer (one number each cell) CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 26 Z-Buffer http://upload.wikimedia.org/wikipedia/commons/4/4e/Z_buffer.svg CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 27 Z-Buffer Issues: Resolution Non linear ! CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 28 Z-Buffer Issues: Resolution Depth CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 29 Z-Buffer Issues: Depth Fighting aka. “Stiching” or “bleeding” http://ps-2.kev009.com/CATIA-B18/basug_C2/basugbt1510.htm CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 30 Z-Buffer Issues: Depth Fighting Hack: Scale and add offset “glPolygonOffset” aka. “Stiching” or “bleeding” http://ps-2.kev009.com/CATIA-B18/basug_C2/basugbt1510.htm CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 31 Cull [kuhl]: To identify and throw away invisible geometry to save processing time. CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 32 Basic Culling Strategies • Backface culling: remove geometry facing away from the camera • View volume culling: remove geometry outside frustum • Occlusion culling: remove invisible geometry CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 33 Backface Culling None Backface Hidden surface culling removal http://medialab.di.unipi.it/web/IUM/Waterloo/node70.html CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 34 Specifying Triangle Orientation glDisable/glEnable(GL_CULL_FACE) glFrontFace(GL_CCW) CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 35 View Volume Culling Potential strategies: • Store scene hierarchically • With bounding volumes • Compute viewing frustrum • Don’t render volumes that are clearly outside frustrum http://i.minus.com/i75qjiyFQzVCI.jpg CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 36 Occlusion Culling: Portal Rendering http://www.aaid.ca/flash/media/hkmh/images/floor1/000a-geology-portal-cg-rendering.jpg CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 37 Occlusion Culling: Portal Rendering Potentially Visible Set http://www.cs.virginia.edu/~luebke/publications/portals.html CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 38 Occlusion Culling: Portal Rendering Potentially Visible Set http://www.cs.virginia.edu/~luebke/publications/portals.html CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 39 Occlusion Culling: Portal Rendering Mirrors ? Potentially Visible Set (PVS) http://www.cs.virginia.edu/~luebke/publications/portals.html CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 40 Summary of Culling Techniques CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 41 Acceleration Structures CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 42 Goal of Acceleration Structures • Quickly reject objects that are outside the viewing volume • Query for intersections efficiently CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 43 Spatial Hierarchies Letters correspond to planes (A) CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 44 Spatial Hierarchies Letters correspond to planes (A,B) CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 45 Spatial Hierarchies Letters correspond to planes (A,B,C,D) CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 46 Spatial Hierarchies: Variations CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 47 Octree • Each node has 0 or 8 children • Each node can equally subdivide its space (an AABB) into eight subboxes by 3 midplanes • Children of a node are contained within the box of the node itself • Stop subdividing when number of objects/primitives falls below a threshold or maximum depth has reached. • Recursively render cells that intersects with the viewing volume CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 48 K-d Tree • Begin with the global bounding box containing all primitives. • Choose an axis and a splitting plane perpendicular to that axis • Subdivide the primitives on both sides of the plane into two groups • Usually done in a balanced manner • Stop when the number of primitives in each single group is below a threshold CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 49 Shadows CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 50 Shadows CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 51 Shadows: Spatial Cue http://mamassian.free.fr/papers/mamassian_tics98.pdf CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 52 Shadows: Realism http://ivl.calit2.net/wiki/images/5/55/17_ShadowMappingS15.pdf CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 53 Shadow CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 54