blendOverlay: Conditional Multiply-Screen Blend

Mathematical Foundation of Overlay

Overlay blending creates natural color enhancement by conditionally applying multiply or screen blending based on the base color value. This creates realistic shadow and highlight behavior that responds to the underlying image tones.

The mathematical definition is:

$$C_{result} = \begin{cases} 2 \cdot C_{base} \cdot C_{blend} & \text{if } C_{base} < 0.5 \\ 1 - 2(1 - C_{base})(1 - C_{blend}) & \text{otherwise} \end{cases}$$

The 50% threshold creates a natural division where dark areas are multiplied (creating shadows) and bright areas are screened (creating highlights).

Conditional Enhancement Properties

Base Value	Applied Mode	Effect	Mathematical Result
Dark (< 0.5)	Multiply × 2	Shadow enhancement	Darkening
Bright (≥ 0.5)	Screen mode	Highlight enhancement	Brightening
50% Gray	Transition point	Natural boundary	Smooth blend
Neutral Blend	Preserves base	No dramatic change	Natural enhancement

Live Editor

const fragment = () => {
      const gradient = vec3(uv.x)
      const base = gradient
      const pattern = float(0.5).step(uv.y.mul(10).fract())
      const blend = vec3(pattern.mul(0.3).add(0.4))
      const result = blendOverlayVec3(base, blend)
      return vec4(result, 1)
}