kmcom-nuxt-layers 1.7.8 → 2.1.6

package/layers/shader/app/components/Pipeline/ScreenBlend.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 { mix, uniform, vec4 } from 'three/tsl'
-import { blendScreen } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  order?: number
-}>(), { color: '#808080', opacity: 1, order: 0 })
+  import { blendScreen } 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) => vec4(mix(prev.xyz, blendScreen(prev.xyz, colorNode), opacityNode), prev.w),
-  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) => vec4(mix(prev.xyz, blendScreen(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,42 +1,62 @@
+<!-- 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, vec3, vec4, float, floor, fract } from 'three/tsl'
+  // @ts-nocheck
+  import { float, floor, fract, uniform, vec3, vec4 } from 'three/tsl'
 
-/**
- * ShaderDebugger — dev-only visualization overlay for inspecting pipeline state.
- *
- * Modes:
- *   'uv'     — displays UV coordinates as red/green channels
- *   'normal' — encodes normal-space UV as blue hue sweep
- *   'grid'   — overlays a reference grid on the current output
- *   'pass'   — passes through unchanged (no-op, useful for toggling off)
- *
- * Drop this at any `order` value to inspect that point in the pipeline.
- * Only renders in development — remove from production compositions.
- */
-const props = withDefaults(defineProps<{
-  /** Visualization mode */
-  mode?: 'uv' | 'normal' | 'grid' | 'pass'
-  /** Grid line count (grid mode) */
-  gridLines?: number
-  /** Grid line thickness */
-  gridThickness?: number
-  /** Blend with original output (0 = full debug, 1 = full original) */
-  blend?: number
-  order?: number
-}>(), { mode: 'uv', gridLines: 10, gridThickness: 0.02, blend: 0, order: 0 })
+  /**
+   * ShaderDebugger — dev-only visualization overlay for inspecting pipeline state.
+   *
+   * Modes:
+   *   'uv'     — displays UV coordinates as red/green channels
+   *   'normal' — encodes normal-space UV as blue hue sweep
+   *   'grid'   — overlays a reference grid on the current output
+   *   'pass'   — passes through unchanged (no-op, useful for toggling off)
+   *
+   * Drop this at any `order` value to inspect that point in the pipeline.
+   * Only renders in development — remove from production compositions.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Visualization mode */
+      mode?: 'uv' | 'normal' | 'grid' | 'pass'
+      /** Grid line count (grid mode) */
+      gridLines?: number
+      /** Grid line thickness */
+      gridThickness?: number
+      /** Blend with original output (0 = full debug, 1 = full original) */
+      blend?: number
+      order?: number
+    }>(),
+    { mode: 'uv', gridLines: 10, gridThickness: 0.02, blend: 0, order: 0 }
+  )
 
