kmcom-nuxt-layers 1.7.8 → 2.1.6

package/layers/shader/app/components/Node/Gradient.client.vue

@@ -1,85 +1,135 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { add, mul, time, uniform, uv } from 'three/tsl'
-import { cosinePalette } from '#layers/shader/app/shaders/common/palette'
+  // @ts-nocheck - TSL types
+  import { cosinePalette } from '#layers/shader/app/shaders/common/palette'
+  import { add, mul, time, uniform, uv } from 'three/tsl'
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    /** Cosine palette type or 'linear' for UV-based gradient */
-    type?: 'rainbow' | 'sunset' | 'ocean' | 'fire' | 'ice' | 'neon' | 'pastel' | 'custom'
-    speed?: number
-    /** Custom brightness for cosine palette [r,g,b] */
-    brightness?: [number, number, number]
-    /** Custom contrast for cosine palette [r,g,b] */
-    contrast?: [number, number, number]
-    /** Custom frequency for cosine palette [r,g,b] */
-    frequency?: [number, number, number]
-    /** Custom phase for cosine palette [r,g,b] */
-    phase?: [number, number, number]
-    order?: number
-    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-    opacity?: number
-  }>(),
-  {
-    id: 'gradient',
-    type: 'rainbow',
-    speed: 0.1,
-    brightness: () => [0.5, 0.5, 0.5],
-    contrast: () => [0.5, 0.5, 0.5],
-    frequency: () => [1.0, 1.0, 1.0],
-    phase: () => [0.0, 0.33, 0.67],
-    order: 0,
-    blend: 'normal',
-    opacity: 1.0,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      /** Cosine palette type or 'linear' for UV-based gradient */
+      type?: 'rainbow' | 'sunset' | 'ocean' | 'fire' | 'ice' | 'neon' | 'pastel' | 'custom'
+      speed?: number
+      /** Custom brightness for cosine palette [r,g,b] */
+      brightness?: [number, number, number]
+      /** Custom contrast for cosine palette [r,g,b] */
+      contrast?: [number, number, number]
+      /** Custom frequency for cosine palette [r,g,b] */
+      frequency?: [number, number, number]
+      /** Custom phase for cosine palette [r,g,b] */
+      phase?: [number, number, number]
+      order?: number
+      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+      opacity?: number
+    }>(),
+    {
+      id: 'gradient',
+      type: 'rainbow',
+      speed: 0.1,
+      brightness: () => [0.5, 0.5, 0.5],
+      contrast: () => [0.5, 0.5, 0.5],
+      frequency: () => [1.0, 1.0, 1.0],
+      phase: () => [0.0, 0.33, 0.67],
+      order: 0,
+      blend: 'normal',
+      opacity: 1.0,
+    }
+  )
 
-const graph = useShaderGraphContext()
+  const graph = useShaderGraphContext()
 
-const uSpeed = uniform(props.speed)
+  const uSpeed = uniform(props.speed)
 
