kmcom-nuxt-layers 2.2.6 → 2.2.8

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     color = '#4488ff',
     opacity = 0.8,
@@ -18,12 +20,7 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorNode = toVec3Node(color)
+  const colorNode = hexToVec3Uniform(color)
   const opacityNode = uniform(opacity)
   const freqNode = uniform(frequency)
   const speedNode = uniform(speed)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     color = '#ffffff',
@@ -28,12 +29,7 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorNode = toVec3Node(color)
+  const colorNode = hexToVec3Uniform(color)
   const opacityNode = uniform(opacity)
   const scaleNode = uniform(scale)
   const edge0Node = uniform(edge0)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, sin, time, uniform, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#8b5e3c',
@@ -26,13 +27,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const ringFreqNode = uniform(ringFrequency)
   const noiseScaleNode = uniform(noiseScale)
   const noiseStrNode = uniform(noiseStrength)

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

@@ -3,30 +3,24 @@
     createAmbientUniforms,
     createAuroraColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      speed?: number
-      intensity?: number
-      mouseInteraction?: boolean
-    }>(),
-    {
-      speed: 1.0,
-      intensity: 1.0,
-      mouseInteraction: true,
-    }
-  )
+  const {
+    speed = 1.0,
+    intensity = 1.0,
+    mouseInteraction = true,
+  } = defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+  }>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
   // Create uniforms once
-  const uniforms = createAmbientUniforms({
-    speed: props.speed,
-    intensity: props.intensity,
-    mouseInteraction: props.mouseInteraction,
-  })
+  const uniforms = createAmbientUniforms({ speed, intensity, mouseInteraction })
 
   // Build the TSL color node (references uniforms by pointer)
   const colorNode = createAuroraColorNode(uniforms)
@@ -48,19 +42,19 @@
 
   // Watch props to update uniforms (no recompilation)
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       uniforms.speed.value = v
     }
   )
   watch(
-    () => props.intensity,
+    () => intensity,
     (v) => {
       uniforms.intensity.value = v
     }
   )
   watch(
-    () => props.mouseInteraction,
+    () => mouseInteraction,
     (v) => {
       uniforms.mouseStrength.value = v ? 0.5 : 0
     }

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

@@ -3,6 +3,7 @@
     createAmbientUniforms,
     createFlowColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -15,7 +16,7 @@
   }>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
   const uniforms = createAmbientUniforms({

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

@@ -3,6 +3,7 @@
     createAmbientUniforms,
     createGradientMeshColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -15,7 +16,7 @@
   }>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
   const uniforms = createAmbientUniforms({

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

@@ -3,6 +3,7 @@
     createAmbientUniforms,
     createNebulaColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -15,7 +16,7 @@
   }>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
   const uniforms = createAmbientUniforms({

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

@@ -3,6 +3,7 @@
     createAmbientUniforms,
     createOceanColorNode,
   } from '#layers/shader/app/composables/useAmbientMaterials'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -15,7 +16,7 @@
   }>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
   const uniforms = createAmbientUniforms({

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeAuroraColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { createThemeAuroraColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -13,98 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemeAuroraColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeAuroraColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeBubbleColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  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'
 
   const {
     speed = 1.0,
@@ -13,99 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  // color3/color4 accepted for API consistency but Bubble only uses color1+color2
-  const colorNode = createThemeBubbleColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeBubbleColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeFlowColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  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'
 
   const {
     speed = 1.0,
@@ -13,98 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemeFlowColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeFlowColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>