kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,47 +1,83 @@
+<!-- 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 { star } 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
-  radius?: number
-  /** Number of points */
-  points?: number
-  /** Inner radius ratio (0–1) */
-  innerRatio?: number
-  softness?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffcc00', radius: 0.35, points: 5, innerRatio: 0.45, softness: 0.01, order: 0 })
+  import { star } 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
+      radius?: number
+      /** Number of points */
+      points?: number
+      /** Inner radius ratio (0–1) */
+      innerRatio?: number
+      softness?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#000000',
+      colorB: '#ffcc00',
+      radius: 0.35,
+      points: 5,
+      innerRatio: 0.45,
+      softness: 0.01,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const radiusNode = uniform(props.radius)
-const innerNode = uniform(props.innerRatio)
-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.radius, v => { radiusNode.value = v })
-watch(() => props.innerRatio, v => { innerNode.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 radiusNode = uniform(props.radius)
+  const innerNode = uniform(props.innerRatio)
+  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.radius,
+    (v) => {
+      radiusNode.value = v
+    }
+  )
+  watch(
+    () => props.innerRatio,
+    (v) => {
+      innerNode.value = v
+    }
+  )
+  watch(
+    () => props.softness,
+    (v) => {
+      softnessNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const mask = star(uv, [0.5, 0.5], radiusNode, props.points, innerNode, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,36 +1,72 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time, vec3, vec4, vec2, floor, fract, sin, dot, smoothstep, float } from 'three/tsl'
+  // @ts-nocheck
+  import {
+    dot,
+    float,
+    floor,
+    fract,
+    sin,
+    smoothstep,
+    time,
+    uniform,
+    vec2,
+    vec3,
+    vec4,
+  } from 'three/tsl'
 
-/**
- * Hash-based procedural starfield.
- * Each cell on a grid may contain a star whose brightness twinkles over time.
- */
-const props = withDefaults(defineProps<{
-  /** Grid density — higher = more stars */
-  density?: number
-  /** Star brightness */
-  brightness?: number
-  /** Twinkle animation speed */
-  twinkleSpeed?: number
-  /** Star size (sharpness) */
-  size?: number
-  order?: number
-}>(), { density: 80, brightness: 1.0, twinkleSpeed: 1.0, size: 0.4, order: 0 })
+  /**
+   * Hash-based procedural starfield.
+   * Each cell on a grid may contain a star whose brightness twinkles over time.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Grid density — higher = more stars */
+      density?: number
+      /** Star brightness */
+      brightness?: number
+      /** Twinkle animation speed */
+      twinkleSpeed?: number
+      /** Star size (sharpness) */
+      size?: number
+      order?: number
+    }>(),
+    { density: 80, brightness: 1.0, twinkleSpeed: 1.0, size: 0.4, order: 0 }
+  )
 
-const densityNode = uniform(props.density)
-const brightnessNode = uniform(props.brightness)
-const twinkleNode = uniform(props.twinkleSpeed)
-const sizeNode = uniform(props.size)
-watch(() => props.density, v => { densityNode.value = v })
-watch(() => props.brightness, v => { brightnessNode.value = v })
-watch(() => props.twinkleSpeed, v => { twinkleNode.value = v })
-watch(() => props.size, v => { sizeNode.value = v })
+  const densityNode = uniform(props.density)
+  const brightnessNode = uniform(props.brightness)
+  const twinkleNode = uniform(props.twinkleSpeed)
+  const sizeNode = uniform(props.size)
+  watch(
+    () => props.density,
+    (v) => {
+      densityNode.value = v
+    }
+  )
+  watch(
+    () => props.brightness,
+    (v) => {
+      brightnessNode.value = v
+    }
+  )
+  watch(
+    () => props.twinkleSpeed,
+    (v) => {
+      twinkleNode.value = v
+    }
+  )
+  watch(
+    () => props.size,
+    (v) => {
+      sizeNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const t = time.mul(twinkleNode)
 
@@ -52,14 +88,12 @@ useShaderStage(
     const dist = local.sub(starPos).length()
 
     // Twinkle via time-based sine modulation
-    const twinkle = sin(t.add(h1.mul(6.28))).mul(0.3).add(0.7)
+    const twinkle = sin(t.add(h1.mul(6.28)))
+      .mul(0.3)
+      .add(0.7)
     const star = smoothstep(sizeNode, float(0), dist.mul(10)).mul(hasStar).mul(twinkle)
 
     const colour = vec3(star.mul(brightnessNode))
     return vec4(prev.xyz.add(colour), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,46 +1,74 @@
+<!-- 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 { stripes } 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
-  frequency?: number
-  /** Fraction of each stripe that is colorB (0–1) */
-  thickness?: number
-  /** Angle in degrees */
-  angle?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', frequency: 10, thickness: 0.5, angle: 0, order: 0 })
+  import { stripes } 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
+      frequency?: number
+      /** Fraction of each stripe that is colorB (0–1) */
+      thickness?: number
+      /** Angle in degrees */
+      angle?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', frequency: 10, thickness: 0.5, angle: 0, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const freqNode = uniform(props.frequency)
-const thickNode = uniform(props.thickness)
-const angleNode = uniform(props.angle * 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.frequency, v => { freqNode.value = v })
-watch(() => props.thickness, v => { thickNode.value = v })
-watch(() => props.angle, v => { angleNode.value = v * Math.PI / 180 })
+  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 freqNode = uniform(props.frequency)
+  const thickNode = uniform(props.thickness)
+  const angleNode = uniform((props.angle * 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.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.thickness,
+    (v) => {
+      thickNode.value = v
+    }
+  )
+  watch(
+    () => props.angle,
+    (v) => {
+      angleNode.value = (v * Math.PI) / 180
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const mask = stripes(uv, freqNode, thickNode, angleNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,24 +1,38 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color } from 'three'
-import { clamp, uniform, vec4 } from 'three/tsl'
-import { blendSubtract } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { clamp, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  order?: number
-}>(), { color: '#808080', opacity: 1, order: 0 })
+  import { blendSubtract } from '../../shaders/common/blend'
 
-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 })
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      opacity?: number
+      order?: number
+    }>(),
+    { color: '#808080', opacity: 1, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => clamp(vec4(blendSubtract(prev.xyz, colorNode, opacityNode), prev.w), 0, 1),
-  props.order,
-)
-</script>
+  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
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (prev) => clamp(vec4(blendSubtract(prev.xyz, colorNode, opacityNode), prev.w), 0, 1),
+    props.order
+  )
+</script>

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

@@ -1,24 +1,30 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4 } from 'three/tsl'
-import { tanhTonemap } from '../../shaders/common/tonemapping'
+  // @ts-nocheck
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Controls how aggressively values above 1 are compressed. dawn5 uses 2.5. */
-  exposure?: number
-  order?: number
-}>(), {
-  exposure: 1.0,
-  order: 0,
-})
+  import { tanhTonemap } from '../../shaders/common/tonemapping'
 
