kmcom-nuxt-layers 2.2.6 → 2.2.9

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, uniform, vec4 } from 'three/tsl'
 
   import { checker } from '../../shaders/common/shapes'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#ffffff',
@@ -19,13 +20,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 scaleNode = uniform(scale)
   watch(
     () => colorA,

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorA = '#000000',
     colorB = '#ffffff',
@@ -16,13 +18,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 radiusNode = uniform(radius)
   const softnessNode = uniform(softness)
   watch(

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorSky = '#5588cc',
@@ -28,13 +29,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorSkyNode = toVec3Node(colorSky)
-  const colorCloudNode = toVec3Node(colorCloud)
+  const colorSkyNode = hexToVec3Uniform(colorSky)
+  const colorCloudNode = hexToVec3Uniform(colorCloud)
   const scaleNode = uniform(scale)
   const coverageNode = uniform(coverage)
   const softnessNode = uniform(softness)

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendColorBurn } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendColorBurn,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendColorBurn(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendColorDodge } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendColorDodge,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendColorDodge(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /**
    * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
@@ -26,14 +27,9 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const shadowNode = toVec3Node(shadowColor)
-  const midNode = toVec3Node(midtoneColor)
-  const highlightNode = toVec3Node(highlightColor)
+  const shadowNode = hexToVec3Uniform(shadowColor)
+  const midNode = hexToVec3Uniform(midtoneColor)
+  const highlightNode = hexToVec3Uniform(highlightColor)
   const shadowPtNode = uniform(shadowPoint)
   const highlightPtNode = uniform(highlightPoint)
   watch(

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorA = '#000000',
     colorB = '#ffffff',
@@ -15,13 +17,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 rotationNode = uniform((rotation * Math.PI) / 180)
   watch(
     () => colorA,

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { sdBox2d } from '../../shaders/common/sdf'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -22,13 +23,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 sizeNode = uniform(size)
   const thickNode = uniform(thickness)
   const softnessNode = uniform(softness)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { curlNoise3d } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     color = '#ffffff',
@@ -22,12 +23,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 speedNode = uniform(speed)

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendDarken } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendDarken,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendDarken(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { abs, float, mix, pow, sign, time, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   /**
    * Sinusoidal interpolation between a light and dark colour over time.
    * The phobon easing: t = (sign(cycle) * pow(abs(cycle), 0.6) + 1) / 2
@@ -25,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 lightNode = toVec3Node(colorLight)
-  const darkNode = toVec3Node(colorDark)
+  const lightNode = hexToVec3Uniform(colorLight)
+  const darkNode = hexToVec3Uniform(colorDark)
   const speedNode = uniform(speed)
   const opacityNode = uniform(opacity)
   watch(

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { cos, float, mix, sin, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorA = '#000000',
     colorB = '#ffffff',
@@ -15,13 +17,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 angleNode = uniform((angle * Math.PI) / 180)
   watch(
     () => colorA,

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   /** Chebyshev-distance diamond gradient: max(|x|, |y|) from centre. */
   const {
     colorA = '#000000',
@@ -16,13 +18,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 scaleNode = uniform(scale)
   watch(
     () => colorA,

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendDifference } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendDifference,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendDifference(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
   import { domainWarp2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -22,13 +23,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 scaleNode = uniform(scale)
   const warpStrNode = uniform(warpStrength)
   const warpScaleNode = uniform(warpScale)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, uniform, vec4 } from 'three/tsl'
 
   import { dots } from '../../shaders/common/shapes'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -20,13 +21,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 cellNode = uniform(cellSize)
   const dotNode = uniform(dotRadius)
   const softNode = uniform(softness)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
+  import { Color } from 'three'
+  import { mix, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     shadowColor = '#1a0033',
@@ -16,13 +17,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const shadowNode = toVec3Node(shadowColor)
-  const highlightNode = toVec3Node(highlightColor)
+  const shadowNode = hexToVec3Uniform(shadowColor)
+  const highlightNode = hexToVec3Uniform(highlightColor)
   watch(
     () => shadowColor,
     (v) => {

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendExclusion } from '../../shaders/common/blend'
 
   const {
-    color = '#ffffff',
+    color = '#808080',
     opacity = 1,
     order = 0,
   } = defineProps<{
@@ -14,27 +11,10 @@
     order?: number
   }>()
 
-  const colorNode = (() => {
-    const c = new Color(color)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  })()
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendExclusion,
     () => color,
-    (v) => {
-      const c = new Color(v)
-      colorNode.value.set(c.r, c.g, c.b)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendExclusion(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   /**
    * Height-based exponential fog: exp2(-ray.y * density).
    * Blends prev colour toward fogColor as the ray approaches the horizon.
@@ -22,12 +24,7 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const fogColorNode = toVec3Node(fogColor)
+  const fogColorNode = hexToVec3Uniform(fogColor)
   const densityNode = uniform(density)
   const horizonBiasNode = uniform(horizonBias)
   watch(

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector2, Vector3 } from 'three'
+  import { Color, Vector2 } from 'three'
   import { float, smoothstep, uniform, vec2, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   /**
    * Orange/warm light leak emanating from a screen corner.
    * Additive over-exposure effect — common in analogue film.
@@ -24,12 +26,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 originNode = uniform(new Vector2(...origin))
   const radiusNode = uniform(radius)
   const intensityNode = uniform(intensity)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { clamp, float, mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorBase = '#ffcc00',
@@ -22,13 +23,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorBaseNode = toVec3Node(colorBase)
-  const colorTipNode = toVec3Node(colorTip)
+  const colorBaseNode = hexToVec3Uniform(colorBase)
+  const colorTipNode = hexToVec3Uniform(colorTip)
   const scaleNode = uniform(scale)
   const speedNode = uniform(speed)
   watch(

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector2, Vector3 } from 'three'
+  import { Color, Vector2 } from 'three'
   import { float, mix, uniform, vec2, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   /** Radial gradient with an offset focal point — asymmetric radial. */
   const {
     colorA = '#ffffff',
@@ -19,13 +21,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 focalNode = uniform(new Vector2(...focal))
   const radiusNode = uniform(radius)
   watch(