kmcom-nuxt-layers 2.2.6 → 2.2.8

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

@@ -5,8 +5,8 @@
   const {
     colorA = '#000000',
     colorB = '#ffffff',
-    colorC,
-    colorD,
+    colorC = undefined,
+    colorD = undefined,
     axis = 'y',
     order = 0,
   } = defineProps<{

package/layers/shader/app/components/Pipeline/Marble.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 = '#f5f0e8',
@@ -31,13 +32,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 freqNode = uniform(frequency)
   const noiseScaleNode = uniform(noiseScale)
   const noiseStrNode = uniform(noiseStrength)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { uniform, vec4 } from 'three/tsl'
 
   import { desaturate } from '../../shaders/common/blend'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     color = '#4466aa',
@@ -16,12 +17,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 desatNode = uniform(desaturation)
   watch(
     () => color,

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendMultiply } 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(
+    blendMultiply,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendMultiply(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

package/layers/shader/app/components/Pipeline/NoisyGradient.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 { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /** Linear gradient with per-pixel FBM noise offset — living, organic gradient. */
   const {
@@ -27,13 +28,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)
   const noiseStrNode = uniform(noiseStrength)
   const noiseScaleNode = uniform(noiseScale)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { cos, float, mix, sin, smoothstep, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { simplexNoise2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /**
    * Self-contained Grainient/Shadertoy gradient pattern.
@@ -48,13 +49,8 @@
 
   const DEG2RAD = Math.PI / 180
 
-  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 noiseScaleNode = uniform(noiseScale)
   const rotAmountNode = uniform(rotationAmount * DEG2RAD)
   const warpFreqNode = uniform(warpFrequency)

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendOverlay } 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(
+    blendOverlay,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendOverlay(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

package/layers/shader/app/components/Pipeline/Polygon.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 { polygon } from '../../shaders/common/shapes'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -24,13 +25,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)
   const rotationNode = uniform((rotation * Math.PI) / 180)

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import {
     abs,
     Break,
@@ -17,6 +17,7 @@
   } from 'three/tsl'
 
   import type { TSLNode } from '../../shaders/types'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     radius = 0.8,
@@ -42,12 +43,8 @@
   const radiusNode = uniform(radius)
   const speedNode = uniform(speed)
 
-  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)
 
   watch(
     () => radius,

package/layers/shader/app/components/Pipeline/Rectangle.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 { roundedRect } from '../../shaders/common/shapes'
+  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 widthNode = uniform(width)
   const heightNode = uniform(height)
   const cornerNode = uniform(cornerRadius)

package/layers/shader/app/components/Pipeline/RidgedNoise.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 { ridgedFbm2d } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -18,13 +19,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 speedNode = uniform(speed)
   watch(

package/layers/shader/app/components/Pipeline/Ring.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 { ring } 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 innerNode = uniform(innerRadius)
   const outerNode = uniform(outerRadius)
   const softnessNode = uniform(softness)

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendScreen } 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(
+    blendScreen,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendScreen(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -2,6 +2,8 @@
   import { Color, Vector3 } from 'three'
   import { clamp, dot, float, mix, pow, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     zenith = '#1a3a8a',
     horizon = '#7ab0d8',
@@ -26,15 +28,10 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const zenithNode = toVec3Node(zenith)
-  const horizonNode = toVec3Node(horizon)
-  const groundNode = toVec3Node(ground)
-  const sunColorNode = toVec3Node(sunColor)
+  const zenithNode = hexToVec3Uniform(zenith)
+  const horizonNode = hexToVec3Uniform(horizon)
+  const groundNode = hexToVec3Uniform(ground)
+  const sunColorNode = hexToVec3Uniform(sunColor)
   const sunPowerNode = uniform(sunPower)
 
   const sunDir = new Vector3(...sunDirection).normalize()

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendSoftLight } 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(
+    blendSoftLight,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendSoftLight(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     shadowColor = '#1a2a5a',
@@ -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 shadowNode = toVec3Node(shadowColor)
-  const highlightNode = toVec3Node(highlightColor)
+  const shadowNode = hexToVec3Uniform(shadowColor)
+  const highlightNode = hexToVec3Uniform(highlightColor)
   const balanceNode = uniform(balance)
   const opacityNode = uniform(opacity)
   watch(

package/layers/shader/app/components/Pipeline/Star.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 { star } from '../../shaders/common/shapes'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -24,13 +25,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 innerNode = uniform(innerRatio)
   const softnessNode = uniform(softness)

package/layers/shader/app/components/Pipeline/Stripes.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 { stripes } from '../../shaders/common/shapes'
+  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 freqNode = uniform(frequency)
   const thickNode = uniform(thickness)
   const angleNode = uniform((angle * Math.PI) / 180)

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     color = '#ff8844',
     opacity = 1,
@@ -14,12 +16,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)
   watch(
     () => color,

package/layers/shader/app/components/Pipeline/Triangle.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 { sdEquilateralTriangle } from '../../shaders/common/sdf'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -18,13 +19,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 softnessNode = uniform(softness)
   watch(

package/layers/shader/app/components/Pipeline/ValueNoise.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 { valueNoise2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -18,13 +19,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 speedNode = uniform(speed)
   watch(

package/layers/shader/app/components/Pipeline/VoronoiEdges.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 { voronoi2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /** Voronoi cell edge lines only — the cell boundaries as thin lines. */
   const {
@@ -24,13 +25,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 edgeNode = uniform(edgeWidth)
   const speedNode = uniform(speed)

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

@@ -1,7 +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 { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorDeep = '#003366',
     colorShallow = '#66ccff',
@@ -23,13 +25,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorDeepNode = toVec3Node(colorDeep)
-  const colorShallowNode = toVec3Node(colorShallow)
+  const colorDeepNode = hexToVec3Uniform(colorDeep)
+  const colorShallowNode = hexToVec3Uniform(colorShallow)
   const freqNode = uniform(frequency)
   const ampNode = uniform(amplitude)
   const speedNode = uniform(speed)