-// Palette presets
-const palettePresets: Record<string, [[number, number, number], [number, number, number], [number, number, number], [number, number, number]]> = {
-  rainbow: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.0, 0.33, 0.67]],
-  sunset: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.7, 0.4], [0.0, 0.15, 0.2]],
-  ocean: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.3, 0.2, 0.2]],
-  fire: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.5, 0.0], [0.0, 0.1, 0.2]],
-  ice: [[0.5, 0.5, 0.5], [0.4, 0.4, 0.5], [0.0, 0.1, 0.2], [0.0, 0.0, 0.0]],
-  neon: [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [2.0, 1.0, 0.0], [0.5, 0.2, 0.25]],
-  pastel: [[0.8, 0.8, 0.8], [0.2, 0.2, 0.2], [1.0, 1.0, 1.0], [0.0, 0.33, 0.67]],
-}
+  // Palette presets
+  const palettePresets: Record<
+    string,
+    [
+      [number, number, number],
+      [number, number, number],
+      [number, number, number],
+      [number, number, number],
+    ]
+  > = {
+    rainbow: [
+      [0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5],
+      [1.0, 1.0, 1.0],
+      [0.0, 0.33, 0.67],
+    ],
+    sunset: [
+      [0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5],
+      [1.0, 0.7, 0.4],
+      [0.0, 0.15, 0.2],
+    ],
+    ocean: [
+      [0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5],
+      [1.0, 1.0, 1.0],
+      [0.3, 0.2, 0.2],
+    ],
+    fire: [
+      [0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5],
+      [1.0, 0.5, 0.0],
+      [0.0, 0.1, 0.2],
+    ],
+    ice: [
+      [0.5, 0.5, 0.5],
+      [0.4, 0.4, 0.5],
+      [0.0, 0.1, 0.2],
+      [0.0, 0.0, 0.0],
+    ],
+    neon: [
+      [0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5],
+      [2.0, 1.0, 0.0],
+      [0.5, 0.2, 0.25],
+    ],
+    pastel: [
+      [0.8, 0.8, 0.8],
+      [0.2, 0.2, 0.2],
+      [1.0, 1.0, 1.0],
+      [0.0, 0.33, 0.67],
+    ],
+  }
 
-function buildNode() {
-  const uvCoord = uv()
-  const t = add(uvCoord.x, mul(time, uSpeed))
+  function buildNode() {
+    const uvCoord = uv()
+    const t = add(uvCoord.x, mul(time, uSpeed))
 
-  const preset = palettePresets[props.type]
-  if (preset) {
-    return cosinePalette(t, preset[0], preset[1], preset[2], preset[3])
-  }
+    const preset = palettePresets[props.type]
+    if (preset) {
+      return cosinePalette(t, preset[0], preset[1], preset[2], preset[3])
+    }
 
-  // Custom
-  return cosinePalette(t, props.brightness, props.contrast, props.frequency, props.phase)
-}
+    // Custom
+    return cosinePalette(t, props.brightness, props.contrast, props.frequency, props.phase)
+  }
 
-let node = buildNode()
-graph.register(props.id, node, props.order, props.blend, props.opacity)
+  let node = buildNode()
+  graph.register(props.id, node, props.order, props.blend, props.opacity)
 
-watch(() => props.speed, (v) => { uSpeed.value = v })
+  watch(
+    () => props.speed,
+    (v) => {
+      uSpeed.value = v
+    }
+  )
 
-// Rebuild on type or custom param changes
-watch(
-  () => [props.type, props.brightness, props.contrast, props.frequency, props.phase] as const,
-  () => {
-    node = buildNode()
-    graph.update(props.id, node)
-  }
-)
+  // Rebuild on type or custom param changes
+  watch(
+    () => [props.type, props.brightness, props.contrast, props.frequency, props.phase] as const,
+    () => {
+      node = buildNode()
+      graph.update(props.id, node)
+    }
+  )
 
-onUnmounted(() => {
-  graph.unregister(props.id)
-})
+  onUnmounted(() => {
+    graph.unregister(props.id)
+  })
 </script>
 
 <template>

package/layers/shader/app/components/Node/Mix.client.vue

@@ -1,48 +1,50 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-/**
- * Mix node -- combines child nodes registered in a nested shader graph.
- * Children register into this component's own sub-graph, which is then
- * composed and registered as a single node in the parent graph.
- */
-import { vec3 } from 'three/tsl'
+  // @ts-nocheck - TSL types
+  /**
+   * Mix node -- combines child nodes registered in a nested shader graph.
+   * Children register into this component's own sub-graph, which is then
+   * composed and registered as a single node in the parent graph.
+   */
+  import { vec3 } from 'three/tsl'
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    order?: number
-    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-    opacity?: number
-  }>(),
-  {
-    id: 'mix',
-    order: 0,
-    blend: 'normal',
-    opacity: 1.0,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      order?: number
+      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+      opacity?: number
+    }>(),
+    {
+      id: 'mix',
+      order: 0,
+      blend: 'normal',
+      opacity: 1.0,
+    }
+  )
 
