Shadows in CG: Algorithms, Hardware & Real-Time Rendering

TAKEAWAYS:

• Shadows are rendered using ray casting (test visibility), shadow mapping (depth comparison), or shadow volumes (stencil buffers) – each with trade-offs between quality and performance.
• Hardware acceleration (GPU pipelines) processes shadows in parallel, enabling real-time applications like YouTube’s 3D video effects or Daraz’s virtual try-on tools.
• Soft shadows use penumbra calculations (light source size + receiver distance) to mimic real-world lighting, critical for NEPSE’s 3D stock market visualizations.
• Shadow acne (self-shadowing artifacts) and Peter-panning (shadows floating above objects) are fixed via bias adjustments and slope-scaled depth buffers.
• Virtual reality (e.g., Meta Quest) relies on precise shadow rendering for immersion, while augmented reality (e.g., Khalti’s holographic transaction previews) uses real-time shadow mapping for alignment with physical objects.

1. Why Shadows Matter in Computer Graphics

Shadows are visual cues that:

• Define object relationships (what’s in front/behind).
• Enhance realism (e.g., a tree casting a shadow on a house in Google Earth).
• Improve user interaction (e.g., Pathao’s AR delivery drop zones).

Caption: Left: Shadow mapping (GPU-optimized, blocky shadows). Right: Ray tracing (physically accurate, computationally expensive).

2. Shadow Generation Techniques

A. Ray Casting (Whitted-Style Shadows)

How it works:

1. For each light source, cast a ray from the surface point toward the light.
2. If the ray hits an object before reaching the light → shadow.
3. Repeat for all light sources (expensive for dynamic scenes).

Visual:

graph LR
    A["Surface Point"] -->|"Ray"| B["Light Source"]
    B -->|"Blocked?"| C["Object"]
    C -->|"Yes"| D["Shadow"]
    C -->|"No"| E["No Shadow"]

Worked Example: Scenario: A cube (vertex at (1,1,1)) is lit by a point light at (3,3,3). The light’s direction vector is (-1,-1,-1). Test if the point (2,2,2) is in shadow.

1. Ray equation: P(t) = (2,2,2) + t*(-1,-1,-1).
2. Intersection with cube: Solve for t where P(t) hits the cube’s faces (e.g., x=0 → t=2).
3. Compare t: If t < distance to light (√3 ≈ 1.732), the point is in shadow. → (2,2,2) is not in shadow (no blocker at t=1).

Real-World Use:

• Google Maps’ 3D buildings: Uses ray casting for static shadows in satellite views.
• Ncell’s AR ads: Renders shadows of virtual billboards on real-world surfaces.

B. Shadow Mapping

How it works (GPU-optimized):

1. Render from light’s POV: Store depth of visible surfaces in a shadow map (texture).
2. Compare depths: For each pixel, check if its depth > stored depth → shadow.

Visual:

Worked Example: Scenario: A light at (0,5,0) casts a shadow of a cube (1,1,1) to (3,1,1) on a floor at y=0.

1. Shadow map: Render from light’s view → store depth of cube’s bottom face (y=1).
2. Screen pass: For floor pixel (2,0,2), compare its depth (0) with shadow map depth (1). → 0 < 1 → not in shadow.

Advantages:

• Fast (GPU parallelizable).
• Works for dynamic scenes (e.g., Pathao’s moving delivery drones).

Disadvantages:

• Aliasing (blocky edges) → fixed via percentage-closer filtering (PCF).
• Shadow acne (self-shadowing) → fixed via bias adjustment.

Caption: Left: Shadow acne (self-shadowing). Right: Fixed with depth bias.

C. Shadow Volumes

How it works:

1. Extrude geometry along light rays to form a "volume" where shadows occur.
2. Use stencil buffer to mark pixels inside the volume → render dark.

Visual:

graph TD
    A["Object"] -->|"Extrude"| B["Shadow Volume"]
    B -->|"Stencil Test"| C["Mark Pixels"]
    C -->|"Render Dark"| D["Shadow"]

Worked Example: Scenario: A sphere of radius 1 at (0,1,0) with light at (0,0,-5).

1. Extrude sphere’s silhouette edges along light direction (-0.2,0,0.98).
2. Stencil test: For each pixel, if inside the volume → increment stencil.
3. Render: Darken pixels where stencil > 0.

Real-World Use:

• NEPSE’s 3D stock charts: Uses shadow volumes for crisp shadows in financial visualizations.
• E-Sewa’s AR payment previews: Renders shadows of virtual receipts on real tables.

Disadvantages:

• Complex for complex scenes (e.g., forests).
• Z-fighting (flickering) → fixed via stencil buffer optimization.

3. Soft Shadows: Umbra and Penumbra

Key Idea: Shadows have hard edges (umbra) and fuzzy edges (penumbra) based on light size.

