kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,60 +1,98 @@
+<!-- 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, vec4, mix, smoothstep, float } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Sky colour */
-  colorSky?: string
-  /** Cloud colour */
-  colorCloud?: string
-  /** FBM noise input scale */
-  scale?: number
-  /** Cloud coverage: lower = fewer clouds, higher = overcast */
-  coverage?: number
-  /** Cloud softness */
-  softness?: number
-  /** Wind speed */
-  speed?: number
-  order?: number
-}>(), { colorSky: '#5588cc', colorCloud: '#ffffff', scale: 2, coverage: 0.5, softness: 0.15, speed: 0.05, 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<{
+      /** Sky colour */
+      colorSky?: string
+      /** Cloud colour */
+      colorCloud?: string
+      /** FBM noise input scale */
+      scale?: number
+      /** Cloud coverage: lower = fewer clouds, higher = overcast */
+      coverage?: number
+      /** Cloud softness */
+      softness?: number
+      /** Wind speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorSky: '#5588cc',
+      colorCloud: '#ffffff',
+      scale: 2,
+      coverage: 0.5,
+      softness: 0.15,
+      speed: 0.05,
+      order: 0,
+    }
+  )
 
-const colorSkyNode = toVec3Node(props.colorSky)
-const colorCloudNode = toVec3Node(props.colorCloud)
-const scaleNode = uniform(props.scale)
-const coverageNode = uniform(props.coverage)
-const softnessNode = uniform(props.softness)
-const speedNode = uniform(props.speed)
-watch(() => props.colorSky, v => { const c = new Color(v); colorSkyNode.value.set(c.r, c.g, c.b) })
-watch(() => props.colorCloud, v => { const c = new Color(v); colorCloudNode.value.set(c.r, c.g, c.b) })
-watch(() => props.scale, v => { scaleNode.value = v })
-watch(() => props.coverage, v => { coverageNode.value = v })
-watch(() => props.softness, v => { softnessNode.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 colorSkyNode = toVec3Node(props.colorSky)
+  const colorCloudNode = toVec3Node(props.colorCloud)
+  const scaleNode = uniform(props.scale)
+  const coverageNode = uniform(props.coverage)
+  const softnessNode = uniform(props.softness)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.colorSky,
+    (v) => {
+      const c = new Color(v)
+      colorSkyNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorCloud,
+    (v) => {
+      const c = new Color(v)
+      colorCloudNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.coverage,
+    (v) => {
+      coverageNode.value = v
+    }
+  )
+  watch(
+    () => props.softness,
+    (v) => {
+      softnessNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const wind = time.mul(speedNode)
     const n = fbm2D(uv.mul(scaleNode).add(wind)).mul(0.5).add(0.5)
     // Remap to cloud mask using coverage + softness
-    const cloud = smoothstep(
-      coverageNode.sub(softnessNode),
-      coverageNode.add(softnessNode),
-      n,
-    )
+    const cloud = smoothstep(coverageNode.sub(softnessNode), coverageNode.add(softnessNode), n)
     return vec4(mix(colorSkyNode, colorCloudNode, cloud), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,24 +1,39 @@
+<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
-import { blendColorBurn } 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 { blendColorBurn } 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, blendColorBurn(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, blendColorBurn(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,24 +1,39 @@
+<!-- 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 { mix, uniform, vec4 } from 'three/tsl'
-import { blendColorDodge } 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 { blendColorDodge } 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, blendColorDodge(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, blendColorDodge(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,57 +1,87 @@
+<!-- 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'
 
-/**
- * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
- * For a simple two-stop ramp use DuoTone instead.
- */
-const props = withDefaults(defineProps<{
-  shadowColor?: string
-  midtoneColor?: string
-  highlightColor?: string
-  /** Luminance threshold between shadow and midtone */
-  shadowPoint?: number
-  /** Luminance threshold between midtone and highlight */
-  highlightPoint?: number
-  order?: number
-}>(), {
-  shadowColor: '#000033',
-  midtoneColor: '#660066',
-  highlightColor: '#ffcc88',
-  shadowPoint: 0.33,
-  highlightPoint: 0.67,
-  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))
-}
+  /**
+   * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
+   * For a simple two-stop ramp use DuoTone instead.
+   */
+  const props = withDefaults(
+    defineProps<{
+      shadowColor?: string
+      midtoneColor?: string
+      highlightColor?: string
+      /** Luminance threshold between shadow and midtone */
+      shadowPoint?: number
+      /** Luminance threshold between midtone and highlight */
+      highlightPoint?: number
+      order?: number
+    }>(),
+    {
+      shadowColor: '#000033',
+      midtoneColor: '#660066',
+      highlightColor: '#ffcc88',
+      shadowPoint: 0.33,
+      highlightPoint: 0.67,
+      order: 0,
+    }
+  )
 
-const shadowNode = toVec3Node(props.shadowColor)
-const midNode = toVec3Node(props.midtoneColor)
-const highlightNode = toVec3Node(props.highlightColor)
-const shadowPtNode = uniform(props.shadowPoint)
-const highlightPtNode = uniform(props.highlightPoint)
-watch(() => props.shadowColor, v => { const c = new Color(v); shadowNode.value.set(c.r, c.g, c.b) })
-watch(() => props.midtoneColor, v => { const c = new Color(v); midNode.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.shadowPoint, v => { shadowPtNode.value = v })
-watch(() => props.highlightPoint, v => { highlightPtNode.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 midNode = toVec3Node(props.midtoneColor)
+  const highlightNode = toVec3Node(props.highlightColor)
+  const shadowPtNode = uniform(props.shadowPoint)
+  const highlightPtNode = uniform(props.highlightPoint)
+  watch(
+    () => props.shadowColor,
+    (v) => {
+      const c = new Color(v)
+      shadowNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.midtoneColor,
+    (v) => {
+      const c = new Color(v)
+      midNode.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.shadowPoint,
+    (v) => {
+      shadowPtNode.value = v
+    }
+  )
+  watch(
+    () => props.highlightPoint,
+    (v) => {
+      highlightPtNode.value = v
+    }
+  )
+
+  useShaderStage((prev) => {
     const lum = luminance(prev.xyz)
     const t1 = smoothstep(float(0), shadowPtNode, lum)
     const t2 = smoothstep(shadowPtNode, highlightPtNode, lum)
     const colour = mix(mix(shadowNode, midNode, t1), mix(midNode, highlightNode, t2), t2)
     return vec4(colour, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,51 +1,82 @@
+<!-- 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, time, vec2, vec4, float, cos, sin } from 'three/tsl'
-import { complexDiv, complexLog } from '../../shaders/common/complex'
+  // @ts-nocheck
+  import { cos, float, sin, time, uniform, vec2, vec4 } from 'three/tsl'
 
-/**
- * Complex number plane visualisation — the imaginary2 pattern.
- * Places two poles p, q derived from poleAngle/poleDistance,
- * computes the Möbius transformation (z-p)/(z-q), takes the complex log,
- * and extracts the imaginary component (winding angle) as a scalar float.
- * Outputs grayscale for CosinePalette (scalarSource: 'prev').
- */
-const props = withDefaults(defineProps<{
-  /** Angle between the two poles in radians */
-  poleAngle?: number
-  /** Distance of poles from origin */
-  poleDistance?: number
-  /** Weight of the imaginary (winding) component */
-  imaginaryWeight?: number
-  /** Weight of the radial (exp) component */
-  radialWeight?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), {
-  poleAngle: Math.PI / 3,
-  poleDistance: 0.4,
-  imaginaryWeight: 0.6,
-  radialWeight: 0.4,
-  speed: 0.05,
-  order: 0,
-})
+  import { complexDiv, complexLog } from '../../shaders/common/complex'
 
-const poleAngleNode = uniform(props.poleAngle)
-const poleDistNode = uniform(props.poleDistance)
-const imagWeightNode = uniform(props.imaginaryWeight)
-const radWeightNode = uniform(props.radialWeight)
-const speedNode = uniform(props.speed)
-watch(() => props.poleAngle, v => { poleAngleNode.value = v })
-watch(() => props.poleDistance, v => { poleDistNode.value = v })
-watch(() => props.imaginaryWeight, v => { imagWeightNode.value = v })
-watch(() => props.radialWeight, v => { radWeightNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  /**
+   * Complex number plane visualisation — the imaginary2 pattern.
+   * Places two poles p, q derived from poleAngle/poleDistance,
+   * computes the Möbius transformation (z-p)/(z-q), takes the complex log,
+   * and extracts the imaginary component (winding angle) as a scalar float.
+   * Outputs grayscale for CosinePalette (scalarSource: 'prev').
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Angle between the two poles in radians */
+      poleAngle?: number
+      /** Distance of poles from origin */
+      poleDistance?: number
+      /** Weight of the imaginary (winding) component */
+      imaginaryWeight?: number
+      /** Weight of the radial (exp) component */
+      radialWeight?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      poleAngle: Math.PI / 3,
+      poleDistance: 0.4,
+      imaginaryWeight: 0.6,
+      radialWeight: 0.4,
+      speed: 0.05,
+      order: 0,
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const poleAngleNode = uniform(props.poleAngle)
+  const poleDistNode = uniform(props.poleDistance)
+  const imagWeightNode = uniform(props.imaginaryWeight)
+  const radWeightNode = uniform(props.radialWeight)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.poleAngle,
+    (v) => {
+      poleAngleNode.value = v
+    }
+  )
+  watch(
+    () => props.poleDistance,
+    (v) => {
+      poleDistNode.value = v
+    }
+  )
+  watch(
+    () => props.imaginaryWeight,
+    (v) => {
+      imagWeightNode.value = v
+    }
+  )
+  watch(
+    () => props.radialWeight,
+    (v) => {
+      radWeightNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uvCurrent = pipeline.uvNode.value
     const t = time.mul(speedNode)
 
@@ -55,7 +86,7 @@ useShaderStage(
     // Pole position (complex number)
     const angle = poleAngleNode.add(t)
     const p = vec2(cos(angle).mul(poleDistNode), sin(angle).mul(poleDistNode))
-    const q = vec2(p.x, p.y.negate())   // conjugate
+    const q = vec2(p.x, p.y.negate()) // conjugate
 
     // Möbius: (z - p) / (z - q)
     const w = complexDiv(z.sub(p), z.sub(q))
@@ -65,13 +96,12 @@ useShaderStage(
 
     // Combine imaginary (winding angle) and radial (exp magnitude) components
     const imagPart = logW.y.mul(imagWeightNode)
-    const radPart = z.x.exp().div(z.y.abs().add(float(0.001))).mul(radWeightNode)
+    const radPart = z.x
+      .exp()
+      .div(z.y.abs().add(float(0.001)))
+      .mul(radWeightNode)
     const scalar = imagPart.add(radPart).mul(0.5).add(0.5)
 
     return vec4(scalar, scalar, scalar, float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,40 +1,58 @@
+<!-- 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, float } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Rotation offset in degrees */
-  rotation?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', rotation: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      /** Rotation offset in degrees */
+      rotation?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', rotation: 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 colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const rotationNode = uniform(props.rotation * 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.rotation, v => { rotationNode.value = v * Math.PI / 180 })
+  const colorANode = toVec3Node(props.colorA)
+  const colorBNode = toVec3Node(props.colorB)
+  const rotationNode = uniform((props.rotation * 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.rotation,
+    (v) => {
+      rotationNode.value = (v * Math.PI) / 180
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const centered = uv.sub(0.5)
     const angle = centered.y.atan(centered.x).add(rotationNode)
     const t = angle.div(Math.PI * 2).fract()
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>