Depth

Depth Cues

"Hints" that suggest three-dimensionality - shape or distance

Based on physics, and workings of human vision

Summary

occlusion
linear perspective
relative size
relative height
texture gradient
shading, shadows
aerial perspective
accomodation
stereo parallax
motion parallax

Occlusion / Interposition

Limbourg. Tres Riches Heures: January. 1412-16

Occlusion / Interposition

Hiroshige. Plum Estate, Kameido. 1857

Occlusion / Interposition

Diablo (Blizzard North, 1996)

Perspective

Linear Perspective
Relative Size
Relative Height
Texture Gradient

Linear Perspective

Jack Delano. Chicago Galewood yard. 1944

Linear Perspective

van Gogh. Corridor in the Asylum. 1889

Linear Perspective

Dali. The First Days of Spring 1932

Linear Perspective

Tempest (Atari, 1981)

Relative Size

Durer. The Adoration of the Magi. 1504

Relative Size

Monet. Wheatstacks (End of Summer), 1890-91

Relative Size

Wolfenstein 3D (id Software, 1992)

Relative Height

Limbourg. Tres Riches Heures: February. 1412-16

Relative Height

Constable. Chain Pier, Brighton. 1827

Relative Height

Marble Madness (Atari, 1984)

Texture Gradient

Gustave Caillebotte. Paris Street; Rainy Day. 1877

Texture Gradient

Gustave Caillebotte. Paris Street; Rainy Day (detail)

Texture Gradient

Turner Whitted. Ray Tracing. 1980

Lighting & Shadows

Michelangelo. David. 1504

Lighting & Shadows

Michelangelo. The Holy Family with the infant St. John the Baptist (the Doni Tondo). c. 1503-05

Lighting & Shadows

Monet. Rouen Cathedral, the West Portal and Saint-Romain Tower, Full Sunlight, Harmony in Blue and Gold) / Rouen Cathedral: Full Sunlight. 1894

Lighting & Shadows

Mario 64 (Nintendo, 1996) / Doom 3 (id Software, 2004)

Lighting & Shadows

Cel Shading

Aerial Perspective

Gregg M. Erickson. Mount Ellinor. CC-BY

Aerial Perspective

Friedrich. Riesengebirge. 1835

Aerial Perspective

Monet. The Thames at Westminster (Westminster Bridge). 1871

Aerial Perspective

Myst V (Ubisoft, 2005)

Accomodation (Focus)

Vermeer. The Lacemaker. 1669-70

Accomodation (Focus)

Motion Parallax

Disney. The Old Mill. 1937

Motion Parallax

Shadow of the Beast (Psygnosis, 1989)

Stereo Parallax

Virtual Boy - Mario's Tennis (Nintendo, 1995)

OpenGL

occlusion: depth-buffering (glEnable(GL_DEPTH_TEST))
linear perspective
relative size
relative height: perspective projection (gluPerspective)
texture gradient: perspective, texture mapping (glTexImage2D, etc)
shading, shadows: lighting (glLight, glMaterial, glNormal)
aerial perspective: fog (glFog)
accomodation: accumulation buffer (glAccum)
stereo parallax: quad-buffering, color-masking
motion parallax: transformations

3D Coordinates

3D graphics adds a Z coordinate

OpenGL coordinate system is right-handed - +X to the right, +Y up, +Z out of screen

Other software or application domains may use other coordinate systems

3D Viewing

The 3D viewing volume is controlled by glOrtho.
This is an axis-aligned box containing the region to be drawn.

   glOrtho(left, right, bottom, top, near, far)

Note that near and far can be confusing - they are the negatives of the Z values for the corresponding planes.

glOrtho

glOrtho(-5, 8, -4, 4, -1, 3)

3D Transformations

All OpenGL transformation functions are 3D; we can now use the Z coordinate

glTranslatef(x, y, z)

Moves objects by (x, y, z) units.

glRotatef(angle, x, y, z)

Rotates objects around the axis (x, y, z), by angle degrees.

Note that "the axis (x, y, z)" means a line that from the origin (0, 0, 0) through the point (x, y, z)

glScalef(x, y, z)

Resizes objects by the factor x in the X direction, y in the Y direction, and z in the Z direction.

Hidden Surfaces

Hidden surfaces provide occlusion depth cue

Hidden Surface Algorithms

Many different algorithms developed over the years

Painter's algorithm
- sort everything from back to front
Binary Space Partition (BSP) tree
Ray casting / Ray tracing
Depth buffering
(aka Z buffering)
etc

Ray Tracing

CC-BY-SA diagram by Henrik

For each pixel, compute a ray backwards from the eye through the pixel
Test for intersection with any objects
Trace rays from intersection point to light sources
Check for occlusion of rays to lights (shadows)

Depth Buffering

Rendering a polygon means filling pixels

Color buffer contains RGB color of each pixel drawn

Depth buffer contains depth of each pixel drawn

Color	Depth

Depth Buffer

When drawing a new pixel, compare new depth to what's stored in depth buffer

Color	Depth

Polygons can be drawn in any order
Polygons can intersect

OpenGL Depth Buffering

Space must be allocated for the depth buffer:

glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH)

Depth buffering must be enabled:

glEnable(GL_DEPTH_TEST)

Depth buffer must be cleared each frame:

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

Depth Fighting

Depth values have limited resolution

i.e. the numbers are not infinitely precise

Rounding errors occur when polygons are filled

Polygon overlap can cause "depth-fighting"

This document is by Dave Pape, and is released under a Creative Commons License.