-const exposureNode = uniform(props.exposure)
-watch(() => props.exposure, v => { exposureNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Controls how aggressively values above 1 are compressed. dawn5 uses 2.5. */
+      exposure?: number
+      order?: number
+    }>(),
+    {
+      exposure: 1.0,
+      order: 0,
+    }
+  )
 
-useShaderStage(
-  (prev) => vec4(tanhTonemap(prev.xyz.mul(exposureNode)), prev.w),
-  props.order,
-)
-</script>
+  const exposureNode = uniform(props.exposure)
+  watch(
+    () => props.exposure,
+    (v) => {
+      exposureNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage((prev) => vec4(tanhTonemap(prev.xyz.mul(exposureNode)), prev.w), props.order)
+</script>

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

@@ -1,25 +1,31 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4, step, float } from 'three/tsl'
-import { luminance } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { float, step, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Luminance threshold 0–1: below = black, above = white */
-  threshold?: number
-  order?: number
-}>(), { threshold: 0.5, order: 0 })
+  import { luminance } from '../../shaders/common/blend'
 
-const thresholdNode = uniform(props.threshold)
-watch(() => props.threshold, v => { thresholdNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Luminance threshold 0–1: below = black, above = white */
+      threshold?: number
+      order?: number
+    }>(),
+    { threshold: 0.5, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => {
+  const thresholdNode = uniform(props.threshold)
+  watch(
+    () => props.threshold,
+    (v) => {
+      thresholdNode.value = v
+    }
+  )
+
+  useShaderStage((prev) => {
     const lum = luminance(prev.xyz)
     const t = step(thresholdNode, lum)
     return vec4(float(t), float(t), float(t), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,33 +1,44 @@
+<!-- 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 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Tint colour — multiplied against the existing colour */
-  color?: string
-  /** Blend between original (0) and fully tinted (1) */
-  opacity?: number
-  order?: number
-}>(), { color: '#ff8844', opacity: 1, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Tint colour — multiplied against the existing colour */
+      color?: string
+      /** Blend between original (0) and fully tinted (1) */
+      opacity?: number
+      order?: number
+    }>(),
+    { color: '#ff8844', opacity: 1, 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 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 })
+  const colorNode = toVec3Node(props.color)
+  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) => {
+  useShaderStage((prev) => {
     const tinted = prev.xyz.mul(colorNode)
     return vec4(prev.xyz.mix(tinted, opacityNode), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,42 +1,65 @@
+<!-- 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, smoothstep, float } from 'three/tsl'
-import { sdEquilateralTriangle } from '../../shaders/common/sdf'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  size?: number
-  softness?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', size: 0.35, softness: 0.01, order: 0 })
+  import { sdEquilateralTriangle } from '../../shaders/common/sdf'
 
-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
+      size?: number
+      softness?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', size: 0.35, softness: 0.01, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const sizeNode = uniform(props.size)
-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.size, v => { sizeNode.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 sizeNode = uniform(props.size)
+  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.size,
+    (v) => {
+      sizeNode.value = v
+    }
+  )
+  watch(
+    () => props.softness,
+    (v) => {
+      softnessNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const d = sdEquilateralTriangle(uv.sub(0.5), sizeNode)
     const mask = smoothstep(softnessNode, softnessNode.negate(), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>