kmcom-nuxt-layers 1.7.9 → 2.1.6

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

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

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

@@ -1,23 +1,28 @@
+<!-- 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<{
-  /** Gamma value: 1 = unchanged, 2.2 = standard display gamma */
-  gamma?: number
-  order?: number
-}>(), { gamma: 2.2, order: 0 })
+  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 })
+  const gammaNode = uniform(props.gamma)
+  watch(
+    () => props.gamma,
+    (v) => {
+      gammaNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const corrected = pow(prev.xyz.max(float(0)), float(1).div(gammaNode))
     return vec4(corrected, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,46 +1,84 @@
+<!-- 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, vec2, vec3, vec4, smoothstep, sin, cos, float } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector2, Vector3 } from 'three'
+  import { cos, float, sin, smoothstep, uniform, vec2, vec3, vec4 } from 'three/tsl'
 
-/**
- * Radial god rays — procedural volumetric light shafts emanating from a source point.
- * Uses angular spokes in UV space to approximate crepuscular rays.
- */
-const props = withDefaults(defineProps<{
-  /** Light source UV position */
-  position?: [number, number]
-  /** Ray colour */
-  color?: string
-  /** Ray brightness */
-  intensity?: number
-  /** Number of ray spokes */
-  rayCount?: number
-  /** Radial decay rate */
-  decay?: number
-  order?: number
-}>(), { position: () => [0.5, 0.9], color: '#fff9e0', intensity: 0.35, rayCount: 12, decay: 2.0, order: 0 })
+  /**
+   * Radial god rays — procedural volumetric light shafts emanating from a source point.
+   * Uses angular spokes in UV space to approximate crepuscular rays.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Light source UV position */
+      position?: [number, number]
+      /** Ray colour */
+      color?: string
+      /** Ray brightness */
+      intensity?: number
+      /** Number of ray spokes */
+      rayCount?: number
+      /** Radial decay rate */
+      decay?: number
+      order?: number
+    }>(),
+    {
+      position: () => [0.5, 0.9],
+      color: '#fff9e0',
+      intensity: 0.35,
+      rayCount: 12,
+      decay: 2.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 posNode = uniform(new Vector2(...props.position))
-const colorNode = toVec3Node(props.color)
-const intensityNode = uniform(props.intensity)
-const rayCountNode = uniform(props.rayCount)
-const decayNode = uniform(props.decay)
-watch(() => props.position, ([x, y]) => { posNode.value.set(x, y) })
-watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
-watch(() => props.intensity, v => { intensityNode.value = v })
-watch(() => props.rayCount, v => { rayCountNode.value = v })
-watch(() => props.decay, v => { decayNode.value = v })
+  const posNode = uniform(new Vector2(...props.position))
+  const colorNode = toVec3Node(props.color)
+  const intensityNode = uniform(props.intensity)
+  const rayCountNode = uniform(props.rayCount)
+  const decayNode = uniform(props.decay)
+  watch(
+    () => props.position,
+    ([x, y]) => {
+      posNode.value.set(x, y)
+    }
+  )
+  watch(
+    () => props.color,
+    (v) => {
+      const c = new Color(v)
+      colorNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      intensityNode.value = v
+    }
+  )
+  watch(
+    () => props.rayCount,
+    (v) => {
+      rayCountNode.value = v
+    }
+  )
+  watch(
+    () => props.decay,
+    (v) => {
+      decayNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const src = vec2(posNode.x, posNode.y)
     const dir = uv.sub(src)
@@ -56,9 +94,5 @@ useShaderStage(
 
     const rays = spoke.pow(3).mul(radialFade).mul(intensityNode)
     return vec4(prev.xyz.add(colorNode.mul(rays)), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,42 +1,67 @@
+<!-- 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, float } from 'three/tsl'
-import { gradientNoise3D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  scale?: number
-  speed?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', scale: 3, speed: 0.2, order: 0 })
+  import { gradientNoise3D } 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: 3, speed: 0.2, 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 t = time.mul(speedNode)
-    const n = gradientNoise3D(vec3(uv.mul(scaleNode), t)).mul(0.5).add(0.5)
+    const n = gradientNoise3D(vec3(uv.mul(scaleNode), t))
+      .mul(0.5)
+      .add(0.5)
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,46 +1,86 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { clamp, dot, float, floor, fract, mix, pow, sin, step, time, uniform, vec2, vec4 } from 'three/tsl'
-import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import {
+    clamp,
+    dot,
+    float,
+    floor,
+    fract,
+    mix,
+    pow,
+    sin,
+    step,
+    time,
+    uniform,
+    vec2,
+    vec4,
+  } from 'three/tsl'
 
-type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
-type GrainStyle = 'smooth' | 'dotted' | 'coarse'
+  import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
 
-const props = withDefaults(defineProps<{
-  intensity?: number
-  opacity?: number
-  /** UV scale — higher = finer grain, lower = bigger dots */
-  size?: number
-  /** smooth = continuous noise, dotted = binary on/off specks, coarse = concentrated bright grit */
-  style?: GrainStyle
-  animated?: boolean
-  fps?: number
-  blendMode?: GrainBlendMode
-  order?: number
-}>(), {
-  intensity: 0.08,
-  opacity: 1.0,
-  size: 1.0,
-  style: 'smooth',
-  animated: true,
-  fps: 24,
-  blendMode: 'add',
-  order: 0,
-})
+  type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
+  type GrainStyle = 'smooth' | 'dotted' | 'coarse'
 
-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<{
+      intensity?: number
+      opacity?: number
+      /** UV scale — higher = finer grain, lower = bigger dots */
+      size?: number
+      /** smooth = continuous noise, dotted = binary on/off specks, coarse = concentrated bright grit */
+      style?: GrainStyle
+      animated?: boolean
+      fps?: number
+      blendMode?: GrainBlendMode
+      order?: number
+    }>(),
+    {
+      intensity: 0.08,
+      opacity: 1.0,
+      size: 1.0,
+      style: 'smooth',
+      animated: true,
+      fps: 24,
+      blendMode: 'add',
+      order: 0,
+    }
+  )
 
-const { uvNode } = 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 { uvNode } = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uvScaled = uvNode.value.mul(sizeNode)
     const seed = props.animated ? floor(time.mul(fpsNode)) : float(0)
 
@@ -48,11 +88,12 @@ useShaderStage(
     const raw = fract(sin(dot(uvScaled.add(seed), vec2(12.9898, 78.233))).mul(43758.5453))
 
     // Shape the noise based on style
-    const shaped = props.style === 'dotted'
-      ? step(float(0.65), raw)           // binary: sparse bright specks
-      : props.style === 'coarse'
-        ? pow(raw, float(4.0)).mul(2.5)  // concentrated bright grit, rest dark
-        : raw                             // smooth: continuous noise
+    const shaped =
+      props.style === 'dotted'
+        ? step(float(0.65), raw) // binary: sparse bright specks
+        : props.style === 'coarse'
+          ? pow(raw, float(4.0)).mul(2.5) // concentrated bright grit, rest dark
+          : raw // smooth: continuous noise
 
     const mixFactor = intensityNode.mul(opacityNode)
     let blended
@@ -73,9 +114,5 @@ useShaderStage(
         blended = prev.xyz.add(shaped.sub(0.5).mul(intensityNode).mul(opacityNode))
     }
     return clamp(vec4(blended, prev.w), 0, 1)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,43 +1,66 @@
+<!-- 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 { grid } from '../../shaders/common/shapes'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Background colour */
-  colorA?: string
-  /** Grid line colour */
-  colorB?: string
-  cellSize?: number
-  lineWidth?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', cellSize: 0.1, lineWidth: 0.005, order: 0 })
+  import { grid } 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<{
+      /** Background colour */
+      colorA?: string
+      /** Grid line colour */
+      colorB?: string
+      cellSize?: number
+      lineWidth?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', cellSize: 0.1, lineWidth: 0.005, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const cellNode = uniform(props.cellSize)
-const lineNode = uniform(props.lineWidth)
-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.lineWidth, v => { lineNode.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 cellNode = uniform(props.cellSize)
+  const lineNode = uniform(props.lineWidth)
+  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.lineWidth,
+    (v) => {
+      lineNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const mask = grid(uv, cellNode, lineNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>