kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,140 +1,144 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, DoubleSide } from 'three'
-import { mix, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
+  // @ts-nocheck
+  import { Color, DoubleSide } from 'three'
+  import { mix, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-const props = withDefaults(
-  defineProps<{
-    scale?: number
-    speed?: number
-    octaves?: number
-    baseColor?: string
-    peakColor?: string
-    type?: 'simplex' | 'fbm'
-    transparent?: boolean
-    /** Mouse X position (0-1) for interaction */
-    mouseX?: number
-    /** Mouse Y position (0-1) for interaction */
-    mouseY?: number
-    /** Enable mouse interaction */
-    mouseInteraction?: boolean
-    /** Mouse interaction strength */
-    mouseStrength?: number
-  }>(),
-  {
-    scale: 3,
-    speed: 0.5,
-    octaves: 4,
-    baseColor: '#1e1b4b',
-    peakColor: '#c084fc',
-    type: 'simplex',
-    transparent: false,
-    mouseX: 0.5,
-    mouseY: 0.5,
-    mouseInteraction: false,
-    mouseStrength: 0.5,
-  }
-)
+  import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
 
-// Create reactive uniforms
-const scaleUniform = uniform(props.scale)
-const speedUniform = uniform(props.speed)
-const mouseXUniform = uniform(props.mouseX)
-const mouseYUniform = uniform(props.mouseY)
-const mouseStrengthUniform = uniform(props.mouseStrength)
-const baseColorUniform = uniform(new Color(props.baseColor))
-const peakColorUniform = uniform(new Color(props.peakColor))
+  const props = withDefaults(
+    defineProps<{
+      scale?: number
+      speed?: number
+      octaves?: number
+      baseColor?: string
+      peakColor?: string
+      type?: 'simplex' | 'fbm'
+      transparent?: boolean
+      /** Mouse X position (0-1) for interaction */
+      mouseX?: number
+      /** Mouse Y position (0-1) for interaction */
+      mouseY?: number
+      /** Enable mouse interaction */
+      mouseInteraction?: boolean
+      /** Mouse interaction strength */
+      mouseStrength?: number
+    }>(),
+    {
+      scale: 3,
+      speed: 0.5,
+      octaves: 4,
+      baseColor: '#1e1b4b',
+      peakColor: '#c084fc',
+      type: 'simplex',
+      transparent: false,
+      mouseX: 0.5,
+      mouseY: 0.5,
+      mouseInteraction: false,
+      mouseStrength: 0.5,
+    }
+  )
 
-// Watch prop changes
-watch(
-  () => props.scale,
-  (val) => {
-    scaleUniform.value = val
-  }
-)
-watch(
-  () => props.speed,
-  (val) => {
-    speedUniform.value = val
-  }
-)
-watch(
-  () => props.mouseX,
-  (val) => {
-    mouseXUniform.value = val
-  }
-)
-watch(
-  () => props.mouseY,
-  (val) => {
-    mouseYUniform.value = val
-  }
-)
-watch(
-  () => props.mouseStrength,
-  (val) => {
-    mouseStrengthUniform.value = val
-  }
-)
-watch(
-  () => props.baseColor,
-  (val) => {
-    baseColorUniform.value = new Color(val)
-  }
-)
-watch(
-  () => props.peakColor,
-  (val) => {
-    peakColorUniform.value = new Color(val)
-  }
-)
+  // Create reactive uniforms
+  const scaleUniform = uniform(props.scale)
+  const speedUniform = uniform(props.speed)
+  const mouseXUniform = uniform(props.mouseX)
+  const mouseYUniform = uniform(props.mouseY)
+  const mouseStrengthUniform = uniform(props.mouseStrength)
+  const baseColorUniform = uniform(new Color(props.baseColor))
+  const peakColorUniform = uniform(new Color(props.peakColor))
 
-const material = computed(() => {
-  const mat = new MeshBasicNodeMaterial()
+  // Watch prop changes
+  watch(
+    () => props.scale,
+    (val) => {
+      scaleUniform.value = val
+    }
+  )
+  watch(
+    () => props.speed,
+    (val) => {
+      speedUniform.value = val
+    }
+  )
+  watch(
+    () => props.mouseX,
+    (val) => {
+      mouseXUniform.value = val
+    }
+  )
+  watch(
+    () => props.mouseY,
+    (val) => {
+      mouseYUniform.value = val
+    }
+  )
+  watch(
+    () => props.mouseStrength,
+    (val) => {
+      mouseStrengthUniform.value = val
+    }
+  )
+  watch(
+    () => props.baseColor,
+    (val) => {
+      baseColorUniform.value = new Color(val)
+    }
+  )
+  watch(
+    () => props.peakColor,
+    (val) => {
+      peakColorUniform.value = new Color(val)
+    }
+  )
 
-  // Animated UV with reactive uniforms
-  let animatedUV = uv().mul(scaleUniform).add(tslTime.mul(speedUniform))
+  const material = computed(() => {
+    const mat = new MeshBasicNodeMaterial()
 
-  // Add mouse interaction
-  if (props.mouseInteraction) {
-    const mouseOffset = vec3(
-      mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
-      mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
-      0
-    )
-    animatedUV = animatedUV.add(mouseOffset.xy)
-  }
+    // Animated UV with reactive uniforms
+    let animatedUV = uv().mul(scaleUniform).add(tslTime.mul(speedUniform))
 
-  // Generate noise based on type
-  let noiseValue
-  if (props.type === 'fbm') {
-    noiseValue = fbm(vec3(animatedUV.x, animatedUV.y, tslTime.mul(speedUniform.mul(0.1))), {
-      octaves: props.octaves,
-      lacunarity: 2.0,
-      gain: 0.5,
-      amplitude: 0.5,
-      frequency: 1.0,
-    })
-  } else {
-    noiseValue = simplexNoise2D(animatedUV)
-  }
+    // Add mouse interaction
+    if (props.mouseInteraction) {
+      const mouseOffset = vec3(
+        mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
+        mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
+        0
+      )
+      animatedUV = animatedUV.add(mouseOffset.xy)
+    }
 
-  // Remap noise from [-1, 1] to [0, 1]
-  const normalizedNoise = noiseValue.mul(0.5).add(0.5)
+    // Generate noise based on type
+    let noiseValue
+    if (props.type === 'fbm') {
+      noiseValue = fbm(vec3(animatedUV.x, animatedUV.y, tslTime.mul(speedUniform.mul(0.1))), {
+        octaves: props.octaves,
+        lacunarity: 2.0,
+        gain: 0.5,
+        amplitude: 0.5,
+        frequency: 1.0,
+      })
+    } else {
+      noiseValue = simplexNoise2D(animatedUV)
+    }
 
-  // Mix colors based on noise using reactive uniforms
-  const colorNode = mix(vec3(baseColorUniform), vec3(peakColorUniform), normalizedNoise)
+    // Remap noise from [-1, 1] to [0, 1]
+    const normalizedNoise = noiseValue.mul(0.5).add(0.5)
 
-  mat.colorNode = colorNode as any
-  mat.transparent = props.transparent
-  mat.side = DoubleSide
+    // Mix colors based on noise using reactive uniforms
+    const colorNode = mix(vec3(baseColorUniform), vec3(peakColorUniform), normalizedNoise)
 
-  return mat
-})
+    mat.colorNode = colorNode as any
+    mat.transparent = props.transparent
+    mat.side = DoubleSide
 
-defineExpose({ material })
+    return mat
+  })
+
+  defineExpose({ material })
 </script>
 
 <template>

package/layers/shader/app/components/Mesh/Plane.vue

@@ -1,22 +1,24 @@
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    width?: number
-    height?: number
-    widthSegments?: number
-    heightSegments?: number
-    position?: [number, number, number]
-    rotation?: [number, number, number]
-  }>(),
-  {
-    width: 2,
-    height: 2,
-    widthSegments: 1,
-    heightSegments: 1,
-    position: () => [0, 0, 0],
-    rotation: () => [0, 0, 0],
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      width?: number
+      height?: number
+      widthSegments?: number
+      heightSegments?: number
+      position?: [number, number, number]
+      rotation?: [number, number, number]
+    }>(),
+    {
+      width: 2,
+      height: 2,
+      widthSegments: 1,
+      heightSegments: 1,
+      position: () => [0, 0, 0],
+      rotation: () => [0, 0, 0],
+    }
+  )
 </script>
 
 <template>

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