-const gridLinesNode = uniform(props.gridLines)
-const gridThickNode = uniform(props.gridThickness)
-const blendNode = uniform(props.blend)
-watch(() => props.gridLines, v => { gridLinesNode.value = v })
-watch(() => props.gridThickness, v => { gridThickNode.value = v })
-watch(() => props.blend, v => { blendNode.value = v })
+  const gridLinesNode = uniform(props.gridLines)
+  const gridThickNode = uniform(props.gridThickness)
+  const blendNode = uniform(props.blend)
+  watch(
+    () => props.gridLines,
+    (v) => {
+      gridLinesNode.value = v
+    }
+  )
+  watch(
+    () => props.gridThickness,
+    (v) => {
+      gridThickNode.value = v
+    }
+  )
+  watch(
+    () => props.blend,
+    (v) => {
+      blendNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
 
     let debugColour
@@ -44,13 +64,11 @@ useShaderStage(
     if (props.mode === 'uv') {
       // Red = U, Green = V, Blue = 0
       debugColour = vec3(uv.x, uv.y, float(0))
-    }
-    else if (props.mode === 'normal') {
+    } else if (props.mode === 'normal') {
       // Encodes centered UV — negative values become blue tones
       const centered = uv.sub(0.5)
       debugColour = vec3(centered.x.add(0.5), centered.y.add(0.5), float(0.5))
-    }
-    else if (props.mode === 'grid') {
+    } else if (props.mode === 'grid') {
       // Grid lines via fract — line at every 1/gridLines interval
       const scaled = uv.mul(gridLinesNode)
       const fx = fract(scaled.x)
@@ -59,16 +77,11 @@ useShaderStage(
       const lineY = float(1).sub(fy.smoothstep(gridThickNode, float(0)))
       const line = lineX.max(lineY)
       debugColour = prev.xyz.mul(float(1).sub(line)).add(vec3(line, line.mul(0.5), float(0)))
-    }
-    else {
+    } else {
       // pass — no-op
       debugColour = prev.xyz
     }
 
     return vec4(prev.xyz.mix(debugColour, float(1).sub(blendNode)), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,49 +1,71 @@
+<!-- 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 { Color } from 'three'
-import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
-import { simplexNoise2D } 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
-  animated?: boolean
-  speed?: number
-  order?: number
-}>(), {
-  colorA: '#000000',
-  colorB: '#ffffff',
-  scale: 3,
-  animated: true,
-  speed: 0.3,
-  order: 0,
-})
+  import { simplexNoise2D } 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
+      animated?: boolean
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#000000',
+      colorB: '#ffffff',
+      scale: 3,
+      animated: true,
+      speed: 0.3,
+      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) => {
     // Scroll UV over time to animate noise (cheaper than 3D noise)
     const offset = props.animated ? time.mul(speedNode) : float(0)
     const input = uvNode.value.mul(scaleNode).add(vec2(offset, 0))
     const n = simplexNoise2D(input).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/SkyAtmosphere.client.vue

@@ -1,60 +1,97 @@
+<!-- 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, clamp, mix, pow, dot, vec3, vec4, float } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { clamp, dot, float, mix, pow, uniform, vec3, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Sky colour at the zenith */
-  zenith?: string
-  /** Sky colour at the horizon */
-  horizon?: string
-  /** Ground colour below horizon */
-  ground?: string
-  /** Sun direction — [x, y, z] world space (will be normalised) */
-  sunDirection?: [number, number, number]
-  /** Sun colour */
-  sunColor?: string
-  /** Sun disk sharpness (higher = smaller disk) */
-  sunPower?: number
-  order?: number
-}>(), {
-  zenith: '#1a3a8a',
-  horizon: '#7ab0d8',
-  ground: '#5a4a3a',
-  sunDirection: () => [0.3, 0.8, 0.5],
-  sunColor: '#fff8e0',
-  sunPower: 512,
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      /** Sky colour at the zenith */
+      zenith?: string
+      /** Sky colour at the horizon */
+      horizon?: string
+      /** Ground colour below horizon */
+      ground?: string
+      /** Sun direction — [x, y, z] world space (will be normalised) */
+      sunDirection?: [number, number, number]
+      /** Sun colour */
+      sunColor?: string
+      /** Sun disk sharpness (higher = smaller disk) */
+      sunPower?: number
+      order?: number
+    }>(),
+    {
+      zenith: '#1a3a8a',
+      horizon: '#7ab0d8',
+      ground: '#5a4a3a',
+      sunDirection: () => [0.3, 0.8, 0.5],
+      sunColor: '#fff8e0',
+      sunPower: 512,
+      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 zenithNode = toVec3Node(props.zenith)
-const horizonNode = toVec3Node(props.horizon)
-const groundNode = toVec3Node(props.ground)
-const sunColorNode = toVec3Node(props.sunColor)
-const sunPowerNode = uniform(props.sunPower)
+  const zenithNode = toVec3Node(props.zenith)
+  const horizonNode = toVec3Node(props.horizon)
+  const groundNode = toVec3Node(props.ground)
+  const sunColorNode = toVec3Node(props.sunColor)
+  const sunPowerNode = uniform(props.sunPower)
 
-const sunDir = new Vector3(...props.sunDirection).normalize()
-const sunDirNode = uniform(new Vector3(sunDir.x, sunDir.y, sunDir.z))
+  const sunDir = new Vector3(...props.sunDirection).normalize()
+  const sunDirNode = uniform(new Vector3(sunDir.x, sunDir.y, sunDir.z))
 
-watch(() => props.zenith, v => { const c = new Color(v); zenithNode.value.set(c.r, c.g, c.b) })
-watch(() => props.horizon, v => { const c = new Color(v); horizonNode.value.set(c.r, c.g, c.b) })
-watch(() => props.ground, v => { const c = new Color(v); groundNode.value.set(c.r, c.g, c.b) })
-watch(() => props.sunColor, v => { const c = new Color(v); sunColorNode.value.set(c.r, c.g, c.b) })
-watch(() => props.sunPower, v => { sunPowerNode.value = v })
-watch(() => props.sunDirection, ([x, y, z]) => {
-  const d = new Vector3(x, y, z).normalize()
-  sunDirNode.value.set(d.x, d.y, d.z)
-})
+  watch(
+    () => props.zenith,
+    (v) => {
+      const c = new Color(v)
+      zenithNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.horizon,
+    (v) => {
+      const c = new Color(v)
+      horizonNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.ground,
+    (v) => {
+      const c = new Color(v)
+      groundNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.sunColor,
+    (v) => {
+      const c = new Color(v)
+      sunColorNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.sunPower,
+    (v) => {
+      sunPowerNode.value = v
+    }
+  )
+  watch(
+    () => props.sunDirection,
+    ([x, y, z]) => {
+      const d = new Vector3(x, y, z).normalize()
+      sunDirNode.value.set(d.x, d.y, d.z)
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const ray = pipeline.rayNode.value
 
     // Sky gradient: -1..+1 on Y → ground..zenith
@@ -67,9 +104,5 @@ useShaderStage(
     const sun = sunColorNode.mul(pow(sunDot, sunPowerNode))
 
     return vec4(colour.add(sun), 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/SoftLightBlend.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 { mix, uniform, vec4 } from 'three/tsl'
-import { blendSoftLight } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  order?: number
-}>(), { color: '#808080', opacity: 1, order: 0 })
+  import { blendSoftLight } 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) => vec4(mix(prev.xyz, blendSoftLight(prev.xyz, colorNode), opacityNode), prev.w),
-  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) => vec4(mix(prev.xyz, blendSoftLight(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,21 +1,29 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color } from 'three'
-import { uniform, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  order?: number
-}>(), {
-  color: '#ffffff',
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      order?: number
+    }>(),
+    {
+      color: '#ffffff',
+      order: 0,
+    }
+  )
 
-const colorVal = new Color(props.color)
-const colorNode = uniform(colorVal)
-watch(() => props.color, v => { colorNode.value.set(v) })
+  const colorVal = new Color(props.color)
+  const colorNode = uniform(colorVal)
+  watch(
+    () => props.color,
+    (v) => {
+      colorNode.value.set(v)
+    }
+  )
 
-useShaderStage((_prev) => vec4(colorNode, 1.0), props.order)
+  useShaderStage((_prev) => vec4(colorNode, 1.0), props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,37 +1,65 @@
+<!-- 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, smoothstep, float } from 'three/tsl'
-import { luminance } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Colour pushed into shadow tones */
-  shadowColor?: string
-  /** Colour pushed into highlight tones */
-  highlightColor?: string
-  /** Balance point: 0.5 = even split, lower = shadows dominate */
-  balance?: number
-  /** Overall blend strength */
-  opacity?: number
-  order?: number
-}>(), { shadowColor: '#1a2a5a', highlightColor: '#ffeecc', balance: 0.5, opacity: 0.5, order: 0 })
+  import { luminance } from '../../shaders/common/blend'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      /** Colour pushed into shadow tones */
+      shadowColor?: string
+      /** Colour pushed into highlight tones */
+      highlightColor?: string
+      /** Balance point: 0.5 = even split, lower = shadows dominate */
+      balance?: number
+      /** Overall blend strength */
+      opacity?: number
+      order?: number
+    }>(),
+    { shadowColor: '#1a2a5a', highlightColor: '#ffeecc', balance: 0.5, opacity: 0.5, order: 0 }
+  )
 
-const shadowNode = toVec3Node(props.shadowColor)
-const highlightNode = toVec3Node(props.highlightColor)
-const balanceNode = uniform(props.balance)
-const opacityNode = uniform(props.opacity)
-watch(() => props.shadowColor, v => { const c = new Color(v); shadowNode.value.set(c.r, c.g, c.b) })
-watch(() => props.highlightColor, v => { const c = new Color(v); highlightNode.value.set(c.r, c.g, c.b) })
-watch(() => props.balance, v => { balanceNode.value = v })
-watch(() => props.opacity, v => { opacityNode.value = v })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-useShaderStage(
-  (prev) => {
+  const shadowNode = toVec3Node(props.shadowColor)
+  const highlightNode = toVec3Node(props.highlightColor)
+  const balanceNode = uniform(props.balance)
+  const opacityNode = uniform(props.opacity)
+  watch(
+    () => props.shadowColor,
+    (v) => {
+      const c = new Color(v)
+      shadowNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.highlightColor,
+    (v) => {
+      const c = new Color(v)
+      highlightNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.balance,
+    (v) => {
+      balanceNode.value = v
+    }
+  )
+  watch(
+    () => props.opacity,
+    (v) => {
+      opacityNode.value = v
+    }
+  )
+
+  useShaderStage((prev) => {
     const lum = luminance(prev.xyz)
     const shadowMask = smoothstep(balanceNode, float(0), lum)
     const highlightMask = smoothstep(balanceNode, float(1), lum)
@@ -39,9 +67,5 @@ useShaderStage(
       .add(shadowNode.mul(shadowMask).mul(opacityNode))
       .add(highlightNode.mul(highlightMask).mul(opacityNode))
     return vec4(toned, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>