@basementstudio/shader-lab 0.1.0

package/packages/shader-lab-react/src/renderer/gradient-pass.ts

@@ -0,0 +1,521 @@
+import {
+  clamp,
+  cos,
+  dot,
+  Fn,
+  float,
+  max,
+  mix,
+  pow,
+  select,
+  sin,
+  smoothstep,
+  type TSLNode,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import type { LayerParameterValues } from "../types/editor"
+import { PassNode } from "./pass-node"
+import {
+  acesTonemap,
+  cinematicTonemap,
+  reinhardTonemap,
+  totosTonemap,
+} from "./shaders/tsl/color/tonemapping"
+import { perlinNoise3d } from "./shaders/tsl/noise/perlin-noise-3d"
+import { ridgeNoise } from "./shaders/tsl/noise/ridge-noise"
+import { simplexNoise3d } from "./shaders/tsl/noise/simplex-noise-3d"
+import { turbulence } from "./shaders/tsl/noise/turbulence"
+import { valueNoise3d } from "./shaders/tsl/noise/value-noise-3d"
+import { voronoiNoise3d } from "./shaders/tsl/noise/voronoi-noise-3d"
+import { grainTexturePattern } from "./shaders/tsl/patterns/grain-texture-pattern"
+
+type Node = TSLNode
+type NoiseMode =
+  | "perlin"
+  | "ridge"
+  | "simplex"
+  | "turbulence"
+  | "value"
+  | "voronoi"
+type TonemapMode = "aces" | "cinematic" | "none" | "reinhard" | "totos"
+
+function hexToRgb(hex: string): [number, number, number] {
+  const normalized = hex.trim().replace("#", "")
+  const value =
+    normalized.length === 3
+      ? normalized
+          .split("")
+          .map((entry) => `${entry}${entry}`)
+          .join("")
+      : normalized.padEnd(6, "0").slice(0, 6)
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16) / 255,
+    Number.parseInt(value.slice(2, 4), 16) / 255,
+    Number.parseInt(value.slice(4, 6), 16) / 255,
+  ]
+}
+
+export class GradientPass extends PassNode {
+  private readonly activePointsUniform: Node
+  private readonly animateUniform: Node
+  private readonly aspectUniform: Node
+  private readonly falloffUniform: Node
+  private readonly glowStrengthUniform: Node
+  private readonly glowThresholdUniform: Node
+  private readonly grainAmountUniform: Node
+  private readonly motionAmountUniform: Node
+  private readonly motionSpeedUniform: Node
+  private readonly pointColorUniforms: {
+    blue: Node
+    green: Node
+    red: Node
+  }[]
+  private readonly pointPositionUniforms: {
+    x: Node
+    y: Node
+  }[]
+  private readonly pointWeightUniforms: Node[]
+  private readonly timeUniform: Node
+  private readonly vignetteRadiusUniform: Node
+  private readonly vignetteSoftnessUniform: Node
+  private readonly vignetteStrengthUniform: Node
+  private noiseSeed = 0
+  private readonly vortexAmountUniform: Node
+  private readonly warpAmountUniform: Node
+  private readonly warpBiasUniform: Node
+  private readonly warpDecayUniform: Node
+  private readonly warpScaleUniform: Node
+
+  private isAnimated = true
+  private noiseMode: NoiseMode = "simplex"
+  private tonemapMode: TonemapMode = "aces"
+  private warpIterations = 1
+
+  constructor(layerId: string) {
+    super(layerId)
+    this.timeUniform = uniform(0)
+    this.animateUniform = uniform(1)
+    this.aspectUniform = uniform(1)
+    this.activePointsUniform = uniform(5)
+    this.warpAmountUniform = uniform(0.18)
+    this.warpBiasUniform = uniform(0.5)
+    this.warpDecayUniform = uniform(1)
+    this.warpScaleUniform = uniform(1.4)
+    this.vortexAmountUniform = uniform(0.12)
+    this.motionAmountUniform = uniform(0.18)
+    this.motionSpeedUniform = uniform(0.2)
+    this.falloffUniform = uniform(1.85)
+    this.glowStrengthUniform = uniform(0.18)
+    this.glowThresholdUniform = uniform(0.62)
+    this.grainAmountUniform = uniform(0.03)
+    this.vignetteStrengthUniform = uniform(0.18)
+    this.vignetteRadiusUniform = uniform(0.9)
+    this.vignetteSoftnessUniform = uniform(0.32)
+    this.pointColorUniforms = Array.from({ length: 5 }, () => ({
+      blue: uniform(1),
+      green: uniform(1),
+      red: uniform(1),
+    }))
+    this.pointPositionUniforms = Array.from({ length: 5 }, () => ({
+      x: uniform(0),
+      y: uniform(0),
+    }))
+    this.pointWeightUniforms = Array.from({ length: 5 }, () => uniform(1))
+    this.rebuildEffectNode()
+  }
+
+  override updateParams(params: LayerParameterValues): void {
+    const activePoints =
+      typeof params.activePoints === "number"
+        ? Math.max(2, Math.min(5, Math.round(params.activePoints)))
+        : 5
+    const noiseSeed =
+      typeof params.noiseSeed === "number" ? params.noiseSeed : 0
+    const warpAmount =
+      typeof params.warpAmount === "number"
+        ? Math.max(0, params.warpAmount)
+        : 0.18
+    const warpScale =
+      typeof params.warpScale === "number"
+        ? Math.max(0.05, params.warpScale)
+        : 1.4
+    const warpIterations =
+      typeof params.warpIterations === "number"
+        ? Math.max(1, Math.min(5, Math.round(params.warpIterations)))
+        : 1
+    const warpDecay =
+      typeof params.warpDecay === "number" ? Math.max(0.1, params.warpDecay) : 1
+    const warpBias =
+      typeof params.warpBias === "number"
+        ? Math.max(0, Math.min(1, params.warpBias))
+        : 0.5
+    const vortexAmount =
+      typeof params.vortexAmount === "number" ? params.vortexAmount : 0.12
+    const motionAmount =
+      typeof params.motionAmount === "number"
+        ? Math.max(0, params.motionAmount)
+        : 0.18
+    const motionSpeed =
+      typeof params.motionSpeed === "number"
+        ? Math.max(0, params.motionSpeed)
+        : 0.2
+    const animateEnabled = params.animate !== false
+    const falloff =
+      typeof params.falloff === "number" ? Math.max(0.25, params.falloff) : 1.85
+    const glowStrength =
+      typeof params.glowStrength === "number"
+        ? Math.max(0, params.glowStrength)
+        : 0.18
+    const glowThreshold =
+      typeof params.glowThreshold === "number"
+        ? Math.max(0, Math.min(1, params.glowThreshold))
+        : 0.62
+    const grainAmount =
+      typeof params.grainAmount === "number"
+        ? Math.max(0, params.grainAmount)
+        : 0.03
+    const vignetteStrength =
+      typeof params.vignetteStrength === "number"
+        ? Math.max(0, Math.min(1, params.vignetteStrength))
+        : 0.18
+    const vignetteRadius =
+      typeof params.vignetteRadius === "number"
+        ? Math.max(0.01, params.vignetteRadius)
+        : 0.9
+    const vignetteSoftness =
+      typeof params.vignetteSoftness === "number"
+        ? Math.max(0.01, params.vignetteSoftness)
+        : 0.32
+
+    this.activePointsUniform.value = activePoints
+    this.animateUniform.value = animateEnabled ? 1 : 0
+    this.warpAmountUniform.value = warpAmount
+    this.warpBiasUniform.value = warpBias
+    this.warpDecayUniform.value = warpDecay
+    this.warpScaleUniform.value = warpScale
+    this.vortexAmountUniform.value = vortexAmount
+    this.motionAmountUniform.value = motionAmount
+    this.motionSpeedUniform.value = motionSpeed
+    this.falloffUniform.value = falloff
+    this.glowStrengthUniform.value = glowStrength
+    this.glowThresholdUniform.value = glowThreshold
+    this.grainAmountUniform.value = grainAmount
+    this.vignetteStrengthUniform.value = vignetteStrength
+    this.vignetteRadiusUniform.value = vignetteRadius
+    this.vignetteSoftnessUniform.value = vignetteSoftness
+
+    for (let index = 0; index < 5; index += 1) {
+      const point = index + 1
+      const colorKey = `point${point}Color`
+      const positionKey = `point${point}Position`
+      const weightKey = `point${point}Weight`
+      const rgb = hexToRgb(
+        typeof params[colorKey] === "string" ? params[colorKey] : "#ffffff"
+      )
+      const position = Array.isArray(params[positionKey])
+        ? params[positionKey]
+        : [0, 0]
+
+      this.pointColorUniforms[index]!.red.value = rgb[0]
+      this.pointColorUniforms[index]!.green.value = rgb[1]
+      this.pointColorUniforms[index]!.blue.value = rgb[2]
+      this.pointPositionUniforms[index]!.x.value = position[0] ?? 0
+      this.pointPositionUniforms[index]!.y.value = position[1] ?? 0
+      this.pointWeightUniforms[index]!.value =
+        typeof params[weightKey] === "number"
+          ? Math.max(0, params[weightKey])
+          : 1
+    }
+
+    let nextTonemapMode: TonemapMode = "aces"
+    let nextNoiseMode: NoiseMode = "simplex"
+
+    switch (params.noiseType) {
+      case "perlin":
+      case "ridge":
+      case "turbulence":
+      case "value":
+      case "voronoi":
+        nextNoiseMode = params.noiseType
+        break
+      default:
+        nextNoiseMode = "simplex"
+        break
+    }
+
+    switch (params.tonemapMode) {
+      case "none":
+      case "reinhard":
+      case "totos":
+      case "cinematic":
+        nextTonemapMode = params.tonemapMode
+        break
+      case "uncharted2":
+        nextTonemapMode = "totos"
+        break
+      default:
+        nextTonemapMode = "aces"
+        break
+    }
+
+    this.isAnimated =
+      animateEnabled && motionSpeed > 0 && (motionAmount > 0 || warpAmount > 0)
+
+    let needsRebuild = false
+
+    if (nextNoiseMode !== this.noiseMode) {
+      this.noiseMode = nextNoiseMode
+      needsRebuild = true
+    }
+
+    if (nextTonemapMode !== this.tonemapMode) {
+      this.tonemapMode = nextTonemapMode
+      needsRebuild = true
+    }
+
+    if (warpIterations !== this.warpIterations) {
+      this.warpIterations = warpIterations
+      needsRebuild = true
+    }
+
+    if (noiseSeed !== this.noiseSeed) {
+      this.noiseSeed = noiseSeed
+      needsRebuild = true
+    }
+
+    if (needsRebuild) {
+      this.rebuildEffectNode()
+    }
+  }
+
+  override resize(width: number, height: number): void {
+    this.aspectUniform.value = width / Math.max(height, 1)
+  }
+
+  override needsContinuousRender(): boolean {
+    return this.isAnimated
+  }
+
+  protected override beforeRender(time: number): void {
+    this.timeUniform.value = time
+  }
+
+  protected override buildEffectNode(): Node {
+    const hasRequiredUniforms =
+      this.timeUniform &&
+      this.aspectUniform &&
+      this.activePointsUniform &&
+      this.warpAmountUniform &&
+      this.warpBiasUniform &&
+      this.warpDecayUniform &&
+      this.warpScaleUniform &&
+      this.vortexAmountUniform &&
+      this.motionAmountUniform &&
+      this.motionSpeedUniform &&
+      this.falloffUniform &&
+      this.glowStrengthUniform &&
+      this.glowThresholdUniform &&
+      this.grainAmountUniform &&
+      this.vignetteStrengthUniform &&
+      this.vignetteRadiusUniform &&
+      this.vignetteSoftnessUniform
+
+    if (
+      !hasRequiredUniforms ||
+      this.pointColorUniforms.length === 0 ||
+      this.pointPositionUniforms.length === 0 ||
+      this.pointWeightUniforms.length === 0
+    ) {
+      return this.inputNode
+    }
+
+    return Fn(() => {
+      const baseUv = vec2(
+        uv().x.mul(2).sub(1).mul(this.aspectUniform),
+        float(1).sub(uv().y).mul(2).sub(1)
+      )
+      const vignetteUv = vec2(
+        uv().x.mul(2).sub(1),
+        float(1).sub(uv().y).mul(2).sub(1)
+      )
+      const time = this.timeUniform
+        .mul(this.motionSpeedUniform)
+        .mul(this.animateUniform)
+      const warpedUv = baseUv.toVar()
+      const biasX = this.warpBiasUniform.mul(2)
+      const biasY = float(1).sub(this.warpBiasUniform).mul(2)
+
+      for (let i = 1; i <= this.warpIterations; i += 1) {
+        const strength = this.warpAmountUniform.div(
+          pow(float(i), this.warpDecayUniform)
+        )
+        const warpInput = warpedUv
+          .mul(this.warpScaleUniform)
+          .add(float(this.noiseSeed).mul(73.7))
+        const timeOffsetX = time.mul(0.1).add(float(i * 100))
+        const timeOffsetY = time.mul(0.1).add(float(i * 200))
+        let noiseX: Node
+        let noiseY: Node
+
+        switch (this.noiseMode) {
+          case "perlin":
+            noiseX = perlinNoise3d(vec3(warpInput, timeOffsetX))
+            noiseY = perlinNoise3d(
+              vec3(warpInput.add(vec2(13.7, 7.1)), timeOffsetY)
+            )
+            break
+          case "value":
+            noiseX = valueNoise3d(vec3(warpInput, timeOffsetX))
+            noiseY = valueNoise3d(
+              vec3(warpInput.add(vec2(13.7, 7.1)), timeOffsetY)
+            )
+            break
+          case "voronoi":
+            noiseX = voronoiNoise3d(vec3(warpInput, timeOffsetX)).mul(2).sub(1)
+            noiseY = voronoiNoise3d(
+              vec3(warpInput.add(vec2(13.7, 7.1)), timeOffsetY)
+            )
+              .mul(2)
+              .sub(1)
+            break
+          case "ridge":
+            noiseX = ridgeNoise(vec3(warpInput, timeOffsetX)).mul(2).sub(1)
+            noiseY = ridgeNoise(
+              vec3(warpInput.add(vec2(13.7, 7.1)), timeOffsetY)
+            )
+              .mul(2)
+              .sub(1)
+            break
+          case "turbulence":
+            {
+              const disp = turbulence(warpInput, timeOffsetX.mul(20), {
+                _amp: 0.7,
+                _exp: 1.4,
+                _freq: 2,
+                _num: 10,
+                _speed: 0.3,
+              })
+              noiseX = disp.x
+              noiseY = disp.y
+            }
+            break
+          default:
+            noiseX = simplexNoise3d(vec3(warpInput, timeOffsetX))
+            noiseY = simplexNoise3d(
+              vec3(warpInput.add(vec2(13.7, 7.1)), timeOffsetY)
+            )
+            break
+        }
+
+        warpedUv.x.addAssign(strength.mul(noiseX).mul(biasX))
+        warpedUv.y.addAssign(strength.mul(noiseY).mul(biasY))
+      }
+
+      const distanceFromCenter = max(
+        dot(warpedUv, warpedUv),
+        float(1e-4)
+      ).sqrt()
+      const vortexAngle = distanceFromCenter.mul(this.vortexAmountUniform)
+      const rotatedUv = vec2(
+        warpedUv.x.mul(cos(vortexAngle)).sub(warpedUv.y.mul(sin(vortexAngle))),
+        warpedUv.x.mul(sin(vortexAngle)).add(warpedUv.y.mul(cos(vortexAngle)))
+      )
+
+      const finalColor = vec3(0).toVar()
+      const totalWeight = float(0).toVar()
+
+      for (let index = 0; index < 5; index += 1) {
+        const pointIndex = float(index + 1)
+        const active = select(
+          this.activePointsUniform.greaterThanEqual(pointIndex),
+          float(1),
+          float(0)
+        )
+        const pointPosition = vec2(
+          this.pointPositionUniforms[index]!.x.add(
+            sin(time.mul(pointIndex.mul(0.73)).add(pointIndex)).mul(
+              this.motionAmountUniform
+            )
+          ),
+          this.pointPositionUniforms[index]!.y.add(
+            cos(time.mul(pointIndex.mul(0.41)).add(pointIndex.mul(1.7))).mul(
+              this.motionAmountUniform
+            )
+          )
+        )
+        const delta = rotatedUv.sub(pointPosition)
+        const distance = max(dot(delta, delta), float(1e-4)).sqrt()
+        const baseWeight = float(1).div(
+          max(pow(distance, this.falloffUniform), float(1e-4))
+        )
+        const weighted = baseWeight
+          .mul(this.pointWeightUniforms[index]!)
+          .mul(active)
+        const color = vec3(
+          this.pointColorUniforms[index]!.red,
+          this.pointColorUniforms[index]!.green,
+          this.pointColorUniforms[index]!.blue
+        )
+
+        finalColor.addAssign(color.mul(weighted))
+        totalWeight.addAssign(weighted)
+      }
+
+      finalColor.assign(finalColor.div(max(totalWeight, float(1e-4))))
+
+      switch (this.tonemapMode) {
+        case "reinhard":
+          finalColor.assign(reinhardTonemap(finalColor))
+          break
+        case "totos":
+          finalColor.assign(totosTonemap(finalColor))
+          break
+        case "cinematic":
+          finalColor.assign(cinematicTonemap(finalColor))
+          break
+        case "none":
+          break
+        default:
+          finalColor.assign(acesTonemap(finalColor))
+          break
+      }
+
+      const luma = dot(finalColor, vec3(0.2126, 0.7152, 0.0722))
+      const glow = smoothstep(this.glowThresholdUniform, float(1), luma).mul(
+        this.glowStrengthUniform
+      )
+      finalColor.addAssign(vec3(glow, glow, glow))
+
+      const grain = grainTexturePattern(uv())
+        .sub(0.5)
+        .mul(this.grainAmountUniform)
+      finalColor.addAssign(vec3(grain, grain, grain))
+
+      const vignetteDistance = max(
+        dot(vignetteUv, vignetteUv),
+        float(1e-4)
+      ).sqrt()
+      const vignette = smoothstep(
+        this.vignetteRadiusUniform,
+        this.vignetteRadiusUniform.sub(this.vignetteSoftnessUniform),
+        vignetteDistance
+      )
+      const vignetteMix = mix(float(1), vignette, this.vignetteStrengthUniform)
+      finalColor.mulAssign(vignetteMix)
+
+      return vec4(
+        clamp(
+          finalColor,
+          vec3(float(0), float(0), float(0)),
+          vec3(float(1), float(1), float(1))
+        ),
+        float(1)
+      )
+    })()
+  }
+}