@basementstudio/shader-lab 0.1.0

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

@@ -0,0 +1,932 @@
+import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js"
+import {
+  abs,
+  clamp,
+  cos,
+  float,
+  floor,
+  max,
+  min,
+  mix,
+  screenSize,
+  select,
+  sin,
+  smoothstep,
+  type TSLNode,
+  texture as tslTexture,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import * as THREE from "three/webgpu"
+import { PassNode } from "./pass-node"
+import { grainTexturePattern } from "./shaders/tsl/patterns/grain-texture-pattern"
+import type { LayerParameterValues } from "../types/editor"
+
+type Node = TSLNode
+type HalftoneColorMode = "cmyk" | "custom" | "duotone" | "monochrome" | "source"
+type CmykBlendMode = "overprint" | "subtractive"
+
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value))
+}
+
+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 HalftonePass extends PassNode {
+  private bloomEnabled = false
+  private bloomNode: ReturnType<typeof bloom> | null = null
+  private colorMode: HalftoneColorMode = "cmyk"
+  private cmykBlendMode: CmykBlendMode = "subtractive"
+
+  private readonly spacingUniform: Node
+  private readonly dotSizeUniform: Node
+  private readonly dotMinUniform: Node
+  private readonly shapeUniform: Node
+  private readonly angleUniform: Node
+  private readonly contrastUniform: Node
+  private readonly softnessUniform: Node
+  private readonly invertUniform: Node
+
+  private readonly inkRedUniform: Node
+  private readonly inkGreenUniform: Node
+  private readonly inkBlueUniform: Node
+
+  private readonly duotoneLightUniform: Node
+  private readonly duotoneDarkUniform: Node
+
+  private readonly customBgColorUniform: Node
+  private readonly customColorCountUniform: Node
+  private readonly customLuminanceBiasUniform: Node
+  private readonly customColor1Uniform: Node
+  private readonly customColor2Uniform: Node
+  private readonly customColor3Uniform: Node
+  private readonly customColor4Uniform: Node
+  private readonly bloomIntensityUniform: Node
+  private readonly bloomRadiusUniform: Node
+  private readonly bloomSoftnessUniform: Node
+  private readonly bloomThresholdUniform: Node
+
+  private readonly cyanAngleUniform: Node
+  private readonly magentaAngleUniform: Node
+  private readonly yellowAngleUniform: Node
+  private readonly keyAngleUniform: Node
+
+  private readonly paperRedUniform: Node
+  private readonly paperGreenUniform: Node
+  private readonly paperBlueUniform: Node
+  private readonly paperGrainUniform: Node
+  private readonly gcrUniform: Node
+  private readonly registrationUniform: Node
+
+  private readonly inkCyanUniform: Node
+  private readonly inkMagentaUniform: Node
+  private readonly inkYellowUniform: Node
+  private readonly inkKeyUniform: Node
+
+  private readonly dotGainUniform: Node
+  private readonly dotMorphUniform: Node
+
+  private sampleNodes: Node[] = []
+
+  constructor(layerId: string) {
+    super(layerId)
+
+    this.spacingUniform = uniform(5)
+    this.dotSizeUniform = uniform(1.0)
+    this.dotMinUniform = uniform(0.0)
+    this.shapeUniform = uniform(0)
+    this.angleUniform = uniform((28 * Math.PI) / 180)
+    this.contrastUniform = uniform(1.0)
+    this.softnessUniform = uniform(0.25)
+    this.invertUniform = uniform(0)
+
+    const [inkR, inkG, inkB] = hexToRgb("#0d1014")
+    this.inkRedUniform = uniform(inkR)
+    this.inkGreenUniform = uniform(inkG)
+    this.inkBlueUniform = uniform(inkB)
+
+    this.duotoneLightUniform = uniform(new THREE.Vector3(0.96, 0.96, 0.94))
+    this.duotoneDarkUniform = uniform(new THREE.Vector3(0.11, 0.11, 0.11))
+
+    const [customBgR, customBgG, customBgB] = hexToRgb("#F5F5F0")
+    this.customBgColorUniform = uniform(
+      new THREE.Vector3(customBgR, customBgG, customBgB)
+    )
+    this.customColorCountUniform = uniform(4)
+    this.customLuminanceBiasUniform = uniform(0)
+
+    const [custom1R, custom1G, custom1B] = hexToRgb("#161616")
+    this.customColor1Uniform = uniform(
+      new THREE.Vector3(custom1R, custom1G, custom1B)
+    )
+    const [custom2R, custom2G, custom2B] = hexToRgb("#595959")
+    this.customColor2Uniform = uniform(
+      new THREE.Vector3(custom2R, custom2G, custom2B)
+    )
+    const [custom3R, custom3G, custom3B] = hexToRgb("#A0A0A0")
+    this.customColor3Uniform = uniform(
+      new THREE.Vector3(custom3R, custom3G, custom3B)
+    )
+    const [custom4R, custom4G, custom4B] = hexToRgb("#E8E8E8")
+    this.customColor4Uniform = uniform(
+      new THREE.Vector3(custom4R, custom4G, custom4B)
+    )
+    this.bloomIntensityUniform = uniform(1.25)
+    this.bloomRadiusUniform = uniform(6)
+    this.bloomSoftnessUniform = uniform(0.35)
+    this.bloomThresholdUniform = uniform(0.6)
+
+    this.cyanAngleUniform = uniform((15 * Math.PI) / 180)
+    this.magentaAngleUniform = uniform((75 * Math.PI) / 180)
+    this.yellowAngleUniform = uniform(0)
+    this.keyAngleUniform = uniform((45 * Math.PI) / 180)
+
+    const [paperR, paperG, paperB] = hexToRgb("#F5F5F0")
+    this.paperRedUniform = uniform(paperR)
+    this.paperGreenUniform = uniform(paperG)
+    this.paperBlueUniform = uniform(paperB)
+    this.paperGrainUniform = uniform(0.15)
+    this.gcrUniform = uniform(0.5)
+    this.registrationUniform = uniform(0)
+
+    const [cyanR, cyanG, cyanB] = hexToRgb("#00AEEF")
+    this.inkCyanUniform = uniform(new THREE.Vector3(cyanR, cyanG, cyanB))
+    const [magR, magG, magB] = hexToRgb("#EC008C")
+    this.inkMagentaUniform = uniform(new THREE.Vector3(magR, magG, magB))
+    const [yelR, yelG, yelB] = hexToRgb("#FFF200")
+    this.inkYellowUniform = uniform(new THREE.Vector3(yelR, yelG, yelB))
+    const [keyR, keyG, keyB] = hexToRgb("#1a1a1a")
+    this.inkKeyUniform = uniform(new THREE.Vector3(keyR, keyG, keyB))
+
+    this.dotGainUniform = uniform(0)
+    this.dotMorphUniform = uniform(0)
+
+    this.rebuildEffectNode()
+  }
+
+  override render(
+    renderer: THREE.WebGPURenderer,
+    inputTexture: THREE.Texture,
+    outputTarget: THREE.WebGLRenderTarget,
+    time: number,
+    delta: number
+  ): void {
+    for (const node of this.sampleNodes) {
+      node.value = inputTexture
+    }
+    super.render(renderer, inputTexture, outputTarget, time, delta)
+  }
+
+  override updateParams(params: LayerParameterValues): void {
+    this.spacingUniform.value =
+      typeof params.spacing === "number" ? Math.max(2, params.spacing) : 12
+    this.dotSizeUniform.value =
+      typeof params.dotSize === "number" ? params.dotSize : 0.8
+    this.dotMinUniform.value =
+      typeof params.dotMin === "number" ? params.dotMin : 0
+    this.contrastUniform.value =
+      typeof params.contrast === "number" ? params.contrast : 1
+    this.softnessUniform.value =
+      typeof params.softness === "number" ? params.softness : 0.25
+    this.invertUniform.value = params.invertLuma === true ? 1 : 0
+    this.angleUniform.value =
+      typeof params.angle === "number" ? (params.angle * Math.PI) / 180 : 0
+
+    const shapeMap: Record<string, number> = {
+      circle: 0,
+      square: 1,
+      diamond: 2,
+      line: 3,
+    }
+    this.shapeUniform.value = shapeMap[params.shape as string] ?? 0
+
+    if (typeof params.ink === "string") {
+      const [r, g, b] = hexToRgb(params.ink)
+      this.inkRedUniform.value = r
+      this.inkGreenUniform.value = g
+      this.inkBlueUniform.value = b
+    }
+
+    if (typeof params.duotoneLight === "string") {
+      const [r, g, b] = hexToRgb(params.duotoneLight)
+      ;(this.duotoneLightUniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.duotoneDark === "string") {
+      const [r, g, b] = hexToRgb(params.duotoneDark)
+      ;(this.duotoneDarkUniform.value as THREE.Vector3).set(r, g, b)
+    }
+
+    if (typeof params.customBgColor === "string") {
+      const [r, g, b] = hexToRgb(params.customBgColor)
+      ;(this.customBgColorUniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.customColorCount === "number") {
+      this.customColorCountUniform.value = Math.min(
+        4,
+        Math.max(2, Math.round(params.customColorCount))
+      )
+    }
+    if (typeof params.customLuminanceBias === "number") {
+      this.customLuminanceBiasUniform.value = Math.min(
+        1,
+        Math.max(-1, params.customLuminanceBias)
+      )
+    }
+    if (typeof params.customColor1 === "string") {
+      const [r, g, b] = hexToRgb(params.customColor1)
+      ;(this.customColor1Uniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.customColor2 === "string") {
+      const [r, g, b] = hexToRgb(params.customColor2)
+      ;(this.customColor2Uniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.customColor3 === "string") {
+      const [r, g, b] = hexToRgb(params.customColor3)
+      ;(this.customColor3Uniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.customColor4 === "string") {
+      const [r, g, b] = hexToRgb(params.customColor4)
+      ;(this.customColor4Uniform.value as THREE.Vector3).set(r, g, b)
+    }
+
+    if (typeof params.cyanAngle === "number") {
+      this.cyanAngleUniform.value = (params.cyanAngle * Math.PI) / 180
+    }
+    if (typeof params.magentaAngle === "number") {
+      this.magentaAngleUniform.value = (params.magentaAngle * Math.PI) / 180
+    }
+    if (typeof params.yellowAngle === "number") {
+      this.yellowAngleUniform.value = (params.yellowAngle * Math.PI) / 180
+    }
+    if (typeof params.keyAngle === "number") {
+      this.keyAngleUniform.value = (params.keyAngle * Math.PI) / 180
+    }
+
+    if (typeof params.paperColor === "string") {
+      const [r, g, b] = hexToRgb(params.paperColor)
+      this.paperRedUniform.value = r
+      this.paperGreenUniform.value = g
+      this.paperBlueUniform.value = b
+    }
+    if (typeof params.paperGrain === "number") {
+      this.paperGrainUniform.value = params.paperGrain
+    }
+    if (typeof params.gcr === "number") {
+      this.gcrUniform.value = params.gcr
+    }
+    if (typeof params.registration === "number") {
+      this.registrationUniform.value = params.registration
+    }
+    if (typeof params.dotGain === "number") {
+      this.dotGainUniform.value = params.dotGain
+    }
+    if (typeof params.dotMorph === "number") {
+      this.dotMorphUniform.value = params.dotMorph
+    }
+    const nextBloomIntensity =
+      typeof params.bloomIntensity === "number"
+        ? Math.max(0, params.bloomIntensity)
+        : 1.25
+    const nextBloomThreshold =
+      typeof params.bloomThreshold === "number"
+        ? clamp01(params.bloomThreshold)
+        : 0.6
+    const nextBloomRadius =
+      typeof params.bloomRadius === "number"
+        ? Math.max(0, params.bloomRadius)
+        : 6
+    const nextBloomSoftness =
+      typeof params.bloomSoftness === "number"
+        ? clamp01(params.bloomSoftness)
+        : 0.35
+
+    this.bloomIntensityUniform.value = nextBloomIntensity
+    this.bloomRadiusUniform.value = nextBloomRadius
+    this.bloomSoftnessUniform.value = nextBloomSoftness
+    this.bloomThresholdUniform.value = nextBloomThreshold
+
+    if (typeof params.inkCyan === "string") {
+      const [r, g, b] = hexToRgb(params.inkCyan)
+      ;(this.inkCyanUniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.inkMagenta === "string") {
+      const [r, g, b] = hexToRgb(params.inkMagenta)
+      ;(this.inkMagentaUniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.inkYellow === "string") {
+      const [r, g, b] = hexToRgb(params.inkYellow)
+      ;(this.inkYellowUniform.value as THREE.Vector3).set(r, g, b)
+    }
+    if (typeof params.inkKey === "string") {
+      const [r, g, b] = hexToRgb(params.inkKey)
+      ;(this.inkKeyUniform.value as THREE.Vector3).set(r, g, b)
+    }
+
+    let needsRebuild = false
+
+    const nextColorMode = parseColorMode(params.colorMode)
+    if (nextColorMode !== this.colorMode) {
+      this.colorMode = nextColorMode
+      needsRebuild = true
+    }
+
+    const resolvedBloomEnabled =
+      nextColorMode === "custom" && params.bloomEnabled === true
+    if (resolvedBloomEnabled !== this.bloomEnabled) {
+      this.bloomEnabled = resolvedBloomEnabled
+      needsRebuild = true
+    }
+
+    const nextCmykBlend = parseCmykBlend(params.cmykBlend)
+    if (nextCmykBlend !== this.cmykBlendMode) {
+      this.cmykBlendMode = nextCmykBlend
+      needsRebuild = true
+    }
+
+    if (needsRebuild) {
+      this.rebuildEffectNode()
+      return
+    }
+
+    if (this.bloomNode) {
+      this.bloomNode.strength.value = nextBloomIntensity
+      this.bloomNode.radius.value = this.normalizeBloomRadius(nextBloomRadius)
+      this.bloomNode.threshold.value = nextBloomThreshold
+      this.bloomNode.smoothWidth.value =
+        this.normalizeBloomSoftness(nextBloomSoftness)
+    }
+  }
+
+  override dispose(): void {
+    this.disposeBloomNode()
+    super.dispose()
+  }
+
+  protected override buildEffectNode(): Node {
+    if (!this.spacingUniform) return this.inputNode
+
+    this.disposeBloomNode()
+    this.bloomNode = null
+    this.sampleNodes = []
+
+    const renderTargetUv = vec2(uv().x, float(1).sub(uv().y))
+    const pixCoord = renderTargetUv.mul(screenSize)
+
+    if (this.colorMode === "cmyk") {
+      return this.buildCmykNode(pixCoord, renderTargetUv)
+    }
+
+    return this.buildSingleChannelNode(pixCoord, renderTargetUv)
+  }
+
+  private buildSingleChannelNode(pixCoord: Node, _renderTargetUv: Node): Node {
+    const grid = this.buildHalftoneGrid(
+      pixCoord,
+      this.angleUniform,
+      (sample) => {
+        return float(sample.r)
+          .mul(0.2126)
+          .add(float(sample.g).mul(0.7152))
+          .add(float(sample.b).mul(0.0722))
+      }
+    )
+
+    const darkVec = vec3(
+      float(this.duotoneDarkUniform.x),
+      float(this.duotoneDarkUniform.y),
+      float(this.duotoneDarkUniform.z)
+    )
+    const lightVec = vec3(
+      float(this.duotoneLightUniform.x),
+      float(this.duotoneLightUniform.y),
+      float(this.duotoneLightUniform.z)
+    )
+    const customBgVec = vec3(
+      float(this.customBgColorUniform.x),
+      float(this.customBgColorUniform.y),
+      float(this.customBgColorUniform.z)
+    )
+    const customColor1Vec = vec3(
+      float(this.customColor1Uniform.x),
+      float(this.customColor1Uniform.y),
+      float(this.customColor1Uniform.z)
+    )
+    const customColor2Vec = vec3(
+      float(this.customColor2Uniform.x),
+      float(this.customColor2Uniform.y),
+      float(this.customColor2Uniform.z)
+    )
+    const customColor3Vec = vec3(
+      float(this.customColor3Uniform.x),
+      float(this.customColor3Uniform.y),
+      float(this.customColor3Uniform.z)
+    )
+    const customColor4Vec = vec3(
+      float(this.customColor4Uniform.x),
+      float(this.customColor4Uniform.y),
+      float(this.customColor4Uniform.z)
+    )
+    const customColorCount = clamp(
+      float(this.customColorCountUniform),
+      float(2),
+      float(4)
+    )
+    const customLuminance = clamp(
+      grid.luma.add(float(this.customLuminanceBiasUniform).mul(0.35)),
+      float(0),
+      float(1)
+    )
+
+    let dotColor: Node
+    let bgColor: Node
+    let emissiveColor: Node = vec3(float(0), float(0), float(0))
+
+    switch (this.colorMode) {
+      case "monochrome": {
+        const inkVec = vec3(
+          this.inkRedUniform,
+          this.inkGreenUniform,
+          this.inkBlueUniform
+        )
+        dotColor = vec3(grid.luma, grid.luma, grid.luma).mul(inkVec)
+        bgColor = vec3(0, 0, 0)
+        break
+      }
+      case "duotone":
+        dotColor = mix(darkVec, lightVec, grid.luma)
+        bgColor = darkVec
+        break
+      case "custom":
+        dotColor = select(
+          customColorCount.lessThan(float(2.5)),
+          select(
+            customLuminance.lessThan(float(0.5)),
+            customColor1Vec,
+            customColor2Vec
+          ),
+          select(
+            customColorCount.lessThan(float(3.5)),
+            select(
+              customLuminance.lessThan(float(1 / 3)),
+              customColor1Vec,
+              select(
+                customLuminance.lessThan(float(2 / 3)),
+                customColor2Vec,
+                customColor3Vec
+              )
+            ),
+            select(
+              customLuminance.lessThan(float(0.25)),
+              customColor1Vec,
+              select(
+                customLuminance.lessThan(float(0.5)),
+                customColor2Vec,
+                select(
+                  customLuminance.lessThan(float(0.75)),
+                  customColor3Vec,
+                  customColor4Vec
+                )
+              )
+            )
+          )
+        )
+        bgColor = customBgVec
+        emissiveColor = dotColor.mul(grid.coverage)
+        break
+      default:
+        dotColor = grid.color
+        bgColor = vec3(1, 1, 1)
+        break
+    }
+
+    const baseColor = mix(bgColor, dotColor, grid.coverage)
+
+    if (!(this.colorMode === "custom" && this.bloomEnabled)) {
+      return vec4(baseColor, float(1))
+    }
+
+    const bloomInput = vec4(emissiveColor, float(1))
+    this.bloomNode = bloom(
+      bloomInput,
+      this.bloomIntensityUniform.value as number,
+      this.normalizeBloomRadius(this.bloomRadiusUniform.value as number),
+      this.bloomThresholdUniform.value as number
+    )
+    this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(
+      this.bloomSoftnessUniform.value as number
+    )
+
+    return vec4(
+      clamp(
+        baseColor.add(this.getBloomTextureNode().rgb),
+        vec3(float(0), float(0), float(0)),
+        vec3(float(1), float(1), float(1))
+      ),
+      float(1)
+    )
+  }
+
+  private buildCmykNode(pixCoord: Node, renderTargetUv: Node): Node {
+    const gcrAmount = this.gcrUniform
+
+    const extractCyan = (sample: Node) => {
+      const maxK = float(1).sub(
+        max(max(float(sample.r), float(sample.g)), float(sample.b))
+      )
+      const k = maxK.mul(gcrAmount)
+      const oneMinusK = max(float(1).sub(k), float(0.001))
+      return clamp(
+        float(1).sub(float(sample.r)).sub(k).div(oneMinusK),
+        float(0),
+        float(1)
+      )
+    }
+
+    const extractMagenta = (sample: Node) => {
+      const maxK = float(1).sub(
+        max(max(float(sample.r), float(sample.g)), float(sample.b))
+      )
+      const k = maxK.mul(gcrAmount)
+      const oneMinusK = max(float(1).sub(k), float(0.001))
+      return clamp(
+        float(1).sub(float(sample.g)).sub(k).div(oneMinusK),
+        float(0),
+        float(1)
+      )
+    }
+
+    const extractYellow = (sample: Node) => {
+      const maxK = float(1).sub(
+        max(max(float(sample.r), float(sample.g)), float(sample.b))
+      )
+      const k = maxK.mul(gcrAmount)
+      const oneMinusK = max(float(1).sub(k), float(0.001))
+      return clamp(
+        float(1).sub(float(sample.b)).sub(k).div(oneMinusK),
+        float(0),
+        float(1)
+      )
+    }
+
+    const extractKey = (sample: Node) => {
+      const maxK = float(1).sub(
+        max(max(float(sample.r), float(sample.g)), float(sample.b))
+      )
+      return maxK.mul(gcrAmount)
+    }
+
+    const reg = float(this.registrationUniform)
+    const cyanCoord = pixCoord.add(vec2(reg, float(0)))
+    const magentaCoord = pixCoord.add(vec2(reg.mul(-0.5), reg.mul(0.866)))
+    const yellowCoord = pixCoord.add(vec2(reg.mul(-0.5), reg.mul(-0.866)))
+
+    const cyanGrid = this.buildHalftoneGrid(
+      cyanCoord,
+      this.cyanAngleUniform,
+      extractCyan
+    )
+    const magentaGrid = this.buildHalftoneGrid(
+      magentaCoord,
+      this.magentaAngleUniform,
+      extractMagenta
+    )
+    const yellowGrid = this.buildHalftoneGrid(
+      yellowCoord,
+      this.yellowAngleUniform,
+      extractYellow
+    )
+    const keyGrid = this.buildHalftoneGrid(
+      pixCoord,
+      this.keyAngleUniform,
+      extractKey
+    )
+
+    const grain = grainTexturePattern(renderTargetUv.mul(screenSize))
+    const grainOffset = grain.sub(0.5).mul(this.paperGrainUniform)
+    const paperR = clamp(
+      float(this.paperRedUniform).add(grainOffset),
+      float(0),
+      float(1)
+    )
+    const paperG = clamp(
+      float(this.paperGreenUniform).add(grainOffset),
+      float(0),
+      float(1)
+    )
+    const paperB = clamp(
+      float(this.paperBlueUniform).add(grainOffset),
+      float(0),
+      float(1)
+    )
+
+    const inkC = vec3(
+      float(this.inkCyanUniform.x),
+      float(this.inkCyanUniform.y),
+      float(this.inkCyanUniform.z)
+    )
+    const inkM = vec3(
+      float(this.inkMagentaUniform.x),
+      float(this.inkMagentaUniform.y),
+      float(this.inkMagentaUniform.z)
+    )
+    const inkY = vec3(
+      float(this.inkYellowUniform.x),
+      float(this.inkYellowUniform.y),
+      float(this.inkYellowUniform.z)
+    )
+    const inkK = vec3(
+      float(this.inkKeyUniform.x),
+      float(this.inkKeyUniform.y),
+      float(this.inkKeyUniform.z)
+    )
+
+    const transC = mix(vec3(1, 1, 1), inkC, cyanGrid.coverage)
+    const transM = mix(vec3(1, 1, 1), inkM, magentaGrid.coverage)
+    const transY = mix(vec3(1, 1, 1), inkY, yellowGrid.coverage)
+    const transK = mix(vec3(1, 1, 1), inkK, keyGrid.coverage)
+
+    const paper = vec3(paperR, paperG, paperB)
+    let finalColor: Node
+
+    if (this.cmykBlendMode === "overprint") {
+      finalColor = vec3(
+        clamp(
+          paper.x.mul(transC.x).mul(transM.x).mul(transY.x).mul(transK.x),
+          float(0),
+          float(1)
+        ),
+        clamp(
+          paper.y.mul(transC.y).mul(transM.y).mul(transY.y).mul(transK.y),
+          float(0),
+          float(1)
+        ),
+        clamp(
+          paper.z.mul(transC.z).mul(transM.z).mul(transY.z).mul(transK.z),
+          float(0),
+          float(1)
+        )
+      )
+    } else {
+      const layerC = vec3(
+        paper.x.mul(transC.x),
+        paper.y.mul(transC.y),
+        paper.z.mul(transC.z)
+      )
+      const layerM = vec3(
+        paper.x.mul(transM.x),
+        paper.y.mul(transM.y),
+        paper.z.mul(transM.z)
+      )
+      const layerY = vec3(
+        paper.x.mul(transY.x),
+        paper.y.mul(transY.y),
+        paper.z.mul(transY.z)
+      )
+      const layerK = vec3(
+        paper.x.mul(transK.x),
+        paper.y.mul(transK.y),
+        paper.z.mul(transK.z)
+      )
+
+      finalColor = vec3(
+        clamp(
+          min(min(layerC.x, layerM.x), min(layerY.x, layerK.x)),
+          float(0),
+          float(1)
+        ),
+        clamp(
+          min(min(layerC.y, layerM.y), min(layerY.y, layerK.y)),
+          float(0),
+          float(1)
+        ),
+        clamp(
+          min(min(layerC.z, layerM.z), min(layerY.z, layerK.z)),
+          float(0),
+          float(1)
+        )
+      )
+    }
+
+    return vec4(finalColor, float(1))
+  }
+
+  private buildHalftoneGrid(
+    pixCoord: Node,
+    angleRadians: Node,
+    channelExtractor: (sample: Node) => Node
+  ): { color: Node; coverage: Node; luma: Node } {
+    const cosA = float(cos(angleRadians))
+    const sinA = float(sin(angleRadians))
+
+    const rotX = cosA.mul(pixCoord.x).add(sinA.mul(pixCoord.y))
+    const rotY = cosA.mul(pixCoord.y).sub(sinA.mul(pixCoord.x))
+
+    const ccrX = floor(float(rotX.div(this.spacingUniform)).add(0.5)).mul(
+      this.spacingUniform
+    )
+    const ccrY = floor(float(rotY.div(this.spacingUniform)).add(0.5)).mul(
+      this.spacingUniform
+    )
+
+    const aa = max(
+      float(0.5),
+      float(this.softnessUniform).mul(this.spacingUniform).mul(0.3)
+    )
+
+    let accCov: Node = float(0)
+    let accR: Node = float(0)
+    let accG: Node = float(0)
+    let accB: Node = float(0)
+    let accLuma: Node = float(0)
+
+    let accField: Node = float(0)
+    let accWeightR: Node = float(0)
+    let accWeightG: Node = float(0)
+    let accWeightB: Node = float(0)
+    let accWeightLuma: Node = float(0)
+
+    const morph = clamp(float(this.dotMorphUniform), float(0), float(1))
+    const fieldReach = this.spacingUniform.mul(morph).mul(0.6)
+
+    for (let dj = -1; dj <= 1; dj++) {
+      for (let di = -1; di <= 1; di++) {
+        const cellRX =
+          di === 0 ? ccrX : float(ccrX.add(this.spacingUniform.mul(float(di))))
+        const cellRY =
+          dj === 0 ? ccrY : float(ccrY.add(this.spacingUniform.mul(float(dj))))
+
+        const cellSX = cosA.mul(cellRX).sub(sinA.mul(cellRY))
+        const cellSY = sinA.mul(cellRX).add(cosA.mul(cellRY))
+        const cellUV = vec2(cellSX, cellSY).div(screenSize)
+
+        const sNode = tslTexture(new THREE.Texture(), cellUV)
+        this.sampleNodes.push(sNode)
+
+        const channelValue = channelExtractor(sNode)
+        const clampedValue = clamp(
+          channelValue.mul(this.contrastUniform),
+          float(0),
+          float(1)
+        )
+
+        const effectiveValue = select(
+          this.invertUniform.greaterThan(float(0.5)),
+          float(1).sub(clampedValue),
+          clampedValue
+        )
+
+        const radius = float(this.dotMinUniform)
+          .add(effectiveValue.mul(this.dotSizeUniform))
+          .add(this.dotGainUniform)
+          .mul(this.spacingUniform)
+          .mul(0.5)
+
+        const dx = rotX.sub(cellRX)
+        const dy = rotY.sub(cellRY)
+
+        const dCircle = vec2(dx, dy).length()
+        const dSquare = max(abs(dx), abs(dy))
+        const dDiamond = abs(dx).add(abs(dy))
+        const dLine = abs(dy)
+
+        const dist = select(
+          this.shapeUniform.lessThan(float(0.5)),
+          dCircle,
+          select(
+            this.shapeUniform.lessThan(float(1.5)),
+            dSquare,
+            select(this.shapeUniform.lessThan(float(2.5)), dDiamond, dLine)
+          )
+        )
+
+        const cellCov = smoothstep(radius.add(aa), radius.sub(aa), dist)
+
+        const isNew = cellCov.greaterThan(accCov)
+        const maxR = select(isNew, float(sNode.r), accR)
+        const maxG = select(isNew, float(sNode.g), accG)
+        const maxB = select(isNew, float(sNode.b), accB)
+        const maxLuma = select(isNew, effectiveValue, accLuma)
+        const maxCov = max(cellCov, accCov)
+
+        const fieldRadius = max(radius.add(fieldReach), float(0.001))
+        const cellField = clamp(
+          float(1).sub(dist.div(fieldRadius)),
+          float(0),
+          float(1)
+        )
+        const cellFieldSq = cellField.mul(cellField)
+
+        accWeightR = accWeightR.add(float(sNode.r).mul(cellFieldSq))
+        accWeightG = accWeightG.add(float(sNode.g).mul(cellFieldSq))
+        accWeightB = accWeightB.add(float(sNode.b).mul(cellFieldSq))
+        accWeightLuma = accWeightLuma.add(effectiveValue.mul(cellFieldSq))
+        accField = accField.add(cellFieldSq)
+
+        accR = maxR
+        accG = maxG
+        accB = maxB
+        accLuma = maxLuma
+        accCov = maxCov
+      }
+    }
+
+    const metaEdge = max(float(0.01), aa.div(this.spacingUniform).mul(0.5))
+    const metaCov = smoothstep(
+      float(0.5).sub(metaEdge),
+      float(0.5).add(metaEdge),
+      accField
+    )
+    const fieldWeight = max(accField, float(0.001))
+
+    const finalCov = mix(accCov, metaCov, morph)
+    const finalR = mix(accR, accWeightR.div(fieldWeight), morph)
+    const finalG = mix(accG, accWeightG.div(fieldWeight), morph)
+    const finalB = mix(accB, accWeightB.div(fieldWeight), morph)
+    const finalLuma = mix(accLuma, accWeightLuma.div(fieldWeight), morph)
+
+    return {
+      color: vec3(finalR, finalG, finalB),
+      coverage: finalCov,
+      luma: finalLuma,
+    }
+  }
+
+  private normalizeBloomRadius(value: number): number {
+    return clamp01(value / 24)
+  }
+
+  private normalizeBloomSoftness(value: number): number {
+    return Math.max(0.001, value * 0.25)
+  }
+
+  private disposeBloomNode(): void {
+    ;(this.bloomNode as { dispose?: () => void } | null)?.dispose?.()
+  }
+
+  private getBloomTextureNode(): Node {
+    const bloomNode = this.bloomNode as
+      | ({
+          getTexture?: () => Node
+          getTextureNode?: () => Node
+        } & object)
+      | null
+
+    if (!bloomNode) {
+      throw new Error("Bloom node is not initialized")
+    }
+
+    if (
+      "getTextureNode" in bloomNode &&
+      typeof bloomNode.getTextureNode === "function"
+    ) {
+      return bloomNode.getTextureNode()
+    }
+
+    if (
+      "getTexture" in bloomNode &&
+      typeof bloomNode.getTexture === "function"
+    ) {
+      return bloomNode.getTexture()
+    }
+
+    throw new Error("Bloom node does not expose a texture getter")
+  }
+}
+
+function parseColorMode(value: unknown): HalftoneColorMode {
+  if (
+    value === "source" ||
+    value === "monochrome" ||
+    value === "duotone" ||
+    value === "custom" ||
+    value === "cmyk"
+  ) {
+    return value
+  }
+  return "source"
+}
+
+function parseCmykBlend(value: unknown): CmykBlendMode {
+  if (value === "subtractive" || value === "overprint") {
+    return value
+  }
+  return "subtractive"
+}