Illumination, Shading & Colour Models in 3D Graphics

TAKEAWAYS:

• Illumination models (Phong, Gouraud) simulate light reflection using ambient, diffuse, and specular components.
• Shading techniques (flat, Gouraud, Phong) determine how surfaces appear under light, with Phong interpolation being the most realistic.
• Colour models (RGB, CMYK, HSL) define how colours are represented, stored, and manipulated in digital systems.
• Real-world applications include game engines (Unity/Unreal), movie rendering (Blender), and AR/VR experiences.
• Exam focus: Compare models, derive shading equations, and explain colour space conversions.

1. Illumination Models: How Light Interacts with Surfaces

Light interaction with surfaces is modeled mathematically to create realistic 3D scenes. The Phong Reflection Model is the most widely used, combining three components:

1.1 Components of Illumination

graph TD
    A["Light Source"] --> B["Ambient Light"]
    A --> C["Diffuse Reflection"]
    A --> D["Specular Reflection"]
    B --> E["Uniform Base Illumination"]
    C --> F["Surface Colour × Light Intensity"]
    D --> G["Highlight Spot"]

• Ambient Light: Simulates indirect light (e.g., light bouncing off walls). Formula: $$I_a=k_a\cdot I_{ambient}$$ where $k_a$ = ambient reflection coefficient, $I_{ambient}$ = ambient light intensity.

• Diffuse Reflection: Light scattered equally in all directions (Lambertian reflection). Formula: $$I_d=k_d\cdot (L\cdot N)\cdot I_{diffuse}$$ where $L$ = light direction vector, $N$ = surface normal, $k_d$ = diffuse coefficient.

• Specular Reflection: Highlights (e.g., shiny surfaces). Formula: $$I_s=k_s\cdot (R\cdot V{)}^n\cdot I_{specular}$$ where $R$ = reflection vector, $V$ = viewer direction, $n$ = shininess exponent.

Total Illumination: $$I=I_a+I_d+I_s$$

1.2 Worked Example: Calculating Illumination for a Red Sphere

Assume:

• Light source at $L=(0,0,1)$
• Viewer at $V=(0,0,-1)$
• Surface normal $N=(0,0,1)$
• Reflection vector $R=(0,0,1)$ (mirror-like)
• Coefficients: $k_a=0.2$, $k_d=0.7$, $k_s=0.5$, $n=10$
• Light intensities: $I_{ambient}=0.5$, $I_{diffuse}=1.0$, $I_{specular}=1.0$

Step-by-Step Calculation:

1. Ambient: $$I_a=0.2\times 0.5=0.1$$
2. Diffuse ($L\cdot N=\cos (0^{\circ })=1$): $$I_d=0.7\times 1\times 1.0=0.7$$
3. Specular ($R\cdot V=\cos (0^{\circ })=1$): $$I_s=0.5\times (1{)}^{10}\times 1.0=0.5$$
4. Total Illumination: $$I=0.1+0.7+0.5=1.3$$ (Clamped to $[0,1]$ for RGB: $I=1.0$)

Real-World Tie-In: In Unity3D, the Standard Shader uses a modified Phong model. For a golden statue in a museum, the specular component ($I_s$) creates the shiny highlights, while diffuse ($I_d$) defines the base colour.

2. Shading Techniques: Rendering Surfaces Realistically

Shading determines how colours and intensities vary across a surface. Three key methods:

2.1 Gouraud vs. Phong Shading

Worked Example: Gouraud Shading for a Triangle Vertices:

• $A=(0,0,0)$, colour $C_A=(1,0,0)$ (red)
• $B=(2,0,0)$, colour $C_B=(0,1,0)$ (green)
• $C=(1,2,0)$, colour $C_C=(0,0,1)$ (blue)

Step 1: Interpolate colours at pixel $P=(1,1,0)$ using barycentric coordinates: $$P=0.25A+0.25B+0.5C$$ $$C_P=0.25(1,0,0)+0.25(0,1,0)+0.5(0,0,1)=(0.25,0.25,0.5)$$ Result: Pixel at $P$ is purple ($0.25R,0.25G,0.5B$).

Real-World Tie-In: Pathao’s AR navigation uses Gouraud shading for real-time rendering of 3D maps. The interpolated colours help distinguish roads, buildings, and traffic in low-end devices.

3. Colour Models: Representing and Manipulating Colour

Colour models define how colours are stored and processed. Three key models:

