kmcom-nuxt-layers 1.6.4 → 1.6.7

package/layers/shader/app/components/Pipeline/RayRotateY.client.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, cos, sin, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Rotation angle in radians */
+  angle?: number
+  order?: number
+}>(), { angle: 0, order: 0 })
+
+const angleNode = uniform(props.angle)
+watch(() => props.angle, v => { angleNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    const c = cos(angleNode)
+    const s = sin(angleNode)
+    return vec3(ray.x.mul(c).add(ray.z.mul(s)), ray.y, ray.z.mul(c).sub(ray.x.mul(s)))
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RayRotateZ.client.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, cos, sin, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Rotation angle in radians */
+  angle?: number
+  order?: number
+}>(), { angle: 0, order: 0 })
+
+const angleNode = uniform(props.angle)
+watch(() => props.angle, v => { angleNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    const c = cos(angleNode)
+    const s = sin(angleNode)
+    return vec3(ray.x.mul(c).sub(ray.y.mul(s)), ray.x.mul(s).add(ray.y.mul(c)), ray.z)
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RayTiltBasis.client.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, cos, sin, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Yaw offset in radians (horizontal look) */
+  yaw?: number
+  /** Pitch offset in radians (vertical tilt) */
+  pitch?: number
+  /** Roll offset in radians */
+  roll?: number
+  order?: number
+}>(), { yaw: 0, pitch: 0, roll: 0, order: 0 })
+
+const yawNode = uniform(props.yaw)
+const pitchNode = uniform(props.pitch)
+const rollNode = uniform(props.roll)
+watch(() => props.yaw, v => { yawNode.value = v })
+watch(() => props.pitch, v => { pitchNode.value = v })
+watch(() => props.roll, v => { rollNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    // Yaw (Y)
+    const cy = cos(yawNode); const sy = sin(yawNode)
+    const r1 = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+
+    // Pitch (X)
+    const cp = cos(pitchNode); const sp = sin(pitchNode)
+    const r2 = vec3(r1.x, r1.y.mul(cp).sub(r1.z.mul(sp)), r1.y.mul(sp).add(r1.z.mul(cp)))
+
+    // Roll (Z)
+    const cr = cos(rollNode); const sr = sin(rollNode)
+    return vec3(r2.x.mul(cr).sub(r2.y.mul(sr)), r2.x.mul(sr).add(r2.y.mul(cr)), r2.z)
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RaymarchTunnel.client.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { Fn, uniform, time, Loop, If, Break, vec3, vec4, float, clamp, mix, sin, cos, abs } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Tunnel inner radius */
+  radius?: number
+  /** How fast the camera flies forward */
+  speed?: number
+  /** Wall colour A */
+  colorA?: string
+  /** Wall colour B */
+  colorB?: string
+  /** Number of march steps (fixed at shader compile) */
+  steps?: number
+  order?: number
+}>(), {
+  radius: 0.8,
+  speed: 1,
+  colorA: '#1a0a3a',
+  colorB: '#ff4488',
+  steps: 64,
+  order: 0,
+})
+
+const radiusNode = uniform(props.radius)
+const speedNode = uniform(props.speed)
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+
+watch(() => props.radius, v => { radiusNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
+
+const pipeline = useShaderPipelineContext()
+
+// Fn defined once at setup — Loop/If/Break/toVar/addAssign require a Fn() stack at compile time
+const raymarchFn = Fn(([ray]) => {
+  // Three.js calls Fn bodies with null args during type-inference — bail out safely
+  if (!ray) return vec4(0, 0, 0, 0)
+
+  // Camera flies forward along Z
+  const camZ = time.mul(speedNode)
+  const ro = vec3(float(0), float(0), camZ)
+  const rd = ray.normalize()
+
+  const t = float(0).toVar()
+  const colour = vec3(0, 0, 0).toVar()
+  const hit = float(0).toVar()
+
+  Loop(props.steps, () => {
+    const p = ro.add(rd.mul(t))
+
+    // Tunnel SDF: cylinder with twisted walls
+    const twist = sin(p.z.mul(0.3).add(camZ.mul(0.1))).mul(0.15)
+    const d = p.xy.add(vec3(twist, twist, float(0)).xy).length().sub(radiusNode)
+
+    If(d.lessThan(float(0.001)), () => {
+      // Pattern on wall: mix colours by angle around tunnel
+      const angle = p.y.atan(p.x).mul(0.5).add(0.5)
+      const stripe = sin(p.z.mul(4.0).add(time)).mul(0.5).add(0.5)
+      const band = mix(colorANode, colorBNode, clamp(angle.add(stripe.mul(0.3)), 0, 1))
+      colour.assign(band)
+      hit.assign(float(1))
+      Break()
+    })
+
+    t.addAssign(abs(d).max(float(0.01)))
+
+    If(t.greaterThan(float(20.0)), () => { Break() })
+  })
+
+  // Fog out the far end of the tunnel
+  const fog = clamp(float(1).sub(t.div(20.0)), 0, 1)
+  const finalColour = colour.mul(fog).mul(hit)
+
+  return vec4(finalColour, hit)
+})
+
+useShaderStage(
+  () => {
+    // Fall back to a simple perspective ray from UV when no ray node is set
+    const provided = pipeline.rayNode.value
+    const uvc = pipeline.uvNode.value
+    // Use +1 for Z so the ray points forward into the tunnel (matching Pipeline.client.vue screenRayNode)
+    const ray = provided ?? (uvc ? vec3(uvc.sub(0.5).mul(2).x, uvc.sub(0.5).mul(2).y, float(1)) : null)
+    if (!ray) return vec4(0, 0, 0, 0)
+    return raymarchFn([ray])
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/Rectangle.client.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+import { roundedRect } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  width?: number
+  height?: number
+  cornerRadius?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', width: 0.6, height: 0.4, cornerRadius: 0.05, softness: 0.01, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+const widthNode = uniform(props.width)
+const heightNode = uniform(props.height)
+const cornerNode = uniform(props.cornerRadius)
+const softnessNode = uniform(props.softness)
+watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
+watch(() => props.width, v => { widthNode.value = v })
+watch(() => props.height, v => { heightNode.value = v })
+watch(() => props.cornerRadius, v => { cornerNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = roundedRect(uv, [0.5, 0.5], widthNode, cornerNode, softnessNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/ReinhardTonemap.client.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { vec4 } from 'three/tsl'
+import { reinhardTonemap } from '../../shaders/common/tonemapping'
+
+/**
+ * Simple Reinhard tone mapping: col / (col + 1).
+ * Compresses HDR values with no hard clip — highlights desaturate toward white.
+ */
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (prev) => vec4(reinhardTonemap(prev.xyz), prev.w),
+  order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RidgedNoise.client.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, float } from 'three/tsl'
+import { ridgedFbm2d } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 2, speed: 0.1, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+const scaleNode = uniform(props.scale)
+const speedNode = uniform(props.speed)
+watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const n = ridgedFbm2d(uv.mul(scaleNode).add(time.mul(speedNode)))
+    return vec4(mix(colorANode, colorBNode, n), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/Ring.client.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+import { ring } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  innerRadius?: number
+  outerRadius?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', innerRadius: 0.25, outerRadius: 0.4, softness: 0.01, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+const innerNode = uniform(props.innerRadius)
+const outerNode = uniform(props.outerRadius)
+const softnessNode = uniform(props.softness)
+watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
+watch(() => props.innerRadius, v => { innerNode.value = v })
+watch(() => props.outerRadius, v => { outerNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = ring(uv, [0.5, 0.5], innerNode, outerNode, softnessNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RingField.client.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, float, abs } from 'three/tsl'
+
+/**
+ * Accumulates ring-shaped SDF fields into a single float mask.
+ * Each ring: abs(length(uv + offset) - radius) * scale, then summed.
+ * Outputs a grayscale vec4 for consumption by CosinePalette (scalarSource: 'prev')
+ * or SDFColourMask.
+ *
+ * The flare8/flare9 pattern. Includes an optional radial vignette term.
+ *
+ * @example
+ * <RingField :order="0" :ring-radius="0.3" :ring-count="3" />
+ * <CosinePalette :order="1" scalar-source="prev" />
+ */
+const props = withDefaults(defineProps<{
+  /** Radius of the primary ring */
+  ringRadius?: number
+  /** Number of rings (stacked with equidistant offsets) */
+  ringCount?: number
+  /** Spacing between stacked rings */
+  ringSpread?: number
+  /** Sharpness multiplier applied per ring */
+  ringScale?: number
+  /** Vignette: oneMinus(length(uv * vignetteScale)) — 0 = disabled */
+  vignetteScale?: number
+  order?: number
+}>(), { ringRadius: 0.3, ringCount: 1, ringSpread: 0.15, ringScale: 4, vignetteScale: 0.8, order: 0 })
+
+const ringRadiusNode = uniform(props.ringRadius)
+const ringSpreadNode = uniform(props.ringSpread)
+const ringScaleNode = uniform(props.ringScale)
+const vignetteScaleNode = uniform(props.vignetteScale)
+watch(() => props.ringRadius, v => { ringRadiusNode.value = v })
+watch(() => props.ringSpread, v => { ringSpreadNode.value = v })
+watch(() => props.ringScale, v => { ringScaleNode.value = v })
+watch(() => props.vignetteScale, v => { vignetteScaleNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    const centered = uvCurrent.sub(0.5)
+
+    // Accumulate rings at evenly-spaced radii
+    let acc = float(0)
+    for (let i = 0; i < props.ringCount; i++) {
+      const offset = ringSpreadNode.mul(float(i - (props.ringCount - 1) / 2))
+      const r = ringRadiusNode.add(offset)
+      const d = abs(centered.length().sub(r)).mul(ringScaleNode).oneMinus().max(float(0))
+      acc = acc.add(d)
+    }
+
+    // Optional vignette term
+    if (props.vignetteScale > 0) {
+      const vignette = float(1).sub(centered.mul(vignetteScaleNode).length()).max(float(0))
+      acc = acc.add(vignette)
+    }
+
+    const t = acc.div(float(props.ringCount)).min(float(1))
+    return vec4(t, t, t, float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RisographGrain.client.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { clamp, floor, mix, time, uniform, vec3, vec4 } from 'three/tsl'
+import { grain } from '../../shaders/common/grain'
+import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
+
+type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
+
+const props = withDefaults(defineProps<{
+  scale?: number
+  strength?: number
+  opacity?: number
+  misregistration?: number
+  fps?: number
+  blendMode?: GrainBlendMode
+  order?: number
+}>(), { scale: 0.6, strength: 0.12, opacity: 1.0, misregistration: 0.003, fps: 8, blendMode: 'add', order: 0 })
+
+const scaleNode = uniform(props.scale)
+const strengthNode = uniform(props.strength)
+const opacityNode = uniform(props.opacity)
+const misregNode = uniform(props.misregistration)
+const fpsNode = uniform(props.fps)
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.strength, v => { strengthNode.value = v })
+watch(() => props.opacity, v => { opacityNode.value = v })
+watch(() => props.misregistration, v => { misregNode.value = v })
+watch(() => props.fps, v => { fpsNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const seed = floor(time.mul(fpsNode))
+
+    const uvR = uv.mul(scaleNode).add(misregNode)
+    const uvG = uv.mul(scaleNode)
+    const uvB = uv.mul(scaleNode).sub(misregNode)
+
+    // grain() returns (raw - 0.5) * strength → centred around 0
+    const rNoise = grain(uvR, strengthNode, seed)
+    const gNoise = grain(uvG, strengthNode, seed.add(17.0))
+    const bNoise = grain(uvB, strengthNode, seed.add(31.0))
+    const grainVec = vec3(rNoise, gNoise, bNoise)
+
+    // Lift centred delta back to [0,1] per-channel texture for blend modes
+    const rawVec = grainVec.div(strengthNode).add(0.5)
+
+    const mixFactor = strengthNode.mul(opacityNode)
+    let blended
+    switch (props.blendMode) {
+      case 'sub':
+        blended = prev.xyz.sub(grainVec.abs().mul(opacityNode))
+        break
+      case 'screen':
+        blended = mix(prev.xyz, blendScreen(prev.xyz, rawVec), mixFactor)
+        break
+      case 'overlay':
+        blended = mix(prev.xyz, blendOverlay(prev.xyz, rawVec), mixFactor)
+        break
+      case 'soft-light':
+        blended = mix(prev.xyz, blendSoftLight(prev.xyz, rawVec), mixFactor)
+        break
+      default: // 'add'
+        blended = prev.xyz.add(grainVec.mul(opacityNode))
+    }
+    return vec4(clamp(blended, 0, 1), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RotatedGradientBlend.client.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, smoothstep, uniform, vec4 } from 'three/tsl'
+
+/**
+ * Blends two colours along a rotated axis — the core Grainient colour pattern.
+ * Projects the current UV onto the rotated axis via (uv * Rot(angle)).x,
+ * then uses smoothstep to create the gradient.
+ *
+ * Stack multiple instances at consecutive orders to layer gradients.
+ */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Rotation angle in degrees */
+  angle?: number
+  /** Smoothstep lower edge (0 = sharp at centre-left) */
+  edge0?: number
+  /** Smoothstep upper edge (1 = sharp at centre-right) */
+  edge1?: number
+  order?: number
+}>(), {
+  colorA: '#000000',
+  colorB: '#ffffff',
+  angle: -5,
+  edge0: 0.25,
+  edge1: 0.75,
+  order: 0,
+})
+
+const colorAVal = new Color(props.colorA)
+const colorBVal = new Color(props.colorB)
+const colorANode = uniform(colorAVal)
+const colorBNode = uniform(colorBVal)
+const angleNode = uniform(props.angle * (Math.PI / 180))
+const edge0Node = uniform(props.edge0)
+const edge1Node = uniform(props.edge1)
+
+watch(() => props.colorA, v => { colorANode.value.set(v) })
+watch(() => props.colorB, v => { colorBNode.value.set(v) })
+watch(() => props.angle, v => { angleNode.value = v * (Math.PI / 180) })
+watch(() => props.edge0, v => { edge0Node.value = v })
+watch(() => props.edge1, v => { edge1Node.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (_prev) => {
+    const cosA = angleNode.cos()
+    const sinA = angleNode.sin()
+    // Project UV onto rotated axis, shift to 0-1 range
+    const rotatedX = uvNode.value.x.mul(cosA).sub(uvNode.value.y.mul(sinA)).add(0.5)
+    const t = smoothstep(edge0Node, edge1Node, rotatedX)
+    return vec4(mix(colorANode, colorBNode, t), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/SDFColourMask.client.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, clamp, float } from 'three/tsl'
+
+/**
+ * Multiplies RGB by prev.r (treating the previous stage as a grayscale scalar mask).
+ * Use after a scalar generator (RingField, ChebyshevNoiseField) and before CosinePalette
+ * to apply the `col.mul(t)` phobon pattern.
+ *
+ * Pipeline: RingField (order 0) → SDFColourMask (order 1) → CosinePalette (order 2, scalarSource: 'prev')
+ */
+const props = withDefaults(defineProps<{
+  /** Raise the mask to a power before applying — values > 1 increase contrast */
+  power?: number
+  /** Clamp the mask to [0, 1] before multiplying */
+  clampMask?: boolean
+  order?: number
+}>(), { power: 1, clampMask: true, order: 0 })
+
+const powerNode = uniform(props.power)
+watch(() => props.power, v => { powerNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    let mask = prev.x.pow(powerNode)
+    if (props.clampMask) mask = clamp(mask, float(0), float(1))
+    return vec4(prev.xyz.mul(mask), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/SDFRadialMask.client.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Scale factor for the radial distance — larger = tighter mask */
+  scale?: number
+  /** Softness of the mask edge */
+  softness?: number
+  order?: number
+}>(), { scale: 1.5, softness: 0.2, order: 0 })
+
+const scaleNode = uniform(props.scale)
+const softnessNode = uniform(props.softness)
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const dist = uvCurrent.sub(0.5).mul(scaleNode).length()
+    const mask = float(1).sub(dist).sub(softnessNode).max(0).div(float(1).sub(softnessNode))
+    return vec4(prev.xyz, prev.w.mul(mask))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/SRGBToLinear.client.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, pow, float } from 'three/tsl'
+
+/**
+ * Decodes sRGB to linear light — the inverse of LinearToSRGB.
+ * Apply before any physically-based blending or tonemapping.
+ * Approximate form: pow(col, 2.2).
+ */
+const props = withDefaults(defineProps<{
+  /** Gamma exponent — 2.2 matches sRGB standard */
+  gamma?: number
+  order?: number
+}>(), { gamma: 2.2, order: 0 })
+
+const gammaNode = uniform(props.gamma)
+watch(() => props.gamma, v => { gammaNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(pow(prev.xyz.max(float(0)), gammaNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/Saturation.client.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { saturate } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Saturation boost: 0 = unchanged, positive = more saturated */
+  amount?: number
+  order?: number
+}>(), { amount: 0.5, order: 0 })
+
+const amountNode = uniform(props.amount)
+watch(() => props.amount, v => { amountNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(saturate(prev.xyz, amountNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>