kmcom-nuxt-layers 1.7.8 → 2.1.6

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

@@ -1,46 +1,63 @@
+<!-- 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 { uniform, vec4, mix } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { mix, uniform, vec4 } 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 })
+  /**
+   * 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))
-}
+  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 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()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,23 +1,29 @@
+<!-- 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 { uniform, vec4, pow, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, pow, uniform, vec4 } 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 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 })
+  const stopsNode = uniform(props.stops)
+  watch(
+    () => props.stops,
+    (v) => {
+      stopsNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const scale = pow(float(2), stopsNode)
     return vec4(prev.xyz.mul(scale), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,50 +1,73 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- 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 } from 'three'
-import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
-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,
-})
+  import { fbm2D } from '../../shaders/common/noise'
 
-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)
+  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,
+    }
+  )
 
-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 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)
 
-const { uvNode } = useShaderPipelineContext()
+  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
+    }
+  )
 
-useShaderStage(
-  (_prev) => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,49 +1,71 @@
+<!-- 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, Vector2, Vector3 } from 'three'
-import { uniform, vec4, vec2, mix, smoothstep, float } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector2, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec2, vec4 } 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 })
+  /**
+   * 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))
-}
+  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 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()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  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,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,35 +1,61 @@
+<!-- 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 { clamp, float, fract, mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
-import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { clamp, float, fract, mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
 
-type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
+  import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
 
-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 })
+  type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
 
-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 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 pipeline = useShaderPipelineContext()
+  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) => {
+  useShaderStage((prev) => {
     const uvScaled = pipeline.uvNode.value.mul(sizeNode)
     const t = time.mul(fpsNode).floor().div(fpsNode)
 
@@ -61,9 +87,5 @@ useShaderStage(
         blended = prev.xyz.sub(raw.mul(intensityNode).mul(opacityNode))
     }
     return vec4(clamp(blended, 0, 1), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,35 +1,46 @@
+<!-- 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 { uniform, float, atan, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { atan, float, uniform, 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 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 })
+  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()
+  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)
+      // 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',
-)
+      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

@@ -1,39 +1,67 @@
+<!-- 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 { uniform, time, vec3, vec4, mix, clamp, float } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { clamp, float, mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
-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 })
+  import { fbm2D } 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<{
+      /** 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 }
+  )
 
-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 })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  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
+    }
+  )
 
-useShaderStage(
-  () => {
+  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))
@@ -43,9 +71,5 @@ useShaderStage(
     // Black background → tip colour → base colour
     const fireColor = mix(vec3(0, 0, 0), mix(colorTipNode, colorBaseNode, heat), heat)
     return vec4(fireColor, heat)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>