Refraction Pipeline & Chromatic Dispersion

The refraction material mode in TxBaseSurface and TxGlassSurface recreates physical refraction and dispersion inside modern Web and Electron runtimes.

Snell's Law and Physical Refraction

Light traveling across media boundaries follows Snell's Law: $$n_1 \sin\theta_1 = n_2 \sin\theta_2$$ When viewing background elements through a card, perimeter light should bend. TuffEx applies parameterized displacement vectors to shift background pixels, mimicking optical refraction.

RGB Chromatic Dispersion

Natural white light comprises a continuous spectrum. Inside real prisms, different wavelengths exhibit distinct refractive indexes (Cauchy's dispersion equation): $$n(\lambda) = A + \frac{B}{\lambda^2}$$ Blue light refracts more sharply than red light ($n_{\text{Blue}} > n_{\text{Red}}$). TuffEx introduces slight angular offsets across Red, Green, and Blue channels, separating subtle spectral fringes along refracted contours.

Smoothstep Intensity Curve Mapping

To avoid abrupt transitions at low intensities and severe distortions at high values, TuffEx applies a cubic smoothstep curve: $$S(x) = 3x^2 - 2x^3 \quad (x \in 0, 1)$$ This $C^1$-continuous Hermite interpolation eliminates boundary shocks, ensuring the refraction strength parameter behaves predictably.

The SVG Displacement Map Pipeline

TuffEx implements its refraction shader via a GPU-accelerated SVG filter pipeline:

<!-- TxGlassSurface Underlying Shader Pipeline -->
<filter id="tx-refract-filter" x="-20%" y="-20%" width="140%" height="140%">
  <!-- Generate Perlin / fractal perturbation source -->
  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" result="noise" />
  <!-- Pixel displacement mapping along Red/Green channels -->
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="12" xChannelSelector="R" yChannelSelector="G" />
</filter>

The filter couples with CSS variables injected at runtime, allowing the GPU compositor to paint real-time optical frames.