kmcom-nuxt-layers 1.6.4 → 1.6.7

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, pow, float } from 'three/tsl'
+
+/**
+ * Gamma-encodes linear light to sRGB for display.
+ * Use as the last step in HDR pipelines before output.
+ * Approximate form: pow(col, 1/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)), float(1).div(gammaNode)), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, sin, float } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Base (vein background) colour */
+  colorA?: string
+  /** Vein colour */
+  colorB?: string
+  /** Marble vein frequency */
+  frequency?: number
+  /** FBM noise scale for vein turbulence */
+  noiseScale?: number
+  /** Noise strength applied to sine input */
+  noiseStrength?: number
+  /** Vein sharpness — higher = thinner veins */
+  sharpness?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), {
+  colorA: '#f5f0e8',
+  colorB: '#6a5a4a',
+  frequency: 5,
+  noiseScale: 3,
+  noiseStrength: 8,
+  sharpness: 4,
+  speed: 0,
+  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 freqNode = uniform(props.frequency)
+const noiseScaleNode = uniform(props.noiseScale)
+const noiseStrNode = uniform(props.noiseStrength)
+const sharpNode = uniform(props.sharpness)
+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.frequency, v => { freqNode.value = v })
+watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
+watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
+watch(() => props.sharpness, v => { sharpNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+    const n = fbm2D(uv.mul(noiseScaleNode).add(t))
+    // Sine + noise offset creates the vein pattern
+    const vein = sin(uv.x.mul(freqNode).add(n.mul(noiseStrNode))).abs().pow(sharpNode)
+    return vec4(mix(colorANode, colorBNode, vein), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { smoothstep, uniform, vec4 } from 'three/tsl'
+
+/**
+ * Fades the accumulated pipeline colour toward transparent/black based on
+ * a UV axis threshold. Useful as a final Y/X-axis gradient mask.
+ *
+ * Example (Grainient final step):
+ *   <MixBlend axis="y" :edge0="0.45" :edge1="0.55" />
+ */
+const props = withDefaults(defineProps<{
+  axis?: 'x' | 'y'
+  edge0?: number
+  edge1?: number
+  /** 0 = fade to transparent, 1 = fade to opaque (keep prev) */
+  invert?: boolean
+  order?: number
+}>(), {
+  axis: 'y',
+  edge0: 0.45,
+  edge1: 0.55,
+  invert: false,
+  order: 0,
+})
+
+const edge0Node = uniform(props.edge0)
+const edge1Node = uniform(props.edge1)
+watch(() => props.edge0, v => { edge0Node.value = v })
+watch(() => props.edge1, v => { edge1Node.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const coord = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
+    const mask = smoothstep(edge0Node, edge1Node, coord)
+    const alpha = props.invert ? mask.oneMinus() : mask
+    return vec4(prev.xyz, prev.w.mul(alpha))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4 } from 'three/tsl'
+import { desaturate } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Tint colour applied after desaturation */
+  color?: string
+  /** How much to desaturate before tinting: 1 = full greyscale */
+  desaturation?: number
+  order?: number
+}>(), { color: '#4466aa', desaturation: 1, 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 desatNode = uniform(props.desaturation)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.desaturation, v => { desatNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(desaturate(prev.xyz, desatNode).mul(colorNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendMultiply } 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, blendMultiply(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, float } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+/** Linear gradient with per-pixel FBM noise offset — living, organic gradient. */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Gradient axis angle in degrees */
+  angle?: number
+  /** Noise displacement strength */
+  noiseStrength?: number
+  /** Noise input scale */
+  noiseScale?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { colorA: '#1a0a5a', colorB: '#ff8866', angle: 0, noiseStrength: 0.3, noiseScale: 2, speed: 0.15, 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 angleNode = uniform(props.angle * Math.PI / 180)
+const noiseStrNode = uniform(props.noiseStrength)
+const noiseScaleNode = uniform(props.noiseScale)
+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.angle, v => { angleNode.value = v * Math.PI / 180 })
+watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
+watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const n = fbm2D(uv.mul(noiseScaleNode).add(time.mul(speedNode)))
+    const base = uv.x.mul(angleNode.cos()).add(uv.y.mul(angleNode.sin()))
+    const t = base.add(n.mul(noiseStrNode)).clamp(float(0), float(1))
+    return vec4(mix(colorANode, colorBNode, t), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec2, vec4, mix, smoothstep, cos, sin, float } from 'three/tsl'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+/**
+ * Self-contained Grainient/Shadertoy gradient pattern.
+ * Combines: GradientNoise → noise-driven UV rotation → asymmetric sine warp
+ *           → rotated two-colour blend.
+ * Equivalent to: UVNoiseRotate + UVSineWarpXY + RotatedGradientBlend in one component.
+ * Exposes all params individually so the pipeline can still intercept at any stage,
+ * but provides a convenient self-contained starting point.
+ */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Noise input scale */
+  noiseScale?: number
+  /** Max rotation amount driven by noise (degrees) */
+  rotationAmount?: number
+  /** Sine warp frequency */
+  warpFrequency?: number
+  /** Sine warp amplitude (higher = subtler) */
+  warpAmplitude?: number
+  /** Gradient blend angle (degrees) */
+  blendAngle?: number
+  /** Smoothstep lower edge */
+  edge0?: number
+  /** Smoothstep upper edge */
+  edge1?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), {
+  colorA: '#1a0a5a',
+  colorB: '#ff6688',
+  noiseScale: 1,
+  rotationAmount: 720,
+  warpFrequency: 3,
+  warpAmplitude: 3,
+  blendAngle: 45,
+  edge0: 0.2,
+  edge1: 0.8,
+  speed: 0.3,
+  order: 0,
+})
+
+const DEG2RAD = Math.PI / 180
+
+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 noiseScaleNode = uniform(props.noiseScale)
+const rotAmountNode = uniform(props.rotationAmount * DEG2RAD)
+const warpFreqNode = uniform(props.warpFrequency)
+const warpAmpNode = uniform(props.warpAmplitude)
+const blendAngleNode = uniform(props.blendAngle * DEG2RAD)
+const edge0Node = uniform(props.edge0)
+const edge1Node = uniform(props.edge1)
+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.noiseScale, v => { noiseScaleNode.value = v })
+watch(() => props.rotationAmount, v => { rotAmountNode.value = v * DEG2RAD })
+watch(() => props.warpFrequency, v => { warpFreqNode.value = v })
+watch(() => props.warpAmplitude, v => { warpAmpNode.value = v })
+watch(() => props.blendAngle, v => { blendAngleNode.value = v * DEG2RAD })
+watch(() => props.edge0, v => { edge0Node.value = v })
+watch(() => props.edge1, v => { edge1Node.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    if (!uvCurrent) return vec4(0, 0, 0, 1)
+
+    const t = time.mul(speedNode)
+
+    // 1. Noise-driven UV rotation
+    const n = simplexNoise2D(uvCurrent.mul(noiseScaleNode).add(t))
+    const angle = n.mul(0.5).add(0.5).mul(rotAmountNode).add(float(Math.PI)).sub(rotAmountNode.mul(0.5))
+    const c1 = cos(angle)
+    const s1 = sin(angle)
+    const centered = uvCurrent.sub(0.5)
+    const rotated = vec2(
+      centered.x.mul(c1).sub(centered.y.mul(s1)),
+      centered.x.mul(s1).add(centered.y.mul(c1)),
+    ).add(0.5)
+
+    // 2. Asymmetric sine warp — pure functional (no toVar/addAssign needed)
+    // warpedY uses warpedX to replicate the sequential addAssign behaviour
+    const warpedX = rotated.x.add(sin(rotated.y.mul(warpFreqNode).add(t)).div(warpAmpNode))
+    const warpedY = rotated.y.add(sin(warpedX.mul(warpFreqNode.mul(1.5)).add(t)).div(warpAmpNode.mul(0.5)))
+    const tuv = vec2(warpedX, warpedY)
+
+    // 3. Rotated gradient blend
+    const cb = cos(blendAngleNode)
+    const sb = sin(blendAngleNode)
+    const rotX = tuv.sub(0.5).x.mul(cb).sub(tuv.sub(0.5).y.mul(sb)).add(0.5)
+    const blend = smoothstep(edge0Node, edge1Node, rotX)
+
+    return vec4(mix(colorANode, colorBNode, blend), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendOverlay } 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, blendOverlay(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec4, floor, float } from 'three/tsl'
+import { paperTexture } from '../../shaders/common/grain'
+
+/**
+ * Paper texture overlay — multi-octave grain that reads like coarse paper or canvas.
+ * Adds tactile analogue feel to any underlying image.
+ */
+const props = withDefaults(defineProps<{
+  /** Texture scale — higher = finer grain pattern */
+  scale?: number
+  /** Overlay intensity */
+  intensity?: number
+  /** Animate slowly for a living-paper effect (0 = static) */
+  speed?: number
+  order?: number
+}>(), { scale: 12, intensity: 0.08, speed: 0, order: 0 })
+
+const scaleNode = uniform(props.scale)
+const intensityNode = uniform(props.intensity)
+const speedNode = uniform(props.speed)
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const seed = floor(time.mul(speedNode).mul(6))
+
+    const tex = paperTexture(uv, scaleNode, intensityNode, seed)
+    return vec4(prev.xyz.add(tex), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, smoothstep, float } from 'three/tsl'
+import { polygon } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Number of sides */
+  sides?: number
+  radius?: number
+  softness?: number
+  /** Rotation offset in degrees */
+  rotation?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', sides: 6, radius: 0.35, softness: 0.01, rotation: 0, 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 radiusNode = uniform(props.radius)
+const softnessNode = uniform(props.softness)
+const rotationNode = uniform(props.rotation * Math.PI / 180)
+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.radius, v => { radiusNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+watch(() => props.rotation, v => { rotationNode.value = v * Math.PI / 180 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = polygon(uv, [0.5, 0.5], radiusNode, props.sides, softnessNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, floor, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Number of colour steps per channel */
+  steps?: number
+  order?: number
+}>(), { steps: 6, order: 0 })
+
+const stepsNode = uniform(props.steps)
+watch(() => props.steps, v => { stepsNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const posterised = floor(prev.xyz.mul(stepsNode)).div(stepsNode.sub(float(1)))
+    return vec4(posterised, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { clamp, mix, uniform, vec4 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  colorCenter?: string
+  colorEdge?: string
+  radius?: number
+  order?: number
+}>(), {
+  colorCenter: '#ffffff',
+  colorEdge: '#000000',
+  radius: 0.7,
+  order: 0,
+})
+
+const colorCenterVal = new Color(props.colorCenter)
+const colorEdgeVal = new Color(props.colorEdge)
+const colorCenterNode = uniform(colorCenterVal)
+const colorEdgeNode = uniform(colorEdgeVal)
+const radiusNode = uniform(props.radius)
+
+watch(() => props.colorCenter, v => { colorCenterNode.value.set(v) })
+watch(() => props.colorEdge, v => { colorEdgeNode.value.set(v) })
+watch(() => props.radius, v => { radiusNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (_prev) => {
+    const t = clamp(uvNode.value.sub(0.5).length().div(radiusNode), 0, 1)
+    return vec4(mix(colorCenterNode, colorEdgeNode, t), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, cos, sin, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Orbit speed in radians per second (Y axis) */
+  speed?: number
+  /** Additional fixed pitch in radians (X axis) */
+  pitch?: number
+  order?: number
+}>(), { speed: 0.5, pitch: 0, order: 0 })
+
+const speedNode = uniform(props.speed)
+const pitchNode = uniform(props.pitch)
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.pitch, v => { pitchNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    const yaw = time.mul(speedNode)
+
+    // Y-axis rotation (orbit)
+    const cy = cos(yaw)
+    const sy = sin(yaw)
+    const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+
+    // X-axis pitch
+    const cp = cos(pitchNode)
+    const sp = sin(pitchNode)
+    return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Vector2 } from 'three'
+import { uniform, cos, sin, vec3 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Multiplier for horizontal mouse sweep → yaw range (radians) */
+  yawRange?: number
+  /** Multiplier for vertical mouse sweep → pitch range (radians) */
+  pitchRange?: number
+  order?: number
+}>(), { yawRange: Math.PI, pitchRange: Math.PI / 3, order: 0 })
+
+const mouse = uniform(new Vector2(0.5, 0.5))
+
+onMounted(() => {
+  const onMove = (e: MouseEvent) => {
+    mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+  }
+  window.addEventListener('mousemove', onMove)
+  onUnmounted(() => window.removeEventListener('mousemove', onMove))
+})
+
+const yawRangeNode = uniform(props.yawRange)
+const pitchRangeNode = uniform(props.pitchRange)
+watch(() => props.yawRange, v => { yawRangeNode.value = v })
+watch(() => props.pitchRange, v => { pitchRangeNode.value = v })
+
+useShaderStage(
+  (ray) => {
+    const yaw = mouse.x.sub(0.5).mul(yawRangeNode)
+    const pitch = mouse.y.sub(0.5).mul(pitchRangeNode)
+
+    // Yaw (Y-axis)
+    const cy = cos(yaw)
+    const sy = sin(yaw)
+    const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+
+    // Pitch (X-axis)
+    const cp = cos(pitch)
+    const sp = sin(pitch)
+    return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/RayRotateX.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, ray.y.mul(c).sub(ray.z.mul(s)), ray.y.mul(s).add(ray.z.mul(c)))
+  },
+  props.order,
+  'ray',
+)
+</script>
+
+<template><!-- --></template>