kmcom-nuxt-layers 2.2.11 → 2.2.13

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

@@ -13,7 +13,10 @@ export type ShaderGraphEntry = {
 }
 
 export type ShaderGraph = {
-  register: (id: string, node: TSLNode, order?: number, blend?: BlendMode, opacity?: number) => void
+  register: (
+    id: string,
+    ...args: [node: TSLNode, order?: number, blend?: BlendMode, opacity?: number]
+  ) => void
   unregister: (id: string) => void
   update: (id: string, node: TSLNode) => void
   finalNode: ComputedRef<TSLNode | null>
@@ -33,11 +36,9 @@ export function useShaderGraph(): ShaderGraph {
 
   function register(
     id: string,
-    node: TSLNode,
-    order = 0,
-    blend: BlendMode = 'normal',
-    opacity = 1.0
+    ...args: [node: TSLNode, order?: number, blend?: BlendMode, opacity?: number]
   ) {
+    const [node, order = 0, blend = 'normal', opacity = 1.0] = args
     entries.set(id, { node, order, blend, opacity })
     version.value++
   }
@@ -99,7 +100,11 @@ export function useShaderGraphContext(): ShaderGraph {
   return graph
 }
 
-function applyBlend(base: TSLNode, layer: TSLNode, mode: BlendMode, opacity: number): TSLNode {
+function applyBlend(
+  base: TSLNode,
+  ...args: [layer: TSLNode, mode: BlendMode, opacity?: number]
+): TSLNode {
+  const [layer, mode, opacity = 1] = args
   let blended: TSLNode
 
   switch (mode) {

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

@@ -5,10 +5,9 @@ import type { TSLNode } from '../types/tsl'
 
 export function useShaderMixBlend(
   blendFn: (base: TSLNode, blend: TSLNode) => TSLNode,
-  colorGetter: () => string,
-  opacityGetter: () => number,
-  order: number = 0
+  ...args: [colorGetter: () => string, opacityGetter: () => number, order?: number]
 ) {
+  const [colorGetter, opacityGetter, order = 0] = args
   const colorNode = uniform(new Color(colorGetter()))
   const opacityNode = uniform(opacityGetter())
 
@@ -20,7 +19,8 @@ export function useShaderMixBlend(
   })
 
   useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendFn(prev.xyz, colorNode as unknown as TSLNode), opacityNode), prev.w),
+    (prev) =>
+      vec4(mix(prev.xyz, blendFn(prev.xyz, colorNode as unknown as TSLNode), opacityNode), prev.w),
     order
   )
 }

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

@@ -2,7 +2,6 @@ import type { InjectionKey } from 'vue'
 import { Color } from 'three'
 import { uniform } from 'three/tsl'
 
-
 export type ShaderRuntimeOptions = {
   speed?: number
   accentColor?: string

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

@@ -28,11 +28,9 @@ export function useShaderVec2(initialX = 0, initialY = 0) {
   }
 
   function tweenTo(
-    targetX: number,
-    targetY: number,
-    duration: number,
-    easing?: (t: number) => number
+    ...args: [targetX: number, targetY: number, duration: number, easing?: (t: number) => number]
   ): TweenHandle {
+    const [targetX, targetY, duration, easing] = args
     activeTween?.cancel()
 
     const startX = vector.x

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

@@ -41,10 +41,22 @@ export function useThemePreset(
     color4: c4.node,
   })
 
-  watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
-  watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
-  watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
-  watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+  watch(
+    () => props.color1,
+    (hex) => c1.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color2,
+    (hex) => c2.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color3,
+    (hex) => c3.tweenTo(hex, 0.8)
+  )
+  watch(
+    () => props.color4,
+    (hex) => c4.tweenTo(hex, 0.8)
+  )
 
   try {
     const runtime = useShaderRuntimeContext()
@@ -60,15 +72,29 @@ export function useThemePreset(
     // No runtime context
   }
 
-  watch(() => props.speed, (v) => { uniforms.speed.value = v })
-  watch(() => props.intensity, (v) => { uniforms.intensity.value = v })
+  watch(
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
   watch(
     () => props.mouseInteraction,
-    (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 }
+    (v) => {
+      uniforms.mouseStrength.value = v ? props.mouseStrength : 0
+    }
   )
   watch(
     () => props.mouseStrength,
-    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v }
+    (v) => {
+      if (props.mouseInteraction) uniforms.mouseStrength.value = v
+    }
   )
 
   return { uniforms, colorNode }

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

@@ -0,0 +1,15 @@
+import { watch } from 'vue'
+
+type WritableUniform<T> = {
+  value: T
+}
+
+export function watchUniformProp<T, U = T>(
+  source: () => T,
+  target: WritableUniform<U>,
+  transform?: (value: T) => U
+) {
+  watch(source, (value) => {
+    target.value = transform ? transform(value) : (value as unknown as U)
+  })
+}

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

@@ -1,4 +1,3 @@
-
 import { reactive, ref, watch } from 'vue'
 import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from 'three'
 import { uniform } from 'three/tsl'

package/layers/shader/app/shaders/common/blend.ts

@@ -5,6 +5,7 @@
 import { abs, clamp, float, max, min, mix, step, vec3 } from 'three/tsl'
 
 import type { TSLNode } from '../types'
+import { toScalarNode } from './nodes'
 
 // ============================================
 // Basic Blending
@@ -168,11 +169,10 @@ export function blendPinLight(base: TSLNode, blend: TSLNode): TSLNode {
  */
 export function blendWithOpacity(
   base: TSLNode,
-  blend: TSLNode,
-  blendFn: (a: TSLNode, b: TSLNode) => TSLNode,
-  opacity: TSLNode | number = 1
+  ...args: [blend: TSLNode, blendFn: (a: TSLNode, b: TSLNode) => TSLNode, opacity?: TSLNode | number]
 ): TSLNode {
-  const op = typeof opacity === 'number' ? float(opacity) : opacity
+  const [blend, blendFn, opacity = 1] = args
+  const op = toScalarNode(opacity)
   const blended = blendFn(base, blend)
   return mix(base, blended, op)
 }

package/layers/shader/app/shaders/common/effects.ts

@@ -17,6 +17,7 @@ import {
 } from 'three/tsl'
 
 import type { TSLNode } from '../types'
+import { toScalarNode, toVec2Node } from './nodes'
 
 // ============================================
 // LED Effect
@@ -29,6 +30,13 @@ export type LEDEffectOptions = {
   edge?: TSLNode | number
 }
 
+const DEFAULT_LED_EFFECT_OPTIONS = {
+  scalar: 100,
+  zoom: 2,
+  exponent: 1.2,
+  edge: 0.1,
+} as const
+
 /**
  * LED screen effect for post-processing
  * Creates a grid of circular LED dots over the input texture
@@ -41,12 +49,15 @@ export function ledEffect(
   inputUV: () => TSLNode = uv,
   options: LEDEffectOptions = {}
 ): TSLNode {
-  const { scalar = 100, zoom = 2, exponent = 1.2, edge = 0.1 } = options
+  const { scalar, zoom, exponent, edge } = {
+    ...DEFAULT_LED_EFFECT_OPTIONS,
+    ...options,
+  }
 
-  const _scalar = typeof scalar === 'number' ? float(scalar) : scalar
-  const _zoom = typeof zoom === 'number' ? float(zoom) : zoom
-  const _exponent = typeof exponent === 'number' ? float(exponent) : exponent
-  const _edge = typeof edge === 'number' ? float(edge) : edge
+  const _scalar = toScalarNode(scalar)
+  const _zoom = toScalarNode(zoom)
+  const _exponent = toScalarNode(exponent)
+  const _edge = toScalarNode(edge)
 
   const _uv = inputUV().toVar()
 
@@ -168,6 +179,13 @@ export type BulgeEffectOptions = {
   center?: TSLNode | [number, number]
 }
 
+const DEFAULT_BULGE_EFFECT_OPTIONS = {
+  strength: 0.5,
+  radius: 0.5,
+  power: 1,
+  center: [0.5, 0.5] as [number, number],
+} as const
+
 /**
  * Bulge/pinch distortion effect for post-processing
  * @param input - Input texture
@@ -179,12 +197,12 @@ export function bulgeEffect(
   inputUV: () => TSLNode = uv,
   options: BulgeEffectOptions = {}
 ): TSLNode {
-  const { strength = 0.5, radius = 0.5, power = 1.0, center = [0.5, 0.5] } = options
+  const { strength, radius, power, center } = { ...DEFAULT_BULGE_EFFECT_OPTIONS, ...options }
 
-  const _strength = typeof strength === 'number' ? float(strength) : strength
-  const _radius = typeof radius === 'number' ? float(radius) : radius
-  const _power = typeof power === 'number' ? float(power) : power
-  const _center = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const _strength = toScalarNode(strength)
+  const _radius = toScalarNode(radius)
+  const _power = toScalarNode(power)
+  const _center = toVec2Node(center)
 
   const _uv = inputUV().toVar()
   const offset = _uv.sub(_center).toVar()
@@ -226,24 +244,23 @@ export function waveDistortionEffect(
   options: WaveDistortionOptions = {}
 ): TSLNode {
   const { frequency = 10, amplitude = 0.02, time = 0, direction = 'both' } = options
+  type WaveDirection = NonNullable<WaveDistortionOptions['direction']>
 
-  const _freq = typeof frequency === 'number' ? float(frequency) : frequency
-  const _amp = typeof amplitude === 'number' ? float(amplitude) : amplitude
-  const _time = typeof time === 'number' ? float(time) : time
+  const _freq = toScalarNode(frequency)
+  const _amp = toScalarNode(amplitude)
+  const _time = toScalarNode(time)
 
   const _uv = inputUV().toVar()
 
   const _eX = _uv.y.mul(_freq).add(_time).sin().mul(_amp)
   const _eY = _uv.x.mul(_freq).add(_time.mul(1.3)).sin().mul(_amp)
-  let distortedUV: TSLNode = vec2(_uv.x.add(_eX), _uv.y.add(_eY))
-
-  if (direction === 'x') {
-    distortedUV = vec2(_uv.x.add(_eX), _uv.y)
-  } else if (direction === 'y') {
-    distortedUV = vec2(_uv.x, _uv.y.add(_uv.x.mul(_freq).add(_time).sin().mul(_amp)))
-  }
+  const distortedUVMap = {
+    both: vec2(_uv.x.add(_eX), _uv.y.add(_eY)),
+    x: vec2(_uv.x.add(_eX), _uv.y),
+    y: vec2(_uv.x, _uv.y.add(_uv.x.mul(_freq).add(_time).sin().mul(_amp))),
+  } satisfies Record<WaveDirection, TSLNode>
 
-  return input.sample(distortedUV)
+  return input.sample(distortedUVMap[direction])
 }
 
 // ============================================

package/layers/shader/app/shaders/common/grain.ts

@@ -5,6 +5,7 @@
 import { clamp, dot, float, floor, fract, mix, sin, smoothstep, vec2, vec3 } from 'three/tsl'
 
 import type { TSLNode } from '../types'
+import { toScalarNode } from './nodes'
 
 // ============================================
 // Basic Grain
@@ -31,11 +32,11 @@ export function grain(
 export function animatedGrain(
   uv: TSLNode,
   time: TSLNode,
-  intensity: TSLNode | number = 0.1,
-  speed: TSLNode | number = 1
+  ...args: [intensity?: TSLNode | number, speed?: TSLNode | number]
 ): TSLNode {
-  const int = typeof intensity === 'number' ? float(intensity) : intensity
-  const spd = typeof speed === 'number' ? float(speed) : speed
+  const [intensity = 0.1, speed = 1] = args
+  const int = toScalarNode(intensity)
+  const spd = toScalarNode(speed)
 
   // Use time as seed for animation
   const seed = floor(time.mul(spd).mul(24)) // 24 fps grain
@@ -93,11 +94,11 @@ export function bayer4x4(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
 export function ditherColor(
   color: TSLNode,
   uv: TSLNode,
-  levels: TSLNode | number = 16,
-  strength: TSLNode | number = 1
+  ...args: [levels?: TSLNode | number, strength?: TSLNode | number]
 ): TSLNode {
-  const lvl = typeof levels === 'number' ? float(levels) : levels
-  const str = typeof strength === 'number' ? float(strength) : strength
+  const [levels = 16, strength = 1] = args
+  const lvl = toScalarNode(levels)
+  const str = toScalarNode(strength)
 
   const threshold = bayer4x4(uv, 4).mul(str).div(lvl)
   const dithered = floor(color.mul(lvl).add(threshold)).div(lvl)
@@ -114,13 +115,12 @@ export function ditherColor(
  */
 export function scanlines(
   uv: TSLNode,
-  density: TSLNode | number = 400,
-  intensity: TSLNode | number = 0.25,
-  offset: TSLNode | number = 0
+  ...args: [density?: TSLNode | number, intensity?: TSLNode | number, offset?: TSLNode | number]
 ): TSLNode {
-  const d = typeof density === 'number' ? float(density) : density
-  const int = typeof intensity === 'number' ? float(intensity) : intensity
-  const off = typeof offset === 'number' ? float(offset) : offset
+  const [density = 400, intensity = 0.25, offset = 0] = args
+  const d = toScalarNode(density)
+  const int = toScalarNode(intensity)
+  const off = toScalarNode(offset)
 
   const line = sin(uv.y.add(off).mul(d).mul(Math.PI)).mul(0.5).add(0.5)
   return float(1).sub(line.mul(int))
@@ -131,13 +131,12 @@ export function scanlines(
  */
 export function interlace(
   uv: TSLNode,
-  density: TSLNode | number = 400,
-  intensity: TSLNode | number = 0.5,
-  frame: TSLNode | number = 0
+  ...args: [density?: TSLNode | number, intensity?: TSLNode | number, frame?: TSLNode | number]
 ): TSLNode {
-  const d = typeof density === 'number' ? float(density) : density
-  const int = typeof intensity === 'number' ? float(intensity) : intensity
-  const f = typeof frame === 'number' ? float(frame) : frame
+  const [density = 400, intensity = 0.5, frame = 0] = args
+  const d = toScalarNode(density)
+  const int = toScalarNode(intensity)
+  const f = toScalarNode(frame)
 
   const line = floor(uv.y.mul(d)).add(f).mod(2)
   return float(1).sub(line.mul(int))
@@ -152,13 +151,12 @@ export function interlace(
  */
 export function vignette(
   uv: TSLNode,
-  intensity: TSLNode | number = 0.5,
-  smoothness: TSLNode | number = 0.5,
-  roundness: TSLNode | number = 1
+  ...args: [intensity?: TSLNode | number, smoothness?: TSLNode | number, roundness?: TSLNode | number]
 ): TSLNode {
-  const int = typeof intensity === 'number' ? float(intensity) : intensity
-  const smooth = typeof smoothness === 'number' ? float(smoothness) : smoothness
-  const round = typeof roundness === 'number' ? float(roundness) : roundness
+  const [intensity = 0.5, smoothness = 0.5, roundness = 1] = args
+  const int = toScalarNode(intensity)
+  const smooth = toScalarNode(smoothness)
+  const round = toScalarNode(roundness)
 
   const center = uv.sub(0.5)
   const dist = center.length().mul(round)
@@ -192,13 +190,12 @@ export function rectVignette(
  */
 export function paperTexture(
   uv: TSLNode,
-  scale: TSLNode | number = 10,
-  intensity: TSLNode | number = 0.1,
-  seed: TSLNode | number = 0
+  ...args: [scale?: TSLNode | number, intensity?: TSLNode | number, seed?: TSLNode | number]
 ): TSLNode {
-  const s = typeof scale === 'number' ? float(scale) : scale
-  const int = typeof intensity === 'number' ? float(intensity) : intensity
-  const sd = typeof seed === 'number' ? float(seed) : seed
+  const [scale = 10, intensity = 0.1, seed = 0] = args
+  const s = toScalarNode(scale)
+  const int = toScalarNode(intensity)
+  const sd = toScalarNode(seed)
 
   // Multi-octave noise for paper texture
   const noise1 = grain(uv.mul(s), 1, sd)
@@ -214,11 +211,11 @@ export function paperTexture(
 export function halftone(
   uv: TSLNode,
   value: TSLNode,
-  scale: TSLNode | number = 50,
-  angle: TSLNode | number = 0
+  ...args: [scale?: TSLNode | number, angle?: TSLNode | number]
 ): TSLNode {
-  const s = typeof scale === 'number' ? float(scale) : scale
-  const a = typeof angle === 'number' ? float(angle) : angle
+  const [scale = 50, angle = 0] = args
+  const s = toScalarNode(scale)
+  const a = toScalarNode(angle)
 
   // Rotate UV
   const cosA = a.cos()
@@ -245,9 +242,9 @@ export function halftone(
 export function applyGrain(
   color: TSLNode,
   uv: TSLNode,
-  intensity: TSLNode | number = 0.05,
-  seed: TSLNode | number = 0
+  ...args: [intensity?: TSLNode | number, seed?: TSLNode | number]
 ): TSLNode {
+  const [intensity = 0.05, seed = 0] = args
   const grainValue = grain(uv, intensity, seed)
   return clamp(color.add(grainValue), 0, 1)
 }
@@ -258,9 +255,9 @@ export function applyGrain(
 export function applyColoredGrain(
   color: TSLNode,
   uv: TSLNode,
-  intensity: TSLNode | number = 0.05,
-  seed: TSLNode | number = 0
+  ...args: [intensity?: TSLNode | number, seed?: TSLNode | number]
 ): TSLNode {
+  const [intensity = 0.05, seed = 0] = args
   const grainValue = coloredGrain(uv, intensity, seed)
   return clamp(color.add(grainValue), 0, 1)
 }
@@ -271,8 +268,9 @@ export function applyColoredGrain(
 export function applyVignette(
   color: TSLNode,
   uv: TSLNode,
-  intensity: TSLNode | number = 0.5
+  ...args: [intensity?: TSLNode | number]
 ): TSLNode {
+  const [intensity = 0.5] = args
   const vignetteValue = vignette(uv, intensity)
   return color.mul(vignetteValue)
 }
@@ -283,9 +281,9 @@ export function applyVignette(
 export function applyScanlines(
   color: TSLNode,
   uv: TSLNode,
-  density: TSLNode | number = 400,
-  intensity: TSLNode | number = 0.25
+  ...args: [density?: TSLNode | number, intensity?: TSLNode | number]
 ): TSLNode {
+  const [density = 400, intensity = 0.25] = args
   const scanlineValue = scanlines(uv, density, intensity)
   return color.mul(scanlineValue)
 }
@@ -437,13 +435,12 @@ export function bayer8x8(uv: TSLNode, scale: TSLNode | number = 1): TSLNode {
 export function dither8x8Color(
   color: TSLNode,
   uv: TSLNode,
-  levels: TSLNode | number = 16,
-  strength: TSLNode | number = 1,
-  bias: TSLNode | number = 0.5
+  ...args: [levels?: TSLNode | number, strength?: TSLNode | number, bias?: TSLNode | number]
 ): TSLNode {
-  const lvl = typeof levels === 'number' ? float(levels) : levels
-  const str = typeof strength === 'number' ? float(strength) : strength
-  const b = typeof bias === 'number' ? float(bias) : bias
+  const [levels = 16, strength = 1, bias = 0.5] = args
+  const lvl = toScalarNode(levels)
+  const str = toScalarNode(strength)
+  const b = toScalarNode(bias)
 
   const threshold = bayer8x8(uv, 8).sub(b).mul(str).div(lvl)
   const dithered = floor(color.mul(lvl).add(threshold)).div(lvl)

package/layers/shader/app/shaders/common/lighting.ts

@@ -5,6 +5,7 @@
 import { dot, float, max, mix, normalize, pow, reflect, vec3 } from 'three/tsl'
 
 import type { TSLNode } from '../types'
+import { toScalarNode } from './nodes'
 
 // ============================================
 // Fresnel Effect
@@ -72,11 +73,10 @@ export function diffuse(lightDir: TSLNode, normal: TSLNode, lightColor: TSLNode)
  */
 export function phongSpecular(
   viewDir: TSLNode,
-  normal: TSLNode,
-  lightDir: TSLNode,
-  shininess: TSLNode | number = 32
+  ...args: [normal: TSLNode, lightDir: TSLNode, shininess?: TSLNode | number]
 ): TSLNode {
-  const p = typeof shininess === 'number' ? float(shininess) : shininess
+  const [normal, lightDir, shininess = 32] = args
+  const p = toScalarNode(shininess)
   const reflectDir = normalize(reflect(lightDir.negate(), normal))
   const phongValue = max(0, dot(viewDir, reflectDir)).pow(p)
   return vec3(phongValue)
@@ -96,11 +96,10 @@ export function phongSpecular(
  */
 export function blinnPhongSpecular(
   viewDir: TSLNode,
-  normal: TSLNode,
-  lightDir: TSLNode,
-  shininess: TSLNode | number = 32
+  ...args: [normal: TSLNode, lightDir: TSLNode, shininess?: TSLNode | number]
 ): TSLNode {
-  const p = typeof shininess === 'number' ? float(shininess) : shininess
+  const [normal, lightDir, shininess = 32] = args
+  const p = toScalarNode(shininess)
   const halfDir = normalize(lightDir.add(viewDir))
   const specAngle = max(0, dot(halfDir, normal))
   return vec3(pow(specAngle, p))
@@ -127,16 +126,19 @@ export type LightingOptions = {
  */
 export function phongLighting(
   viewDir: TSLNode,
-  normal: TSLNode,
-  lightDir: TSLNode,
-  lightColor: TSLNode,
-  options: LightingOptions = {}
+  ...args: [
+    normal: TSLNode,
+    lightDir: TSLNode,
+    lightColor: TSLNode,
+    options?: LightingOptions,
+  ]
 ): TSLNode {
+  const [normal, lightDir, lightColor, options = {}] = args
   const { ambient = 0.1, diffuseStrength = 1.0, specularStrength = 0.5, shininess = 32 } = options
 
-  const ambientVal = typeof ambient === 'number' ? float(ambient) : ambient
-  const diffStr = typeof diffuseStrength === 'number' ? float(diffuseStrength) : diffuseStrength
-  const specStr = typeof specularStrength === 'number' ? float(specularStrength) : specularStrength
+  const ambientVal = toScalarNode(ambient)
+  const diffStr = toScalarNode(diffuseStrength)
+  const specStr = toScalarNode(specularStrength)
 
   const ambientLight = lightColor.mul(ambientVal)
   const diffuseLight = diffuse(lightDir, normal, lightColor).mul(diffStr)

package/layers/shader/app/shaders/common/math.ts

@@ -167,11 +167,9 @@ export function complexTan(a: TSLNode): TSLNode {
  */
 export function grad(
   st: TSLNode,
-  color1: TSLNode,
-  color2: TSLNode,
-  color3: TSLNode,
-  color4: TSLNode
+  ...colors: [color1: TSLNode, color2: TSLNode, color3: TSLNode, color4: TSLNode]
 ): TSLNode {
+  const [color1, color2, color3, color4] = colors
   const _uv = vec2(st).toVar()
   const _color0 = vec4(color1, 1.0).toVar()
   const _color1 = vec4(color2, 1.0).toVar()

package/layers/shader/app/shaders/common/nodes.ts

@@ -0,0 +1,17 @@
+import { float, vec2, vec3 } from 'three/tsl'
+
+import type { TSLNode } from '../types'
+
+export function toScalarNode(value: TSLNode | number): TSLNode {
+  return typeof value === 'number' ? float(value) : value
+}
+
+export function toVec2Node(value: TSLNode | number | [number, number]): TSLNode {
+  if (typeof value === 'number') return vec2(value, value)
+  if (Array.isArray(value)) return vec2(value[0], value[1])
+  return value
+}
+
+export function toVec3Node(value: TSLNode | [number, number, number]): TSLNode {
+  return Array.isArray(value) ? vec3(value[0], value[1], value[2]) : value
+}

package/layers/shader/app/shaders/common/palette.ts

@@ -48,10 +48,9 @@ export function gradient2(t: TSLNode, color1: TSLNode | string, color2: TSLNode
  */
 export function gradient3(
   t: TSLNode,
-  color1: TSLNode | string,
-  color2: TSLNode | string,
-  color3: TSLNode | string
+  ...colors: [color1: TSLNode | string, color2: TSLNode | string, color3: TSLNode | string]
 ): TSLNode {
+  const [color1, color2, color3] = colors
   const c1 = typeof color1 === 'string' ? hexToVec3(color1) : color1
   const c2 = typeof color2 === 'string' ? hexToVec3(color2) : color2
   const c3 = typeof color3 === 'string' ? hexToVec3(color3) : color3
@@ -68,11 +67,14 @@ export function gradient3(
  */
 export function gradient4(
   t: TSLNode,
-  color1: TSLNode | string,
-  color2: TSLNode | string,
-  color3: TSLNode | string,
-  color4: TSLNode | string
+  ...colors: [
+    color1: TSLNode | string,
+    color2: TSLNode | string,
+    color3: TSLNode | string,
+    color4: TSLNode | string,
+  ]
 ): TSLNode {
+  const [color1, color2, color3, color4] = colors
   const c1 = typeof color1 === 'string' ? hexToVec3(color1) : color1
   const c2 = typeof color2 === 'string' ? hexToVec3(color2) : color2
   const c3 = typeof color3 === 'string' ? hexToVec3(color3) : color3
@@ -133,11 +135,19 @@ export function gradientMulti(t: TSLNode, stops: ColorStop[]): TSLNode {
  */
 export function cosinePalette(
   t: TSLNode,
-  brightness: TSLNode | [number, number, number] = [0.5, 0.5, 0.5],
-  contrast: TSLNode | [number, number, number] = [0.5, 0.5, 0.5],
-  frequency: TSLNode | [number, number, number] = [1.0, 1.0, 1.0],
-  phase: TSLNode | [number, number, number] = [0.0, 0.33, 0.67]
+  ...args: [
+    brightness?: TSLNode | [number, number, number],
+    contrast?: TSLNode | [number, number, number],
+    frequency?: TSLNode | [number, number, number],
+    phase?: TSLNode | [number, number, number],
+  ]
 ): TSLNode {
+  const [
+    brightness = [0.5, 0.5, 0.5],
+    contrast = [0.5, 0.5, 0.5],
+    frequency = [1.0, 1.0, 1.0],
+    phase = [0.0, 0.33, 0.67],
+  ] = args
   const a = Array.isArray(brightness) ? vec3(...brightness) : brightness
   const b = Array.isArray(contrast) ? vec3(...contrast) : contrast
   const c = Array.isArray(frequency) ? vec3(...frequency) : frequency