Visual:

Formula:

• Penumbra width = (object_width * light_size) / (distance_to_light - object_distance).

Worked Example: Scenario: A light of diameter 2 is 10 units away from a cube (1 unit wide) at 5 units from the light.

1. Umbra region: distance_to_light - object_distance = 5 → hard shadow starts at 5.
2. Penumbra width: (1 * 2) / (10 - 5) = 0.4 → soft shadow spans 0.4 units.

Real-World Use:

• YouTube’s 3D video effects: Soft shadows for realistic avatars.
• Daraz’s virtual fitting room: Penumbra effects for clothing shadows.

4. Hardware Acceleration: GPU Pipeline for Shadows

Steps:

1. Vertex Shader: Transform vertices to light space.
2. Geometry Shader: Generate shadow volumes (if using shadow volumes).
3. Rasterization: Fill pixels in shadow map.
4. Pixel Shader: Compare depths (shadow mapping) or stencil tests (shadow volumes).

Visual:

flowchart LR
    A["Vertex Shader"] --> B["Light Space Transform"]
    B --> C["Geometry Shader"]
    C --> D["Shadow Map Rasterization"]
    D --> E["Depth Comparison"]
    E --> F["Final Pixel Color"]

Real-World Example:

• Meta Quest (VR): Uses GPU shadow mapping for real-time avatars.
• Khalti’s AR transactions: Renders soft shadows for holographic receipts.

5. Advanced Topics

A. Shadow Acne and Fixes

Cause: Floating-point precision errors in depth comparisons. Fixes:

• Constant bias: Add a small value to depth before comparison.
• Slope-scaled bias: bias = m * slope + c (adjusts per surface angle).

Caption: Left: Shadow acne. Right: Fixed with slope-scaled bias.

B. Peter-Panning (Shadows Floating)

Cause: Depth buffer precision issues. Fix: Use higher-precision buffers or exponential shadow maps.

C. Cascaded Shadow Maps (CSM)

For large scenes (e.g., open-world games):

• Split scene into multiple shadow maps (near/far).
• Example: Google Earth uses CSM for global terrain shadows.

6. Comparison Table: Shadow Techniques

## In the Real World

1. Pathao’s AR Delivery Tracking:

   • Uses shadow mapping to render real-time shadows of delivery drones on users’ phones, ensuring accurate drop zones.
   • Example: A drone’s shadow must align with the user’s physical location for successful delivery.

2. Google Maps’ 3D Buildings:

   • Employs ray casting for static shadows in satellite views, improving navigation accuracy in urban areas.
   • Example: Shadows of Kathmandu’s tall buildings help users estimate sun exposure.

3. NEPSE’s Stock Market Visualizations:

   • Uses shadow volumes for crisp 3D charts, making data trends clearer.
   • Example: A falling stock’s shadow volume highlights downward trends.

4. Khalti’s Holographic Receipts:

   • Renders soft shadows of virtual receipts on real tables via AR, enhancing transaction transparency.
   • Example: A receipt’s penumbra effect shows its depth relative to the user’s hand.

5. YouTube’s 3D Video Effects:

   • Implements percentage-closer filtering (PCF) for soft shadows in avatars, improving realism.
   • Example: A virtual host’s shadow on a green screen appears natural.

## Exam Tip

1. Define Key Terms Clearly:

   • Example: "Shadow mapping is a technique where a scene is rendered from the light’s perspective to create a depth texture, which is then used to determine shadows in the final image."
   • Marks: 2–3 for precise definitions (e.g., "umbra vs. penumbra").

2. Draw Diagrams:

   • Always sketch shadow mapping pipelines or shadow volume extrusions in exams.
   • Example: Label a shadow map texture and compare it to the screen pass.

3. Compare Techniques:

   • Questions often ask: "When would you use shadow volumes over shadow mapping?"
   • Answer: "Shadow volumes are better for crisp edges in VR, while shadow mapping is faster for large scenes like games."

4. Worked Examples:

   • Practice ray casting and shadow mapping math with small numbers (e.g., light at (0,5,0), cube at (1,1,1)).
   • Example Question: "A point light at (2,3,4) illuminates a sphere at (0,0,0). Is (1,1,1) in shadow? Show calculations."

5. Real-World Applications:

   • Link techniques to Nepali apps (e.g., "Pathao uses shadow mapping for AR delivery shadows").
   • Marks: 1–2 for contextual examples.

6. Common Pitfalls:

   • Shadow acne: Always mention bias adjustment as a fix.
   • Aliasing: Note PCF or resolution scaling for shadow mapping.

Final Note: Shadows are not just aesthetics – they’re critical for user interaction (e.g., Pathao’s AR) and data visualization (e.g., NEPSE’s charts). Master the math (ray equations, depth comparisons) and trade-offs (speed vs. quality) to ace the exam!