Illumination & Shading Models: Phong, Gouraud, Local vs Global Lighting

TAKEAWAYS:

• Phong vs Gouraud: Gouraud interpolates vertex colors, Phong interpolates normals and computes shading per pixel for smoother highlights.
• Lighting components: Ambient (global), diffuse (Lambertian), and specular (mirror-like) combine via the Phong reflection model.
• Normal vectors: Critical for accurate diffuse/specular calculations; interpolated in Gouraud, recomputed per pixel in Phong.
• Real-world use: Used in game engines (Unity/Unreal), e-commerce (Daraz product renders), and AR/VR apps (Pathao delivery tracking).
• Performance tradeoff: Gouraud is faster (vertex-level), Phong is more accurate (pixel-level) but computationally expensive.
• Blinn-Phong: Optimized specular term using halfway vector for efficiency in real-time rendering.

Core Concepts: How Light Interacts with Surfaces

1. The Three Pillars of Illumination

Light interaction with surfaces is modeled using three components, visualized below:

graph LR
    A["Ambient Light"] -->|"Global illumination"| B["Diffuse Reflection"]
    B -->|"Lambertian cosine law"| C["Specular Reflection"]
    C -->|"View-dependent highlights"| D["Final Color"]

• Ambient Light: Simulates indirect lighting (e.g., light bouncing off walls). Mathematically: $$I_a=k_a\cdot I_{ambient}$$ where $k_a$ is the ambient reflection coefficient (0–1).

• Diffuse Reflection: Scatters light equally in all directions (matte surfaces). Follows Lambert’s cosine law: $$I_d=k_d\cdot (L\cdot N)\cdot I_{diffuse}$$ $L$ = light direction, $N$ = surface normal, $I_{diffuse}$ = light intensity.

• Specular Reflection: Creates shiny highlights (mirror-like). Original Phong model: $$I_s=k_s\cdot (R\cdot V{)}^n\cdot I_{specular}$$ $R$ = reflected light direction, $V$ = view vector, $n$ = shininess exponent.

2. Phong vs Gouraud Shading: The Key Difference

Both methods approximate surface shading, but differ in where calculations occur:

Worked Example: Gouraud Shading for a Triangle Consider a triangle with vertices $A(0,0)$, $B(2,0)$, $C(1,2)$ and normals:

• $N_A=(0,0,1)$
• $N_B=(0,0,1)$
• $N_C=(-\sqrt{2}/2,0,\sqrt{2}/2)$

1. Compute vertex colors using Phong reflection model:

   • For $A$ and $B$ (assuming light at $L=(0,0,-1)$ and view at $V=(0,0,1)$): $$I_A=I_B=k_a{I}_{ambient}+k_d(L\cdot N)I_{diffuse}+k_s(R\cdot V{)}^n{I}_{specular}$$ (Assume $k_a=0.2$, $k_d=0.5$, $k_s=0.3$, $I_{ambient}=1$, $I_{diffuse}=1$, $I_{specular}=1$, $n=10$) $$I_A=0.2+0.5\cdot 1+0.3\cdot 1^{1}0=1.0(\text{white})$$
   • For $C$: $$L\cdot N_C=(0,0,-1)\cdot (-\sqrt{2}/2,0,\sqrt{2}/2)=-\sqrt{2}/2(\text{negative, no diffuse})$$ $$R_C=2(N_C\cdot L)L-L=(-\sqrt{2},0,\sqrt{2})$$ $$R_C\cdot V=-\sqrt{2}(\text{negative, no specular})$$ $$I_C=0.2+0+0=0.2(\text{dark})$$

2. Interpolate colors across the triangle’s pixels. The result:

   graph TD
     A["A (white)"] -->|"Linear interpolation"| B["Edge AB"]
     B --> C["C (dark)"]
     A --> D["Edge AC"]
     D --> C
     C --> E["Edge BC"]
     E --> B

   Visualization: The triangle appears gradient from white to dark, with no sharp highlights.

Real-World Tie-In: Daraz’s product images use Gouraud shading for real-time previews during shopping. For example, when you rotate a shoe in the 3D viewer, the renderer uses vertex shading to balance speed and quality. High-end renders (e.g., for ads) switch to Phong shading.

3. Phong Reflection Model: Derivation and Specular Trick

The specular term in Phong’s model uses the reflection vector $R$, computed as: $$R=2(N\cdot L)L-L$$ where:

• $N$ = normalized surface normal,
• $L$ = normalized light direction.

Worked Example: Specular Highlight on a Sphere Assume:

• Surface normal at a point: $N=(0,0,1)$,
• Light direction: $L=(0.6,0.8,-0.1)$,
• View direction: $V=(0,0,1)$,
• $k_s=0.5$, $I_{specular}=1$, $n=20$.

1. Compute $R$: $$N\cdot L=0\cdot 0.6+0\cdot 0.8+1\cdot (-0.1)=-0.1$$ $$R=2(-0.1)(0.6,0.8,-0.1)-(0.6,0.8,-0.1)=(-0.12-0.6,-0.16-0.8,0.02+0.1)=(-0.72,-0.96,0.12)$$ Normalize $R$: $$\Vert R\Vert =\sqrt{(-0.72{)}^2+(-0.96{)}^2+0.12^2}\approx 1.19$$ $$R_{normalized}\approx (-0.605,-0.807,0.101)$$

