Project Overview

This project focuses on replicating the physical phenomenon of Thin-film Interference in real-time. By deconstructing the interaction between light and microscopic surface layers, I translated complex optics into an optimized shader suitable for game engines. The goal was to achieve a fluid, realistic iridescent effect without the heavy cost of physical spectral integration.

1. Concept: Thin-film Interference

The Physics: A bubble consists of an incredibly thin film of liquid with varying thickness. When light hits this surface, it undergoes complex reflection and interference at a microscopic level—similar to how a prism splits light. This constructive and destructive interference creates the shifting, rainbow-like colors we perceive at a macroscopic level.

The Optimization Strategy: Calculating actual spectral interference per pixel is computationally expensive. To optimize this, I used a Look-Up Texture (LUT) approach. This pre-bakes the complex physics into a texture gradient, allowing for lightweight sampling at runtime.

2. Technical Breakdown

A. Angle-based Spectral Mapping

I simplified the physics into a straightforward “color lookup” operation based on the viewing angle:

1. Calculate Incidence: Compute the angle at which light hits the surface using the Dot product of the Surface Normal and View/Light direction ($N \cdot V$ or $N \cdot L$).

2. Remap Coordinates: Convert the calculated cosine result $[-1, 1]$ into the $[0, 1]$ range required for UV coordinates.

   
   Step 2: Remapping the incidence angle to valid UV coordinates.

3. LUT Sampling: Use this coordinate to sample a pre-baked “Spectral Gradient Ramp.” The sampled color represents the interference result for that specific angle.

   
   Step 3: The spectral gradient ramp used as a Look-Up Texture (LUT).

Result: Transforms a complex math problem into a simple texture lookup, significantly reducing GPU computational load.

B. Topology & Mapping Correction

To simulate the fluid motion on the bubble’s surface, I processed a photo of a real bubble into a black-and-white noise texture. However, applying this to a sphere revealed a common problem:

• The Artifact: Standard spherical UV mapping causes texture pinching (distortion) at the poles.

  
  The Issue: Pole pinching artifacts when using standard UVs.

• The Solution: I discarded the model’s default UVs and switched to Tri-planar (World-Space) Mapping.

  
  The Fix: Switching to World-Aligned (Tri-planar) mapping.

• Implementation: Although Unreal provides built-in nodes, I implemented the logic from scratch to better understand the blending math. It projects the texture along the X, Y, and Z axes independently and blends them based on the absolute values of the vertex normal.

  
  Custom implementation of Tri-planar mapping logic.

C. Material Strategy (The “PBR Hack”)

To achieve the specific aesthetic of a soap bubble, I used a somewhat counter-intuitive PBR configuration:

• The Hack: I set Metallic to 1.0.
• Why?: Technically, a bubble is a dielectric (non-metal). However, in many PBR workflows, marking a material as “Metallic” forces the renderer to rely heavily on Specular Reflection for its color. By feeding the iridescent rainbow color into Base Color with Metalness at 1, the engine treats the rainbow as a pure reflection. This avoids the need for complex custom specular lighting models and results in a brighter, sharper look.
• Detail Polish: I applied the Fresnel Effect to both the Opacity and Metallic channels. This makes the bubble’s edges more solid and reflective (glancing angles) while keeping the center transparent, effectively emphasizing the bubble’s volume.