-const parentGraph = useShaderGraphContext()
+  const parentGraph = useShaderGraphContext()
 
-// Create a sub-graph for children
-const subGraph = useShaderGraph()
+  // Create a sub-graph for children
+  const subGraph = useShaderGraph()
 
-// Watch sub-graph and register its composite into parent
-watch(
-  subGraph.version,
-  () => {
-    const node = subGraph.finalNode.value || vec3(0, 0, 0)
-    if (parentGraph) {
-      // Re-register with updated composite node
-      parentGraph.register(props.id, node, props.order, props.blend, props.opacity)
-    }
-  },
-  { immediate: true }
-)
+  // Watch sub-graph and register its composite into parent
+  watch(
+    subGraph.version,
+    () => {
+      const node = subGraph.finalNode.value || vec3(0, 0, 0)
+      if (parentGraph) {
+        // Re-register with updated composite node
+        parentGraph.register(props.id, node, props.order, props.blend, props.opacity)
+      }
+    },
+    { immediate: true }
+  )
 
-onUnmounted(() => {
-  parentGraph.unregister(props.id)
-})
+  onUnmounted(() => {
+    parentGraph.unregister(props.id)
+  })
 </script>
 
 <template>

package/layers/shader/app/components/Node/Noise.client.vue

@@ -1,99 +1,107 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { add, mul, time, uniform, uv, vec2, vec3 } from 'three/tsl'
-import {
-  simplexNoise2D,
-  fbm2D,
-  ridgedFbm2d,
-  voronoi2D,
-  fbm3dSimplex,
-} from '#layers/shader/app/shaders/common/noise'
+  // @ts-nocheck - TSL types
+  import {
+    fbm2D,
+    fbm3dSimplex,
+    ridgedFbm2d,
+    simplexNoise2D,
+    voronoi2D,
+  } from '#layers/shader/app/shaders/common/noise'
+  import { add, mul, time, uniform, uv, vec2, vec3 } from 'three/tsl'
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    type?: 'simplex' | 'fbm' | 'voronoi' | 'ridged' | 'fbm3d'
-    scale?: number
-    speed?: number
-    octaves?: number
-    order?: number
-    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-    opacity?: number
-  }>(),
-  {
-    id: 'noise',
-    type: 'simplex',
-    scale: 3.0,
-    speed: 0.2,
-    octaves: 4,
-    order: 0,
-    blend: 'normal',
-    opacity: 1.0,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      type?: 'simplex' | 'fbm' | 'voronoi' | 'ridged' | 'fbm3d'
+      scale?: number
+      speed?: number
+      octaves?: number
+      order?: number
+      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+      opacity?: number
+    }>(),
+    {
+      id: 'noise',
+      type: 'simplex',
+      scale: 3.0,
+      speed: 0.2,
+      octaves: 4,
+      order: 0,
+      blend: 'normal',
+      opacity: 1.0,
+    }
+  )
 
-const graph = useShaderGraphContext()
+  const graph = useShaderGraphContext()
 
-// Create uniforms once
-const uScale = uniform(props.scale)
-const uSpeed = uniform(props.speed)
+  // Create uniforms once
+  const uScale = uniform(props.scale)
+  const uSpeed = uniform(props.speed)
 
