Refraction Pipeline & Chromatic Dispersion

The refraction material mode of TxBaseSurface, with TxGlassSurface as its glass layer, 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 displaces the Red, Green and Blue channels separately, each by a slightly different amount (scales of −180, −170 and −160 by default), so the channels part and leave subtle spectral fringes along refracted contours.

Smoothstep Intensity Curve Mapping

To avoid abrupt transitions at low intensities and severe distortions at high values, TxBaseSurface divides refraction-strength (0–100, 62 by default) by 100 and passes it through a cubic smoothstep: $$S(x) = 3x^2 - 2x^3 \quad (x \in [0, 1])$$ S is a $C^1$-continuous Hermite interpolation with zero slope at both ends, so strength changes slowly near the start and the end instead of jumping at the first nudge. A filmic curve follows: $$s = 1 - \left(1 - S(x)\right)^{1.65}$$ The exponent 1.65 belongs to the default filmic profile; soft uses 1.15 and cinematic 2.2. Every parameter is then interpolated by s between two ends: in the filmic profile the displacement scale runs from −110 to −360, so a strength of 0 still keeps a scale of −110. The component uses this strength model only when one of refraction-strength, refraction-angle or refraction-profile is set; otherwise it uses fixed defaults (a scale of −180).

The SVG Displacement Map Pipeline

TxGlassSurface's glass layer is an SVG filter, applied to what lies behind it as backdrop-filter: url(#…):

<!-- TxGlassSurface's filter (simplified, default parameters) -->
<filter id="tx-glass-filter-…" color-interpolation-filters="sRGB">
  <!-- Displacement map: an SVG generated at the element's size, a horizontal red gradient,
       a vertical blue one and a blurred grey patch in the middle -->
  <feImage href="data:image/svg+xml,…" result="map" />
  <!-- One displacement per channel: scale = distortionScale + the channel's offset -->
  <feDisplacementMap in="SourceGraphic" in2="map" scale="-180" xChannelSelector="R" yChannelSelector="G" result="dispRed" />
  <feColorMatrix in="dispRed" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="red" />
  <!-- Green and blue likewise, at scales of -170 and -160 -->
  <feBlend in="red" in2="green" mode="screen" result="rg" />
  <feBlend in="rg" in2="blue" mode="screen" result="output" />
  <feGaussianBlur in="output" stdDeviation="0.5" />
</filter>

Inside the grey patch every point moves by the same amount, a plain shift; the bending happens in the band around the edge. The component writes the parameters onto the filter nodes with setAttribute, and a ResizeObserver regenerates the map when the element changes size. Safari and Firefox skip this filter and fall back to a backdrop-filter blur.