@@ -1,49 +1,51 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { Color } from 'three'
-import { uniform, vec3 } from 'three/tsl'
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    color?: string
-    order?: number
-    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-    opacity?: number
-  }>(),
-  {
-    id: 'color',
-    color: '#ffffff',
-    order: 0,
-    blend: 'normal',
-    opacity: 1.0,
-  }
-)
-
-const graph = useShaderGraphContext()
-
-// Create uniform once
-const colorValue = new Color(props.color)
-const colorNode = uniform(colorValue)
-
-// Build TSL node once (references uniform by pointer)
-const node = vec3(colorNode)
-
-// Register in graph
-graph.register(props.id, node, props.order, props.blend, props.opacity)
-
-// Watch props to update uniform value (no recompilation)
-watch(
-  () => props.color,
-  (hex) => {
-    colorValue.set(hex)
-    colorNode.value = colorValue
-  }
-)
-
-onUnmounted(() => {
-  graph.unregister(props.id)
-})
+  // @ts-nocheck - TSL types
+  import { Color } from 'three'
+  import { uniform, vec3 } from 'three/tsl'
+
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      color?: string
+      order?: number
+      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+      opacity?: number
+    }>(),
+    {
+      id: 'color',
+      color: '#ffffff',
+      order: 0,
+      blend: 'normal',
+      opacity: 1.0,
+    }
+  )
+
+  const graph = useShaderGraphContext()
+
+  // Create uniform once
+  const colorValue = new Color(props.color)
+  const colorNode = uniform(colorValue)
+
+  // Build TSL node once (references uniform by pointer)
+  const node = vec3(colorNode)
+
+  // Register in graph
+  graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+  // Watch props to update uniform value (no recompilation)
+  watch(
+    () => props.color,
+    (hex) => {
+      colorValue.set(hex)
+      colorNode.value = colorValue
+    }
+  )
+
+  onUnmounted(() => {
+    graph.unregister(props.id)
+  })
 </script>
 
 <template>

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

