kmcom-nuxt-layers 1.6.4 → 1.6.6

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+
+/** Chebyshev-distance diamond gradient: max(|x|, |y|) from centre. */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Scale — higher = faster falloff */
+  scale?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 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)
+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 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const centered = uv.sub(0.5).abs()
+    const t = centered.x.max(centered.y).mul(scaleNode).mul(2).min(float(1))
+    return vec4(mix(colorANode, colorBNode, t), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendDifference } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#808080', opacity: 1, order: 0 })
+
+const colorNode = uniform(new Color(props.color))
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { colorNode.value.set(v) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(mix(prev.xyz, blendDifference(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, clamp, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#808080', opacity: 1, order: 0 })
+
+const colorNode = (() => { const c = new Color(props.color); return uniform(new Vector3(c.r, c.g, c.b)) })()
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const divided = clamp(prev.xyz.div(colorNode.max(float(0.001))), float(0), float(1))
+    return vec4(mix(prev.xyz, divided, opacityNode), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, float } from 'three/tsl'
+import { domainWarp2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  warpStrength?: number
+  warpScale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 2, warpStrength: 0.5, warpScale: 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 warpStrNode = uniform(props.warpStrength)
+const warpScaleNode = uniform(props.warpScale)
+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.warpStrength, v => { warpStrNode.value = v })
+watch(() => props.warpScale, v => { warpScaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const animated = uv.add(time.mul(speedNode))
+    const n = domainWarp2D(animated.mul(scaleNode), warpStrNode, warpScaleNode).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, n), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/Dots.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 { dots } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  cellSize?: number
+  dotRadius?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', cellSize: 0.08, dotRadius: 0.025, softness: 0.005, 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 cellNode = uniform(props.cellSize)
+const dotNode = uniform(props.dotRadius)
+const softNode = 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.cellSize, v => { cellNode.value = v })
+watch(() => props.dotRadius, v => { dotNode.value = v })
+watch(() => props.softness, v => { softNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = dots(uv, cellNode, dotNode, softNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix } from 'three/tsl'
+import { luminance } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Shadow colour (low luminance) */
+  shadowColor?: string
+  /** Highlight colour (high luminance) */
+  highlightColor?: string
+  order?: number
+}>(), { shadowColor: '#1a0033', highlightColor: '#ffcc00', order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const shadowNode = toVec3Node(props.shadowColor)
+const highlightNode = toVec3Node(props.highlightColor)
+watch(() => props.shadowColor, v => { const c = new Color(v); shadowNode.value.set(c.r, c.g, c.b) })
+watch(() => props.highlightColor, v => { const c = new Color(v); highlightNode.value.set(c.r, c.g, c.b) })
+
+useShaderStage(
+  (prev) => {
+    const lum = luminance(prev.xyz)
+    return vec4(mix(shadowNode, highlightNode, lum), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix } from 'three/tsl'
+import { blendExclusion } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#ffffff', opacity: 1, order: 0 })
+
+const colorNode = (() => { const c = new Color(props.color); return uniform(new Vector3(c.r, c.g, c.b)) })()
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(mix(prev.xyz, blendExclusion(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix } from 'three/tsl'
+
+/**
+ * Height-based exponential fog: exp2(-ray.y * density).
+ * Blends prev colour toward fogColor as the ray approaches the horizon.
+ * Pairs naturally with SkyAtmosphere — place before it so terrain gets fog too.
+ */
+const props = withDefaults(defineProps<{
+  /** Fog colour */
+  fogColor?: string
+  /** Controls how quickly fog builds near the horizon — higher = thicker */
+  density?: number
+  /** Clamp the minimum ray Y used for fog (prevents underground fog) */
+  horizonBias?: number
+  order?: number
+}>(), { fogColor: '#c8d8e8', density: 4, horizonBias: 0, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const fogColorNode = toVec3Node(props.fogColor)
+const densityNode = uniform(props.density)
+const horizonBiasNode = uniform(props.horizonBias)
+watch(() => props.fogColor, v => { const c = new Color(v); fogColorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.density, v => { densityNode.value = v })
+watch(() => props.horizonBias, v => { horizonBiasNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const ray = pipeline.rayNode.value
+    const h = ray ? ray.y.max(horizonBiasNode) : horizonBiasNode
+    const fogFactor = h.mul(densityNode).negate().exp2()
+    return vec4(mix(fogColorNode, prev.xyz, fogFactor), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, pow, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Exposure in stops: 0 = unchanged, +1 = 2× brighter, -1 = 2× darker */
+  stops?: number
+  order?: number
+}>(), { stops: 0, order: 0 })
+
+const stopsNode = uniform(props.stops)
+watch(() => props.stops, v => { stopsNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const scale = pow(float(2), stopsNode)
+    return vec4(prev.xyz.mul(scale), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  octaves?: number
+  animated?: boolean
+  speed?: number
+  order?: number
+}>(), {
+  colorA: '#000000',
+  colorB: '#ffffff',
+  scale: 3,
+  octaves: 5,
+  animated: true,
+  speed: 0.15,
+  order: 0,
+})
+
+const colorAVal = new Color(props.colorA)
+const colorBVal = new Color(props.colorB)
+const colorANode = uniform(colorAVal)
+const colorBNode = uniform(colorBVal)
+const scaleNode = uniform(props.scale)
+const speedNode = uniform(props.speed)
+
+watch(() => props.colorA, v => { colorANode.value.set(v) })
+watch(() => props.colorB, v => { colorBNode.value.set(v) })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (_prev) => {
+    const offset = props.animated ? time.mul(speedNode) : float(0)
+    const input = uvNode.value.mul(scaleNode).add(vec2(offset, 0))
+    const n = fbm2D(input, { octaves: props.octaves }).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, n), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector2, Vector3 } from 'three'
+import { uniform, vec4, vec2, mix, smoothstep, float } from 'three/tsl'
+
+/**
+ * Orange/warm light leak emanating from a screen corner.
+ * Additive over-exposure effect — common in analogue film.
+ */
+const props = withDefaults(defineProps<{
+  /** Light leak colour */
+  color?: string
+  /** Corner origin [0,1] — default top-left */
+  origin?: [number, number]
+  /** Reach of the leak */
+  radius?: number
+  /** Peak brightness */
+  intensity?: number
+  order?: number
+}>(), { color: '#ff8822', origin: () => [0, 1], radius: 0.7, intensity: 0.5, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorNode = toVec3Node(props.color)
+const originNode = uniform(new Vector2(...props.origin))
+const radiusNode = uniform(props.radius)
+const intensityNode = uniform(props.intensity)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.origin, ([x, y]) => { originNode.value.set(x, y) })
+watch(() => props.radius, v => { radiusNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const dist = uv.sub(vec2(originNode.x, originNode.y)).length()
+    const leak = smoothstep(radiusNode, float(0), dist).mul(intensityNode)
+    return vec4(prev.xyz.add(colorNode.mul(leak)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { clamp, float, fract, mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
+import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
+
+type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
+
+const props = withDefaults(defineProps<{
+  /** Grain intensity — amplitude of the noise effect */
+  intensity?: number
+  /** Blend opacity — how strongly grain mixes into the output */
+  opacity?: number
+  /** UV scale — higher = finer dots, lower = coarser */
+  size?: number
+  fps?: number
+  blendMode?: GrainBlendMode
+  order?: number
+}>(), { intensity: 0.06, opacity: 1.0, size: 1.0, fps: 24, blendMode: 'sub', order: 0 })
+
+const intensityNode = uniform(props.intensity)
+const opacityNode = uniform(props.opacity)
+const sizeNode = uniform(props.size)
+const fpsNode = uniform(props.fps)
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.opacity, v => { opacityNode.value = v })
+watch(() => props.size, v => { sizeNode.value = v })
+watch(() => props.fps, v => { fpsNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvScaled = pipeline.uvNode.value.mul(sizeNode)
+    const t = time.mul(fpsNode).floor().div(fpsNode)
+
+    // Two-pass hash for coarser, more organic texture
+    const k1 = vec2(127.1, 311.7)
+    const k2 = vec2(269.5, 183.3)
+    const p = uvScaled.add(t)
+    const h1 = p.dot(k1).sin().mul(43758.5453).fract()
+    const h2 = p.add(t.mul(0.3)).dot(k2).sin().mul(43758.5453).fract()
+    // Raw [0,1] noise from vector length, normalised by max possible (√2)
+    const raw = vec2(h1, h2).length().mul(float(0.7071))
+
+    const mixFactor = intensityNode.mul(opacityNode)
+    let blended
+    switch (props.blendMode) {
+      case 'add':
+        blended = prev.xyz.add(raw.sub(0.5).mul(intensityNode).mul(opacityNode))
+        break
+      case 'screen':
+        blended = mix(prev.xyz, blendScreen(prev.xyz, raw), mixFactor)
+        break
+      case 'overlay':
+        blended = mix(prev.xyz, blendOverlay(prev.xyz, raw), mixFactor)
+        break
+      case 'soft-light':
+        blended = mix(prev.xyz, blendSoftLight(prev.xyz, raw), mixFactor)
+        break
+      default: // 'sub' — original darkening behaviour
+        blended = prev.xyz.sub(raw.mul(intensityNode).mul(opacityNode))
+    }
+    return vec4(clamp(blended, 0, 1), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, float, atan, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Field-of-view in radians for the fisheye projection.
+   * π = 180° hemisphere, π*2 = full sphere.
+   */
+  fov?: number
+  order?: number
+}>(), { fov: Math.PI, order: 0 })
+
+const fovNode = uniform(props.fov)
+watch(() => props.fov, v => { fovNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    // Screen-space xy from the linear ray (z = 1 focal plane)
+    const screen = vec3(ray.x, ray.y, float(0))
+    const r = screen.length()
+
+    // Fisheye: map linear distance → angle on sphere
+    const theta = atan(r).mul(fovNode).div(Math.PI * 0.5)
+    const phi = screen.y.atan(screen.x)
+
+    const sinTheta = theta.sin()
+    return vec3(phi.cos().mul(sinTheta), phi.sin().mul(sinTheta), theta.cos()).normalize()
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec3, vec4, mix, clamp, float } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Base flame colour (cool, inner) */
+  colorBase?: string
+  /** Tip flame colour (hot, outer) */
+  colorTip?: string
+  /** Flame height scale */
+  scale?: number
+  /** Rise speed */
+  speed?: number
+  order?: number
+}>(), { colorBase: '#ffcc00', colorTip: '#ff2200', scale: 3, speed: 1.5, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorBaseNode = toVec3Node(props.colorBase)
+const colorTipNode = toVec3Node(props.colorTip)
+const scaleNode = uniform(props.scale)
+const speedNode = uniform(props.speed)
+watch(() => props.colorBase, v => { const c = new Color(v); colorBaseNode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorTip, v => { const c = new Color(v); colorTipNode.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
+    // Animate upward by subtracting time from Y
+    const pos = uv.mul(scaleNode).sub(time.mul(speedNode))
+    const n = fbm2D(pos).mul(0.5).add(0.5)
+    // Heat = noise * (1 - uv.y): flames die out at the top
+    const heat = clamp(n.mul(float(1).sub(uv.y).mul(1.5)), float(0), float(1))
+    // Black background → tip colour → base colour
+    const fireColor = mix(vec3(0, 0, 0), mix(colorTipNode, colorBaseNode, heat), heat)
+    return vec4(fireColor, heat)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector2, Vector3 } from 'three'
+import { uniform, vec2, vec4, mix, float } from 'three/tsl'
+
+/** Radial gradient with an offset focal point — asymmetric radial. */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Focal point in UV space [0,1] */
+  focal?: [number, number]
+  /** Radius of full falloff */
+  radius?: number
+  order?: number
+}>(), { colorA: '#ffffff', colorB: '#000000', focal: () => [0.3, 0.3], radius: 1.2, 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 focalNode = uniform(new Vector2(...props.focal))
+const radiusNode = uniform(props.radius)
+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.focal, ([x, y]) => { focalNode.value.set(x, y) })
+watch(() => props.radius, v => { radiusNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const t = uv.sub(vec2(focalNode.x, focalNode.y)).length().div(radiusNode).min(float(1))
+    return vec4(mix(colorANode, colorBNode, t), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, pow, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Gamma value: 1 = unchanged, 2.2 = standard display gamma */
+  gamma?: number
+  order?: number
+}>(), { gamma: 2.2, order: 0 })
+
+const gammaNode = uniform(props.gamma)
+watch(() => props.gamma, v => { gammaNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const corrected = pow(prev.xyz.max(float(0)), float(1).div(gammaNode))
+    return vec4(corrected, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>