kmcom-nuxt-layers 2.2.12 → 2.2.13

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

@@ -20,6 +20,7 @@
 
   import { simplexNoise2D } from '../../shaders/common/noise'
   import type { TSLNode } from '../../shaders/types'
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     speed = 1.0,
@@ -53,39 +54,14 @@
   const color2Uniform: TSLNode = uniform(new Color(color2))
   const color3Uniform: TSLNode = uniform(new Color(color3))
 
-  // Watch prop changes
-  watch(
-    () => speed,
-    (val) => (speedUniform.value = val)
-  )
-  watch(
-    () => intensity,
-    (val) => (intensityUniform.value = val)
-  )
-  watch(
-    () => mouseX,
-    (val) => (mouseXUniform.value = val)
-  )
-  watch(
-    () => mouseY,
-    (val) => (mouseYUniform.value = val)
-  )
-  watch(
-    () => mouseStrength,
-    (val) => (mouseStrengthUniform.value = val)
-  )
-  watch(
-    () => color1,
-    (val) => (color1Uniform.value = new Color(val))
-  )
-  watch(
-    () => color2,
-    (val) => (color2Uniform.value = new Color(val))
-  )
-  watch(
-    () => color3,
-    (val) => (color3Uniform.value = new Color(val))
-  )
+  watchUniformProp(() => speed, speedUniform)
+  watchUniformProp(() => intensity, intensityUniform)
+  watchUniformProp(() => mouseX, mouseXUniform)
+  watchUniformProp(() => mouseY, mouseYUniform)
+  watchUniformProp(() => mouseStrength, mouseStrengthUniform)
+  watchUniformProp(() => color1, color1Uniform, (val) => new Color(val))
+  watchUniformProp(() => color2, color2Uniform, (val) => new Color(val))
+  watchUniformProp(() => color3, color3Uniform, (val) => new Color(val))
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

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

@@ -4,6 +4,7 @@
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   import type { TSLNode } from '../../types'
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     colors = ['#4f46e5', '#7c3aed', '#ec4899'],
@@ -49,37 +50,11 @@
     uniform(new Color(colors[4] || '#ec4899')),
   ]
 
