kmcom-nuxt-layers 2.2.12 → 2.3.0

package/layers/shader/app/shaders/createMaterial.ts

@@ -106,102 +106,116 @@ const sideMap: Record<string, Side> = {
   double: DoubleSide,
 }
 
-// ============================================
-// Factory Functions
-// ============================================
-
-/**
- * Create a shader material from a shader type
- */
-export function createShaderMaterial<T extends ShaderType>(
+function createShaderUniforms<T extends ShaderType>(
   type: T,
-  shaderOptions?: ShaderOptions<T>,
-  materialOptions?: MaterialOptions
-): ShaderMaterialResult<T> {
-  const {
-    transparent = false,
-    side = 'double',
-    opacity = 1,
-    depthTest = true,
-    depthWrite = true,
-  } = materialOptions || {}
+  shaderOptions?: ShaderOptions<T>
+): ShaderUniforms<T> {
+  switch (type) {
+    case 'stripe':
+      return createStripeGradientUniforms(shaderOptions as StripeGradientOptions) as ShaderUniforms<T>
+    case 'meshGradient':
+      return createMeshGradientUniforms(shaderOptions as MeshGradientOptions) as ShaderUniforms<T>
+    case 'aurora':
+      return createAuroraUniforms(shaderOptions as AuroraOptions) as ShaderUniforms<T>
+    case 'shaderGradient':
+      return createShaderGradientUniforms(shaderOptions as ShaderGradientOptions) as ShaderUniforms<T>
+    case 'paperShading':
+      return createPaperShadingUniforms(shaderOptions as PaperShadingOptions) as ShaderUniforms<T>
+  }
+}
 
-  let uniforms: ShaderUniforms<T>
-  let colorNode: TSLNode
+function createShaderColorNode<T extends ShaderType>(type: T, uniforms: ShaderUniforms<T>): TSLNode {
+  switch (type) {
+    case 'stripe':
+      return stripeGradient(uniforms as StripeGradientUniforms)
+    case 'meshGradient':
+      return meshGradient(uniforms as MeshGradientUniforms)
+    case 'aurora':
+      return aurora(uniforms as AuroraUniforms)
+    case 'shaderGradient':
+      return shaderGradient(uniforms as ShaderGradientUniforms)
+    case 'paperShading':
+      return paperShading(uniforms as PaperShadingUniforms)
+  }
+}
 
-  // Create uniforms and color node based on type
+function updateShaderUniforms<T extends ShaderType>(
+  type: T,
+  uniforms: ShaderUniforms<T>,
+  options: Partial<ShaderOptions<T>>
+): void {
   switch (type) {
     case 'stripe':
-      uniforms = createStripeGradientUniforms(
-        shaderOptions as StripeGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = stripeGradient(uniforms as StripeGradientUniforms)
-      break
+      updateStripeGradientUniforms(
+        uniforms as StripeGradientUniforms,
+        options as Partial<StripeGradientOptions>
+      )
+      return
     case 'meshGradient':
-      uniforms = createMeshGradientUniforms(
-        shaderOptions as MeshGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = meshGradient(uniforms as MeshGradientUniforms)
-      break
+      updateMeshGradientUniforms(
+        uniforms as MeshGradientUniforms,
+        options as Partial<MeshGradientOptions>
+      )
+      return
     case 'aurora':
-      uniforms = createAuroraUniforms(shaderOptions as AuroraOptions) as ShaderUniforms<T>
-      colorNode = aurora(uniforms as AuroraUniforms)
-      break
+      updateAuroraUniforms(uniforms as AuroraUniforms, options as Partial<AuroraOptions>)
+      return
     case 'shaderGradient':
-      uniforms = createShaderGradientUniforms(
-        shaderOptions as ShaderGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = shaderGradient(uniforms as ShaderGradientUniforms)
-      break
+      updateShaderGradientUniforms(
+        uniforms as ShaderGradientUniforms,
+        options as Partial<ShaderGradientOptions>
+      )
+      return
     case 'paperShading':
-      uniforms = createPaperShadingUniforms(
-        shaderOptions as PaperShadingOptions
-      ) as ShaderUniforms<T>
-      colorNode = paperShading(uniforms as PaperShadingUniforms)
-      break
-    default:
-      throw new Error(`Unknown shader type: ${type}`)
+      updatePaperShadingUniforms(
+        uniforms as PaperShadingUniforms,
+        options as Partial<PaperShadingOptions>
+      )
   }
+}
+
+function applyMaterialOptions(
+  material: MeshBasicNodeMaterial,
+  colorNode: TSLNode,
+  options?: MaterialOptions
+): void {
+  const {
+    transparent = false,
+    side = 'double',
+    opacity = 1,
+    depthTest = true,
+    depthWrite = true,
+  } = options || {}
 
-  // Create material
-  const material = new MeshBasicNodeMaterial()
-  material.colorNode = transparent ? vec4(colorNode, opacity) : colorNode
   material.transparent = transparent
   material.side = sideMap[side] || DoubleSide
   material.depthTest = depthTest
   material.depthWrite = depthWrite
+  material.colorNode = transparent ? vec4(colorNode, opacity) : colorNode
+}
+
+// ============================================
+// Factory Functions
+// ============================================
+
+/**
+ * Create a shader material from a shader type
+ */
+export function createShaderMaterial<T extends ShaderType>(
+  type: T,
+  shaderOptions?: ShaderOptions<T>,
+  materialOptions?: MaterialOptions
+): ShaderMaterialResult<T> {
+  const uniforms = createShaderUniforms(type, shaderOptions)
+  const colorNode = createShaderColorNode(type, uniforms)
+
+  // Create material
+  const material = new MeshBasicNodeMaterial()
+  applyMaterialOptions(material, colorNode, materialOptions)
 
   // Update function
   const update = (options: Partial<ShaderOptions<T>>) => {
-    switch (type) {
-      case 'stripe':
-        updateStripeGradientUniforms(
-          uniforms as StripeGradientUniforms,
-          options as Partial<StripeGradientOptions>
-        )
-        break
-      case 'meshGradient':
-        updateMeshGradientUniforms(
-          uniforms as MeshGradientUniforms,
-          options as Partial<MeshGradientOptions>
-        )
-        break
-      case 'aurora':
-        updateAuroraUniforms(uniforms as AuroraUniforms, options as Partial<AuroraOptions>)
-        break
-      case 'shaderGradient':
-        updateShaderGradientUniforms(
-          uniforms as ShaderGradientUniforms,
-          options as Partial<ShaderGradientOptions>
-        )
-        break
-      case 'paperShading':
-        updatePaperShadingUniforms(
-          uniforms as PaperShadingUniforms,
-          options as Partial<PaperShadingOptions>
-        )
-        break
-    }
+    updateShaderUniforms(type, uniforms, options)
   }
 
   // Dispose function

package/layers/shader/app/shaders/layers/paperShading.ts

@@ -9,6 +9,18 @@ import { grain as grainFn, paperTexture } from '../common/grain'
 import { fbm2D, simplexNoise2D } from '../common/noise'
 import type { FloatUniform, TSLNode } from '../types'
 
+const DEFAULT_PAPER_SHADING_OPTIONS = {
+  paperColor: '#f5f0e6',
+  inkColor: '#1a1a1a',
+  inkColor2: '#3d5a80',
+  speed: 0.1,
+  textureIntensity: 0.15,
+  flowIntensity: 1,
+  grainIntensity: 0.08,
+  bleed: 0.5,
+  edgeDarkness: 0.3,
+} as const
+
 export type PaperShadingOptions = {
   /** Base paper color */
   paperColor?: string
@@ -49,16 +61,16 @@ export function createPaperShadingUniforms(
   options: PaperShadingOptions = {}
 ): PaperShadingUniforms {
   const {
-    paperColor = '#f5f0e6',
-    inkColor = '#1a1a1a',
-    inkColor2 = '#3d5a80',
-    speed = 0.1,
-    textureIntensity = 0.15,
-    flowIntensity = 1,
-    grainIntensity = 0.08,
-    bleed = 0.5,
-    edgeDarkness = 0.3,
-  } = options
+    paperColor,
+    inkColor,
+    inkColor2,
+    speed,
+    textureIntensity,
+    flowIntensity,
+    grainIntensity,
+    bleed,
+    edgeDarkness,
+  } = { ...DEFAULT_PAPER_SHADING_OPTIONS, ...options }
 
   return {
     paperColor: uniform(new Color(paperColor)),

package/layers/shader/app/shaders/layers/shaderGradient.ts

@@ -8,6 +8,31 @@ import { cos, mix, pow, sin, smoothstep, time as tslTime, uniform, uv, vec2, vec
 import { fbm2D, simplexNoise2D } from '../common/noise'
 import type { FloatUniform, TSLNode } from '../types'
 
+const DEFAULT_SHADER_GRADIENT_OPTIONS = {
+  color1: '#ff5722',
+  color2: '#673ab7',
+  color3: '#2196f3',
+  speed: 0.4,
+  morphIntensity: 1,
+  grain: 0.03,
+  lightX: 0.5,
+  lightY: 0.5,
+  brightness: 1,
+  zoom: 1,
+} as const
+
+function setNumberUniform(uniform: FloatUniform, value: number | undefined): void {
+  if (value !== undefined) {
+    uniform.value = value
+  }
+}
+
+function setColorUniform(uniform: TSLNode, value: string | undefined): void {
+  if (value !== undefined) {
+    uniform.value = new Color(value)
+  }
+}
+
 export type ShaderGradientOptions = {
   /** Primary color */
   color1?: string
@@ -51,17 +76,17 @@ export function createShaderGradientUniforms(
   options: ShaderGradientOptions = {}
 ): ShaderGradientUniforms {
   const {
-    color1 = '#ff5722',
-    color2 = '#673ab7',
-    color3 = '#2196f3',
-    speed = 0.4,
-    morphIntensity = 1,
-    grain = 0.03,
-    lightX = 0.5,
-    lightY = 0.5,
-    brightness = 1,
-    zoom = 1,
-  } = options
+    color1,
+    color2,
+    color3,
+    speed,
+    morphIntensity,
+    grain,
+    lightX,
+    lightY,
+    brightness,
+    zoom,
+  } = { ...DEFAULT_SHADER_GRADIENT_OPTIONS, ...options }
 
   return {
     color1: uniform(new Color(color1)),
@@ -139,14 +164,14 @@ export function updateShaderGradientUniforms(
   uniforms: ShaderGradientUniforms,
   options: Partial<ShaderGradientOptions>
 ): void {
-  if (options.color1 !== undefined) uniforms.color1.value = new Color(options.color1)
-  if (options.color2 !== undefined) uniforms.color2.value = new Color(options.color2)
-  if (options.color3 !== undefined) uniforms.color3.value = new Color(options.color3)
-  if (options.speed !== undefined) uniforms.speed.value = options.speed
-  if (options.morphIntensity !== undefined) uniforms.morphIntensity.value = options.morphIntensity
-  if (options.grain !== undefined) uniforms.grain.value = options.grain
-  if (options.lightX !== undefined) uniforms.lightX.value = options.lightX
-  if (options.lightY !== undefined) uniforms.lightY.value = options.lightY
-  if (options.brightness !== undefined) uniforms.brightness.value = options.brightness
-  if (options.zoom !== undefined) uniforms.zoom.value = options.zoom
+  setColorUniform(uniforms.color1, options.color1)
+  setColorUniform(uniforms.color2, options.color2)
+  setColorUniform(uniforms.color3, options.color3)
+  setNumberUniform(uniforms.speed, options.speed)
+  setNumberUniform(uniforms.morphIntensity, options.morphIntensity)
+  setNumberUniform(uniforms.grain, options.grain)
+  setNumberUniform(uniforms.lightX, options.lightX)
+  setNumberUniform(uniforms.lightY, options.lightY)
+  setNumberUniform(uniforms.brightness, options.brightness)
+  setNumberUniform(uniforms.zoom, options.zoom)
 }

package/layers/shader/app/utils/tsl/tween.ts

@@ -14,11 +14,9 @@ export type TweenHandle = {
  */
 export function tweenUniform(
   uniformNode: { value: number },
-  from: number,
-  to: number,
-  duration: number,
-  easing?: (t: number) => number
+  ...args: [from: number, to: number, duration: number, easing?: (t: number) => number]
 ): TweenHandle {
+  const [from, to, duration, easing] = args
   let startTime: number | null = null
   let cancelled = false
   let resolvePromise: () => void

package/layers/shader/package.json

@@ -10,6 +10,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@vueuse/core": "catalog:"
+    "@vueuse/core": "catalog:",
+    "three": "catalog:"
+  },
+  "devDependencies": {
+    "@types/three": "catalog:"
   }
 }