@@ -1,51 +1,51 @@
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import {
-  cameraPosition,
-  normalView,
-  positionWorld,
-  pow,
-  sub,
-  uniform,
-  vec3,
-} from 'three/tsl'
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    power?: number
-    color?: string
-    order?: number
-    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-    opacity?: number
-  }>(),
-  {
-    id: 'fresnel',
-    power: 2.0,
-    color: '#ffffff',
-    order: 0,
-    blend: 'add',
-    opacity: 1.0,
-  }
-)
-
-const graph = useShaderGraphContext()
-
-// Create uniforms once
-const uPower = uniform(props.power)
-
-// Build fresnel node
-const viewDirection = positionWorld.sub(cameraPosition).normalize()
-const fresnelFactor = pow(sub(1.0, normalView.dot(viewDirection.negate()).abs()), uPower)
-const node = vec3(fresnelFactor, fresnelFactor, fresnelFactor)
-
-graph.register(props.id, node, props.order, props.blend, props.opacity)
-
-watch(() => props.power, (v) => { uPower.value = v })
-
-onUnmounted(() => {
-  graph.unregister(props.id)
-})
+  // @ts-nocheck - TSL types
+  import { cameraPosition, normalView, positionWorld, pow, sub, uniform, vec3 } from 'three/tsl'
+
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      power?: number
+      color?: string
+      order?: number
+      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+      opacity?: number
+    }>(),
+    {
+      id: 'fresnel',
+      power: 2.0,
+      color: '#ffffff',
+      order: 0,
+      blend: 'add',
+      opacity: 1.0,
+    }
+  )
+
+  const graph = useShaderGraphContext()
+
+  // Create uniforms once
+  const uPower = uniform(props.power)
+
+  // Build fresnel node
+  const viewDirection = positionWorld.sub(cameraPosition).normalize()
+  const fresnelFactor = pow(sub(1.0, normalView.dot(viewDirection.negate()).abs()), uPower)
+  const node = vec3(fresnelFactor, fresnelFactor, fresnelFactor)
+
+  graph.register(props.id, node, props.order, props.blend, props.opacity)
+
+  watch(
+    () => props.power,
+    (v) => {
+      uPower.value = v
+    }
+  )
+
+  onUnmounted(() => {
+    graph.unregister(props.id)
+  })
 </script>
 
 <template>