-// Build TSL node
-function buildNode() {
-  const uvCoord = uv()
-  const t = mul(time, uSpeed)
-  const scaledUV = mul(uvCoord, uScale)
-  const animatedUV = add(scaledUV, vec2(t, mul(t, 0.3)))
+  // Build TSL node
+  function buildNode() {
+    const uvCoord = uv()
+    const t = mul(time, uSpeed)
+    const scaledUV = mul(uvCoord, uScale)
+    const animatedUV = add(scaledUV, vec2(t, mul(t, 0.3)))
 
-  let noiseValue
+    let noiseValue
 
-  switch (props.type) {
-    case 'fbm':
-      noiseValue = fbm2D(animatedUV, { octaves: props.octaves, frequency: 1.0 })
-        .mul(0.5)
-        .add(0.5)
-      break
-    case 'voronoi': {
-      const { distance } = voronoi2D(animatedUV, 1.0)
-      noiseValue = distance
-      break
+    switch (props.type) {
+      case 'fbm':
+        noiseValue = fbm2D(animatedUV, { octaves: props.octaves, frequency: 1.0 }).mul(0.5).add(0.5)
+        break
+      case 'voronoi': {
+        const { distance } = voronoi2D(animatedUV, 1.0)
+        noiseValue = distance
+        break
+      }
+      case 'ridged':
+        noiseValue = ridgedFbm2d(animatedUV, { octaves: props.octaves, frequency: 1.0 })
+        break
+      case 'fbm3d':
+        noiseValue = fbm3dSimplex(vec3(scaledUV, t), { octaves: props.octaves }).mul(0.5).add(0.5)
+        break
+      case 'simplex':
+      default:
+        noiseValue = simplexNoise2D(animatedUV).mul(0.5).add(0.5)
+        break
     }
-    case 'ridged':
-      noiseValue = ridgedFbm2d(animatedUV, { octaves: props.octaves, frequency: 1.0 })
-      break
-    case 'fbm3d':
-      noiseValue = fbm3dSimplex(vec3(scaledUV, t), { octaves: props.octaves })
-        .mul(0.5)
-        .add(0.5)
-      break
-    case 'simplex':
-    default:
-      noiseValue = simplexNoise2D(animatedUV).mul(0.5).add(0.5)
-      break
-  }
 
-  return vec3(noiseValue, noiseValue, noiseValue)
-}
+    return vec3(noiseValue, noiseValue, noiseValue)
+  }
 
-const node = buildNode()
-graph.register(props.id, node, props.order, props.blend, props.opacity)
+  const node = buildNode()
+  graph.register(props.id, node, props.order, props.blend, props.opacity)
 
-// Watch uniform-driven props (no recompilation)
-watch(() => props.scale, (v) => { uScale.value = v })
-watch(() => props.speed, (v) => { uSpeed.value = v })
+  // Watch uniform-driven props (no recompilation)
+  watch(
+    () => props.scale,
+    (v) => {
+      uScale.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      uSpeed.value = v
+    }
+  )
 
-// Watch topology-changing props (requires graph update)
-watch(
-  () => [props.type, props.octaves] as const,
-  () => {
-    const newNode = buildNode()
-    graph.update(props.id, newNode)
-  }
-)
+  // Watch topology-changing props (requires graph update)
+  watch(
+    () => [props.type, props.octaves] as const,
+    () => {
+      const newNode = buildNode()
+      graph.update(props.id, newNode)
+    }
+  )
 
-onUnmounted(() => {
-  graph.unregister(props.id)
-})
+  onUnmounted(() => {
+    graph.unregister(props.id)
+  })
 </script>
 
 <template>

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

@@ -1,14 +1,11 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { vec4 } from 'three/tsl'
-import { acesTonemap } from '../../shaders/common/tonemapping'
+  // @ts-nocheck
+  import { vec4 } from 'three/tsl'
 
-const { order = 0 } = defineProps<{ order?: number }>()
+  import { acesTonemap } from '../../shaders/common/tonemapping'
 
-useShaderStage(
-  (prev) => vec4(acesTonemap(prev.xyz), prev.w),
-  order,
-)
-</script>
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-<template><!-- --></template>
+  useShaderStage((prev) => vec4(acesTonemap(prev.xyz), prev.w), order)
+</script>

package/layers/shader/app/components/Pipeline/AddBlend.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 { blendAdd } 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 { blendAdd } 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(blendAdd(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(blendAdd(prev.xyz, colorNode, opacityNode), prev.w), 0, 1),
+    props.order
+  )
+</script>