-  // Watch prop changes and update uniforms
-  watch(
-    () => angle,
-    (val) => {
-      angleUniform.value = val
-    }
-  )
-  watch(
-    () => speed,
-    (val) => {
-      speedUniform.value = val
-    }
-  )
-  watch(
-    () => mouseX,
-    (val) => {
-      mouseXUniform.value = val
-    }
-  )
-  watch(
-    () => mouseY,
-    (val) => {
-      mouseYUniform.value = val
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (val) => {
-      mouseStrengthUniform.value = val
-    }
-  )
+  watchUniformProp(() => angle, angleUniform)
+  watchUniformProp(() => speed, speedUniform)
+  watchUniformProp(() => mouseX, mouseXUniform)
+  watchUniformProp(() => mouseY, mouseYUniform)
+  watchUniformProp(() => mouseStrength, mouseStrengthUniform)
 
   watch(
     () => colors,
@@ -93,14 +68,10 @@
     { deep: true }
   )
 
-  const material = computed(() => {
-    const mat = new MeshBasicNodeMaterial()
-    const colorCount = colors.length
-
-    // Get UV coordinates
+  // fallow-ignore-next-line complexity
+  function resolveGradientT() {
     let t: TSLNode = uv().y
 
-    // Apply angle rotation for linear gradient (using uniform for reactivity)
     if (type === 'linear') {
       const rad = angleUniform.mul(Math.PI / 180)
       const cosVal = rad.cos()
@@ -108,10 +79,8 @@
       t = uv().x.mul(sinVal).add(uv().y.mul(cosVal))
     }
 
-    // Radial gradient uses distance from center
     if (type === 'radial') {
       let center = uv().sub(0.5)
-      // Add mouse interaction offset
       if (mouseInteraction) {
         const mouseOffset = vec3(
           mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
@@ -123,18 +92,20 @@
       t = center.length().mul(2)
     }
 
-    // Add mouse interaction for linear gradients
     if (type === 'linear' && mouseInteraction) {
       t = t.add(mouseXUniform.sub(0.5).mul(mouseStrengthUniform))
     }
 
-    // Add animation
     if (animated) {
       t = t.add(sin(tslTime.mul(speedUniform)).mul(0.2))
     }
 
-    // Build gradient from colors using uniforms
-    // Use type assertion since we know the array is initialized
+    return t
+  }
+
+  // fallow-ignore-next-line complexity
+  function buildGradientColorNode(t: TSLNode) {
+    const colorCount = colors.length
     const c0 = colorUniforms[0]
     const c1 = colorUniforms[1]
     const c2 = colorUniforms[2]
@@ -144,9 +115,10 @@
     let colorNode: TSLNode = vec3(c0)
 
     if (colorCount === 2) {
-      colorNode = mix(vec3(c0), vec3(c1), t)
-    } else if (colorCount >= 3) {
-      // Multi-stop gradient using pre-extracted uniforms
+      return mix(vec3(c0), vec3(c1), t)
+    }
+
+    if (colorCount >= 3) {
       const uniforms = [c0, c1, c2, c3, c4]
       const segments = colorCount - 1
 
@@ -167,6 +139,13 @@
       }
     }
 
+    return colorNode
+  }
+
+  const material = computed(() => {
+    const mat = new MeshBasicNodeMaterial()
+
+    const colorNode = buildGradientColorNode(resolveGradientT())
     mat.colorNode = colorNode
     mat.transparent = transparent
     mat.side = DoubleSide

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

@@ -17,6 +17,7 @@
 
   import type { TSLNode } from '../../types'
   import { simplexNoise2D } from '../../utils/tsl/noise'
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     src,
@@ -76,61 +77,15 @@
   const rgbShiftUniform = uniform(rgbShift)
   const vignetteIntensityUniform = uniform(vignetteIntensity)
 
-  // Watch all prop changes for reactivity
-  watch(
-    () => mouseX,
-    (val) => {
-      mouseXUniform.value = val
-    }
-  )
-  watch(
-    () => mouseY,
-    (val) => {
-      mouseYUniform.value = val
-    }
-  )
-  watch(
-    () => distortion,
-    (val) => {
-      distortionUniform.value = val
-    }
-  )
-  watch(
-    () => distortionSpeed,
-    (val) => {
-      distortionSpeedUniform.value = val
-    }
-  )
-  watch(
-    () => rippleStrength,
-    (val) => {
-      rippleStrengthUniform.value = val
-    }
-  )
-  watch(
-    () => zoom,
-    (val) => {
-      zoomUniform.value = val
-    }
-  )
-  watch(
-    () => grayscale,
-    (val) => {
-      grayscaleUniform.value = val
-    }
-  )
-  watch(
-    () => rgbShift,
-    (val) => {
-      rgbShiftUniform.value = val
-    }
-  )
-  watch(
-    () => vignetteIntensity,
-    (val) => {
-      vignetteIntensityUniform.value = val
-    }
-  )
+  watchUniformProp(() => mouseX, mouseXUniform)
+  watchUniformProp(() => mouseY, mouseYUniform)
+  watchUniformProp(() => distortion, distortionUniform)
+  watchUniformProp(() => distortionSpeed, distortionSpeedUniform)
+  watchUniformProp(() => rippleStrength, rippleStrengthUniform)
+  watchUniformProp(() => zoom, zoomUniform)
+  watchUniformProp(() => grayscale, grayscaleUniform)
+  watchUniformProp(() => rgbShift, rgbShiftUniform)
+  watchUniformProp(() => vignetteIntensity, vignetteIntensityUniform)
 
   // Load texture
   watch(

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

@@ -42,10 +42,12 @@
     double: DoubleSide,
   }
 
-  const material = computed(() => {
-    const mat = type === 'standard' ? new MeshStandardNodeMaterial() : new MeshBasicNodeMaterial()
+  function createMaterialInstance() {
+    return type === 'standard' ? new MeshStandardNodeMaterial() : new MeshBasicNodeMaterial()
+  }
 
-    // Apply node properties
+  // fallow-ignore-next-line complexity
+  function applyNodeProperties(mat: MeshBasicNodeMaterial | MeshStandardNodeMaterial) {
     if (colorNode) mat.colorNode = colorNode
     if (opacityNode) {
       mat.opacityNode = opacityNode
@@ -53,22 +55,33 @@
     }
     if (normalNode) mat.normalNode = normalNode
     if (positionNode) mat.positionNode = positionNode
+  }
 
-    // Standard material specific
+  // fallow-ignore-next-line complexity
+  function applyStandardProperties(mat: MeshBasicNodeMaterial | MeshStandardNodeMaterial) {
     if (mat instanceof MeshStandardNodeMaterial) {
       if (emissiveNode) mat.emissiveNode = emissiveNode
       if (metalnessNode) mat.metalnessNode = metalnessNode
       if (roughnessNode) mat.roughnessNode = roughnessNode
       mat.flatShading = flatShading
     }
+  }
 
-    // Standard properties
+  function applySharedProperties(mat: MeshBasicNodeMaterial | MeshStandardNodeMaterial) {
     mat.transparent = transparent || !!opacityNode
     mat.side = sideMap[side]
     mat.wireframe = wireframe
     mat.depthTest = depthTest
     mat.depthWrite = depthWrite
 
+    return mat
+  }
+
+  const material = computed(() => {
+    const mat = createMaterialInstance()
+    applyNodeProperties(mat)
+    applyStandardProperties(mat)
+    applySharedProperties(mat)
     return mat
   })
 

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

@@ -5,6 +5,7 @@
 
   import type { TSLNode } from '../../shaders/types'
   import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
+  import { watchUniformProp } from '#layers/shader/app/composables/useUniformWatchers'
 
   const {
     scale = 3,
@@ -45,49 +46,14 @@
   const baseColorUniform: TSLNode = uniform(new Color(baseColor))
   const peakColorUniform: TSLNode = uniform(new Color(peakColor))
 
-  // Watch prop changes
-  watch(
-    () => scale,
-    (val) => {
-      scaleUniform.value = val
-    }
-  )
-  watch(
-    () => speed,
-    (val) => {
-      speedUniform.value = val
-    }
-  )
-  watch(
-    () => mouseX,
-    (val) => {
-      mouseXUniform.value = val
-    }
-  )
-  watch(
-    () => mouseY,
-    (val) => {
-      mouseYUniform.value = val
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (val) => {
-      mouseStrengthUniform.value = val
-    }
-  )
-  watch(
-    () => baseColor,
-    (val) => {
-      baseColorUniform.value = new Color(val)
-    }
-  )
-  watch(
-    () => peakColor,
-    (val) => {
-      peakColorUniform.value = new Color(val)
-    }
-  )
+  // fallow-ignore-next-line code-duplication
+  watchUniformProp(() => scale, scaleUniform)
+  watchUniformProp(() => speed, speedUniform)
+  watchUniformProp(() => mouseX, mouseXUniform)
+  watchUniformProp(() => mouseY, mouseYUniform)
+  watchUniformProp(() => mouseStrength, mouseStrengthUniform)
+  watchUniformProp(() => baseColor, baseColorUniform, (val) => new Color(val))
+  watchUniformProp(() => peakColor, peakColorUniform, (val) => new Color(val))
 
   const material = computed(() => {
     const mat = new MeshBasicNodeMaterial()

package/layers/shader/app/components/Preset/ThemeBubble.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemeBubbleColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Preset/ThemeFlow.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemeFlowColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Preset/ThemeGradient.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemeGradientColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Preset/ThemeLavaLamp.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemeLavaLampColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Preset/ThemePlasma.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemePlasmaColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Preset/ThemeWave.client.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import { createThemeWaveColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
-  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
   import type { TSLNode } from '#layers/shader/app/types/tsl'
 
+  import type { ThemePresetProps } from '../../composables/useThemePreset'
+
   const {
     speed = 1.0,
     intensity = 1.0,

package/layers/shader/app/components/Shader/Background.client.vue

@@ -14,7 +14,8 @@
     SRGBColorSpace,
     type ToneMapping,
   } from 'three'
-  import { MeshBasicNodeMaterial, WebGPURenderer } from 'three/webgpu'
+  import * as ThreeWebGPU from 'three/webgpu'
+  import { MeshBasicNodeMaterial } from 'three/webgpu'
 
   const {
     material = null,
@@ -42,13 +43,13 @@
   }>()
 
   const emit = defineEmits<{
-    ready: [renderer: WebGPURenderer]
+    ready: [renderer: ThreeWebGPU.WebGPURenderer]
   }>()
 
   const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
   const { width, height } = useWindowSize()
 
-  let renderer: WebGPURenderer | undefined
+  let renderer: ThreeWebGPU.WebGPURenderer | undefined
   let scene: Scene
   let camera: PerspectiveCamera
   let planeMesh: Mesh
@@ -86,6 +87,38 @@
     }
   }
 
+  function createRenderer(canvas: HTMLCanvasElement) {
+    const nextRenderer = new ThreeWebGPU.WebGPURenderer({ canvas, antialias: antialias })
+    nextRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+    nextRenderer.setSize(width.value, height.value)
+    nextRenderer.setClearColor(new Color(clearColor))
+    nextRenderer.toneMapping = toneMappingMap[toneMapping] ?? ACESFilmicToneMapping
+    nextRenderer.outputColorSpace = SRGBColorSpace
+    return nextRenderer
+  }
+
+  function createSceneAndCamera() {
+    const nextScene = new Scene()
+    const nextCamera = new PerspectiveCamera(75, width.value / (height.value || 1), 0.1, 100)
+    nextCamera.position.set(0, 0, 1)
+    return { nextScene, nextCamera }
+  }
+
+  function createPlaneMesh() {
+    const { width: pw, height: ph } = getPlaneSize(width.value, height.value)
+    const geometry = new PlaneGeometry(pw, ph)
+    return new Mesh(geometry, material ?? new MeshBasicMaterial({ color: 0x000000 }))
+  }
+
+  // fallow-ignore-next-line complexity
+  async function compileMaterialIfReady() {
+    if (!renderer || !scene || !camera || !material?.colorNode) return
+    await renderer.compileAsync(scene, camera)
+    if (disposed && renderer) {
+      renderer.dispose()
+    }
+  }
+
   function animate() {
     // Bail if the component unmounted — guards against a frame scheduled just
     // before teardown rendering on a disposed renderer.
@@ -102,12 +135,7 @@
 
     try {
       // WebGPURenderer falls back to WebGL2 if WebGPU is unavailable
-      renderer = new WebGPURenderer({ canvas, antialias: antialias })
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-      renderer.setSize(width.value, height.value)
-      renderer.setClearColor(new Color(clearColor))
-      renderer.toneMapping = toneMappingMap[toneMapping] ?? ACESFilmicToneMapping
-      renderer.outputColorSpace = SRGBColorSpace
+      renderer = createRenderer(canvas)
 
       // Required async init for WebGPU context setup
       await renderer.init()
@@ -121,13 +149,10 @@
         return
       }
 
-      scene = new Scene()
-      camera = new PerspectiveCamera(75, width.value / (height.value || 1), 0.1, 100)
-      camera.position.set(0, 0, 1)
-
-      const { width: pw, height: ph } = getPlaneSize(width.value, height.value)
-      const geometry = new PlaneGeometry(pw, ph)
-      planeMesh = new Mesh(geometry, material ?? new MeshBasicMaterial({ color: 0x000000 }))
+      const { nextScene, nextCamera } = createSceneAndCamera()
+      scene = nextScene
+      camera = nextCamera
+      planeMesh = createPlaneMesh()
       scene.add(planeMesh)
 
       // Pre-compile the shader pipeline only when the material's colorNode is already
@@ -136,18 +161,13 @@
       // won't reliably trigger a GPU pipeline rebuild in all drivers.
       // When colorNode is absent we skip pre-compilation and let the first render()
       // call compile lazily — the browser may stutter once, but the output is correct.
-      if (material?.colorNode) {
-        await renderer.compileAsync(scene, camera)
-        if (disposed) {
-          renderer.dispose()
-          return
-        }
-      }
+      await compileMaterialIfReady()
+      if (disposed) return
 
       initialized = true
       emit('ready', renderer)
     } catch (e) {
-      console.error('[ShaderBackground] init() failed:', e)
+      void e
     }
 
     // Always start the animation loop even if pre-compilation failed — Three.js

package/layers/shader/app/composables/useAmbientMaterials.ts

@@ -35,7 +35,11 @@ import type { ColorUniform, FloatUniform, TSLNode, Vec3Uniform } from '../shader
 // ============================================
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function buildFlowWarpedUV(uvCoord: any, t: any, mouseOffset: any): {
+function buildFlowWarpedUV(
+  uvCoord: any,
+  t: any,
+  mouseOffset: any
+): {
   warpedUV: TSLNode
   n1: TSLNode
   n2: TSLNode

package/layers/shader/app/composables/useShader.ts

@@ -11,6 +11,42 @@ export type UseShaderOptions = {
   autoDispose?: boolean
 }
 
+function assignIfDefined<T extends object, K extends keyof T>(
+  target: T,
+  key: K,
+  value: T[K] | undefined
+) {
+  if (value !== undefined) {
+    target[key] = value
+  }
+}
+
+function applyStandardMaterialConfig(
+  material: MeshStandardNodeMaterial,
+  config: NodeMaterialConfig
+) {
+  assignIfDefined(material, 'emissiveNode', config.emissiveNode)
+  assignIfDefined(material, 'metalnessNode', config.metalnessNode)
+  assignIfDefined(material, 'roughnessNode', config.roughnessNode)
+  assignIfDefined(material, 'flatShading', config.flatShading)
+}
+
+function applyCommonMaterialConfig(
+  material: MeshBasicNodeMaterial | MeshStandardNodeMaterial,
+  config: NodeMaterialConfig
+) {
+  assignIfDefined(material, 'colorNode', config.colorNode)
+  assignIfDefined(material, 'opacityNode', config.opacityNode)
+  assignIfDefined(material, 'normalNode', config.normalNode)
+  assignIfDefined(material, 'positionNode', config.positionNode)
+  assignIfDefined(material, 'transparent', config.transparent)
+  assignIfDefined(material, 'side', config.side)
+  assignIfDefined(material, 'blending', config.blending)
+  assignIfDefined(material, 'depthTest', config.depthTest)
+  assignIfDefined(material, 'depthWrite', config.depthWrite)
+  assignIfDefined(material, 'wireframe', config.wireframe)
+}
+
 /**
  * Main shader management composable
  */
@@ -39,30 +75,9 @@ export function useShader(options: UseShaderOptions = {}) {
     if (!material.value) return
 
     const mat = material.value
-
-    if (newConfig.colorNode !== undefined) mat.colorNode = newConfig.colorNode
-    if (newConfig.opacityNode !== undefined) mat.opacityNode = newConfig.opacityNode
-    if (newConfig.normalNode !== undefined) mat.normalNode = newConfig.normalNode
-
+    applyCommonMaterialConfig(mat, newConfig)
     if (mat instanceof MeshStandardNodeMaterial) {
-      if (newConfig.emissiveNode !== undefined) mat.emissiveNode = newConfig.emissiveNode
-      if (newConfig.metalnessNode !== undefined) mat.metalnessNode = newConfig.metalnessNode
-      if (newConfig.roughnessNode !== undefined) mat.roughnessNode = newConfig.roughnessNode
-    }
-
-    if (newConfig.positionNode !== undefined) mat.positionNode = newConfig.positionNode
-
-    // Standard material properties
-    if (newConfig.transparent !== undefined) mat.transparent = newConfig.transparent
-    if (newConfig.side !== undefined) mat.side = newConfig.side
-    if (newConfig.blending !== undefined) mat.blending = newConfig.blending
-    if (newConfig.depthTest !== undefined) mat.depthTest = newConfig.depthTest
-    if (newConfig.depthWrite !== undefined) mat.depthWrite = newConfig.depthWrite
-    if (newConfig.wireframe !== undefined) mat.wireframe = newConfig.wireframe
-
-    // flatShading only exists on MeshStandardNodeMaterial
-    if (mat instanceof MeshStandardNodeMaterial && newConfig.flatShading !== undefined) {
-      mat.flatShading = newConfig.flatShading
+      applyStandardMaterialConfig(mat, newConfig)
     }
   }