kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,101 +1,145 @@
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <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()
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import {
+    abs,
+    Break,
+    clamp,
+    cos,
+    float,
+    Fn,
+    If,
+    Loop,
+    mix,
+    sin,
+    time,
+    uniform,
+    vec3,
+    vec4,
+  } 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()
+      })
     })
 
-    t.addAssign(abs(d).max(float(0.01)))
+    // 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)
 
-    If(t.greaterThan(float(20.0)), () => { Break() })
+    return vec4(finalColour, hit)
   })
 
-  // 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(
-  () => {
+  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)
+    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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,47 +1,88 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <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'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, uniform, vec4 } from 'three/tsl'
 
-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 })
+  import { roundedRect } from '../../shaders/common/shapes'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  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,
+    }
+  )
 
-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 })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  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
+    }
+  )
 
-useShaderStage(
-  () => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

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

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

@@ -1,41 +1,64 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <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'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
-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 })
+  import { ridgedFbm2d } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  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 }
+  )
 
-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 })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  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
+    }
+  )
 
-useShaderStage(
-  () => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,44 +1,79 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <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'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, uniform, vec4 } from 'three/tsl'
 
-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 })
+  import { ring } from '../../shaders/common/shapes'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  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,
+    }
+  )
 
-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 })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  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
+    }
+  )
 
-useShaderStage(
-  () => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>