2. Compute $R\cdot V$: $$R\cdot V=(-0.605\cdot 0)+(-0.807\cdot 0)+(0.101\cdot 1)=0.101$$ $$I_s=0.5\cdot (0.101{)}^{20}\cdot 1\approx 0(\text{negligible})$$ Result: No specular highlight at this point (light is grazing the surface).

Optimization: Blinn-Phong Model To reduce computations, Blinn-Phong replaces $R\cdot V$ with the halfway vector $H$: $$H=\frac{L+V}{\Vert L+V\Vert }$$ $$I_s=k_s(N\cdot H{)}^n{I}_{specular}$$ This is used in Unity3D for real-time games like Genshin Impact, where performance matters more than pixel-perfect accuracy.

4. Global Illumination vs Local Illumination

Real-World Example: NTC’s Power Outage Maps NTC’s website uses local illumination for real-time power grid visualizations. When you hover over a region, the shading highlights outages using a simplified Phong model (diffuse only) for performance, as shown below:

graph TD
    A["Power Grid"] --> B["Local Illumination"]
    B --> C["Diffuse Shading"]
    C --> D["Highlight Outages"]

Advanced Topics

1. Normal Mapping for Pseudo-Detail

Normal maps store per-pixel normal deviations in a texture, tricking the renderer into seeing fine details without geometry. Used in:

• Pathao’s delivery driver UI: Shows "bumpy" road textures on low-poly maps.
• Game engines: Adds detail to low-poly models (e.g., Call of Duty’s brick walls).

Worked Example: Normal Map Application

1. Original flat surface normal: $N=(0,0,1)$.
2. Normal map sample at a pixel: $(0.1,-0.2,0.3)$ (stored in RGB).
3. Perturbed normal: $$N_{perturbed}=\text{normalize}((0.1,-0.2,0.3))$$ Now shading uses $N_{perturbed}$ instead of $N$.

2. Environment Mapping for Reflections

Stores a panoramic image (e.g., cube map) to simulate reflections. Used in:

• Khalti’s transaction success screens: Shows "reflective" surfaces on payment confirmation icons.
• Google Maps: Simulates water reflections in satellite views.

## In the Real World

1. eSewa’s Bill Visualization

   • Idea Used: Gouraud shading for 2D bill rendering.
   • How: When you pay a bill, the app displays a simplified 3D-like bar chart using linear color interpolation between vertices to show payment progress. This avoids per-pixel calculations, ensuring smooth rendering on low-end phones.

2. Daraz’s 3D Product Previews

   • Idea Used: Phong shading with Blinn-Phong optimization.
   • How: Products like shoes or electronics use real-time Phong shading for interactive previews. The halfway vector trick ($N\cdot H$) reduces the shininess exponent ($n$) from 20 to 5, making it run at 60 FPS on mid-range devices.

3. Ncell’s Network Coverage Maps

   • Idea Used: Local illumination with ambient/diffuse only.
   • How: The app shades coverage areas using a single light source (ambient for background, diffuse for signal strength). Specular highlights are omitted for clarity, as shown in the real-time signal strength meter.

## Exam Tip

1. Differentiate Phong vs Gouraud:

   • Gouraud: "Interpolates colors at vertices" → mention mach bands.
   • Phong: "Interpolates normals per pixel" → mention smooth highlights.
   • Exam Trap: Some questions ask for "derivations." For Gouraud, show the barycentric interpolation of colors. For Phong, derive the specular term step-by-step (include $R=2(N\cdot L)L-L$).

2. Phong Model Components:

   • Always write the full equation: $$I=k_a{I}_{ambient}+k_d(L\cdot N)I_{diffuse}+k_s(R\cdot V{)}^n{I}_{specular}$$
   • Label each term in words (e.g., "the specular term accounts for mirror-like reflections").

3. Real-World Applications:

   • Link shading models to performance vs quality tradeoffs. Example:

     "In Pathao’s driver app, Gouraud shading is used for the delivery route preview because it renders faster on Android phones, while high-end ads on Daraz use Phong shading for photorealistic product images."

4. Diagrams:

   • Must include in answers:
     1. A triangle with interpolated colors (Gouraud).
     2. A surface with per-pixel normals (Phong).
     3. The reflection vector $R$ and view vector $V$ for specular calculation.
   • Use Mermaid for these in exams (e.g., graph TD for interpolation paths).

5. Common Pitfalls:

   • Forgetting to normalize vectors ($L$, $N$, $V$, $R$).
   • Misapplying the shininess exponent $n$: higher $n$ = tighter highlight.
   • Confusing Blinn-Phong ($N\cdot H$) with Phong ($R\cdot V$).

Final Note: Illumination models bridge math and art in computer graphics. Master the Phong equation, Gouraud interpolation, and real-world tradeoffs—these are the core of 70% of exam questions. For practicals, implement a simple Phong shader in OpenGL; the exam may ask for pseudocode!