3.1 RGB (Additive Colour Model)

• Used in monitors, projectors, and digital cameras.
• Combines Red, Green, Blue light to create all colours.
• Gamut: All colours visible to the human eye (but limited by device).

Worked Example: RGB to Grayscale Conversion Convert $RGB=(0.8,0.3,0.1)$ to grayscale using luminance weights: $$\text{Grayscale}=0.299R+0.587G+0.114B=0.299(0.8)+0.587(0.3)+0.114(0.1)=0.45$$ Result: Grayscale value = $0.45$ (dark gray).

3.2 CMYK (Subtractive Colour Model)

• Used in printing (Cyan, Magenta, Yellow, Key/Black).
• Conversion from RGB: $$C=1-R,M=1-G,Y=1-B,K=\min (1-R,1-G,1-B)$$

Worked Example: Print a red logo ($RGB=(1,0,0)$): $$C=1-1=0,M=1-0=1,Y=1-0=1,K=\min (0,1,1)=0$$ Result: $CMYK=(0,100,100,0)$ (magenta + yellow = red).

3.3 HSL/HSV (Perceptual Colour Model)

• Hue: $0^{\circ }$ to $360^{\circ }$ (colour wheel).
• Saturation: $0\%$ to $100\%$ (intensity).
• Lightness/Value: $0\%$ (black) to $100\%$ (white).

Worked Example: Convert $RGB=(1,0.5,0)$ (orange) to HSL:

1. Hue: $$H=30^{\circ }(\text{orange})$$
2. Saturation: $$S=1-\frac{\min (1,0.5,0)}{\max (1,0.5,0)}=1-0=100\%$$
3. Lightness: $$L=\frac{\max (1,0.5,0)+\min (1,0.5,0)}{2}=0.5$$ Result: $HSL=(30^{\circ },100\%,50\%)$.

Real-World Tie-In: Khalti’s app icons use HSL for consistent branding. Adjusting saturation makes the "Pay" button stand out while keeping harmony with the theme.

4. Colour Space Conversions

Critical for compatibility between devices (e.g., screen to print). Common conversions:

Worked Example: Convert $RGB=(0.2,0.4,0.8)$ (blue) to CMYK: $$C=1-0.2=0.8,M=1-0.4=0.6,Y=1-0.8=0.2,K=\min (0.8,0.6,0.2)=0.2$$ Result: $CMYK=(80\%,60\%,20\%,20\%)$.

5. Real-World Applications

5.1 Games and AR/VR

• Unity/Unreal Engine: Use Phong shading for realistic materials (e.g., metal, glass).
• Pokémon GO: Combines Gouraud shading for performance with Phong highlights for critical UI elements.

5.2 Movie Rendering (Blender, Maya)

• Disney’s "Frozen": Uses advanced illumination models (e.g., subsurface scattering) for ice and skin.
• Nepali Films: Low-budget films use simplified Phong models for character shading.

5.3 E-Commerce (Daraz, Amazon)

• Product Rendering: CMYK is used for printed catalogues, while RGB dominates online displays.
• Colour Accuracy: Daraz ensures product images match real colours by calibrating RGB profiles.

5.4 Medical Imaging

• MRI Scans: Use HSL to distinguish tissues (e.g., high saturation for blood vessels).
• Nepal’s Health Sector: Ultrasound images often convert RGB to grayscale for clarity.

6. Exam Tip

What Examiners Look For:

1. Illumination Models:

   • Derive the Phong equation step-by-step.
   • Explain the difference between diffuse and specular reflection.
   • Common Pitfall: Forgetting to normalize vectors ($L\cdot N$) or clamp final intensity.

2. Shading Techniques:

   • Compare Gouraud vs. Phong in terms of realism and cost.
   • Worked Example: Given vertex colours/normals, compute interpolated values.

3. Colour Models:

   • Conversion Questions: RGB ↔ CMYK, RGB ↔ Grayscale.
   • Applications: When to use HSL (design), CMYK (print), RGB (screens).

4. Real-World Scenarios:

   • Ncell’s 3D Ads: How would you implement shading for a floating phone in an ad?
   • NEPSE Stock Charts: How would you represent red/green bars (RGB vs. HSL)?

Sample Exam Question: "A triangle has vertices A(red), B(green), C(blue). Using Gouraud shading, what colour appears at the centroid? Derive the CMYK equivalent of the centroid’s colour."