kmcom-nuxt-layers 1.0.1

package/layers/shader/app/components/Material/AmbientGradientMesh.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { Color, DoubleSide } from 'three'
+import {
+  add,
+  cos,
+  length,
+  mix,
+  mul,
+  sin,
+  smoothstep,
+  sub,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    color1: '#667eea',
+    color2: '#764ba2',
+    color3: '#f093fb',
+    color4: '#f5576c',
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+  }
+)
+
+// Create reactive uniforms
+const speedUniform = uniform(props.speed)
+const intensityUniform = uniform(props.intensity)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const color1Uniform = uniform(new Color(props.color1))
+const color2Uniform = uniform(new Color(props.color2))
+const color3Uniform = uniform(new Color(props.color3))
+const color4Uniform = uniform(new Color(props.color4))
+
+// Watch prop changes
+watch(
+  () => props.speed,
+  (val) => (speedUniform.value = val)
+)
+watch(
+  () => props.intensity,
+  (val) => (intensityUniform.value = val)
+)
+watch(
+  () => props.mouseX,
+  (val) => (mouseXUniform.value = val)
+)
+watch(
+  () => props.mouseY,
+  (val) => (mouseYUniform.value = val)
+)
+watch(
+  () => props.mouseStrength,
+  (val) => (mouseStrengthUniform.value = val)
+)
+watch(
+  () => props.color1,
+  (val) => (color1Uniform.value = new Color(val))
+)
+watch(
+  () => props.color2,
+  (val) => (color2Uniform.value = new Color(val))
+)
+watch(
+  () => props.color3,
+  (val) => (color3Uniform.value = new Color(val))
+)
+watch(
+  () => props.color4,
+  (val) => (color4Uniform.value = new Color(val))
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Time animation
+  const time = tslTime.mul(speedUniform).mul(0.2)
+
+  // UV coordinates
+  const uvCoord = uv()
+
+  // Mouse offset
+  const mouseOffset = vec2(
+    sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
+    sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+  )
+  const adjustedUV = add(uvCoord, mul(mouseOffset, 0.1))
+
+  // Create smooth flowing noise
+  const n1UV = add(mul(adjustedUV, 1.5), vec2(time, mul(time, 0.5)))
+  const n1 = add(mul(simplexNoise2D(n1UV), 0.5), 0.5)
+
+  const n2UV = add(mul(adjustedUV, 2.0), vec2(mul(time, -0.7), mul(time, 0.3)))
+  const n2 = add(mul(simplexNoise2D(n2UV), 0.5), 0.5)
+
+  const n3UV = add(mul(adjustedUV, 1.2), vec2(mul(time, 0.4), mul(time, -0.6)))
+  const n3 = add(mul(simplexNoise2D(n3UV), 0.5), 0.5)
+
+  const n4 = add(
+    mul(
+      fbm2D(add(mul(adjustedUV, 0.8), mul(time, 0.2)), { octaves: 3, lacunarity: 2.0, gain: 0.5 }),
+      0.5
+    ),
+    0.5
+  )
+
+  // Animated gradient positions (mesh control points)
+  const p1 = vec2(add(0.2, mul(sin(mul(time, 0.5)), 0.2)), add(0.3, mul(cos(mul(time, 0.4)), 0.2)))
+  const p2 = vec2(
+    add(0.8, mul(cos(mul(time, 0.6)), 0.15)),
+    add(0.2, mul(sin(mul(time, 0.5)), 0.15))
+  )
+  const p3 = vec2(add(0.3, mul(sin(mul(time, 0.7)), 0.2)), add(0.8, mul(cos(mul(time, 0.3)), 0.15)))
+  const p4 = vec2(add(0.7, mul(cos(mul(time, 0.4)), 0.2)), add(0.7, mul(sin(mul(time, 0.6)), 0.2)))
+
+  // Distance-based blending from each control point
+  const d1 = sub(1.0, smoothstep(0.0, 0.8, length(sub(adjustedUV, p1))))
+  const d2 = sub(1.0, smoothstep(0.0, 0.8, length(sub(adjustedUV, p2))))
+  const d3 = sub(1.0, smoothstep(0.0, 0.8, length(sub(adjustedUV, p3))))
+  const d4 = sub(1.0, smoothstep(0.0, 0.8, length(sub(adjustedUV, p4))))
+
+  // Color mixing based on distance and noise
+  let colorNode = mul(vec3(color1Uniform), d1)
+  colorNode = mix(colorNode, vec3(color2Uniform), mul(d2, n1))
+  colorNode = mix(colorNode, vec3(color3Uniform), mul(d3, n2))
+  colorNode = mix(colorNode, vec3(color4Uniform), mul(d4, n3))
+
+  // Add subtle brightness variation
+  const brightness = add(0.9, mul(0.1, n4))
+  colorNode = mul(colorNode, brightness, intensityUniform)
+
+  // Soft vignette
+  const dist = length(sub(uvCoord, 0.5))
+  const vig = sub(1.0, mul(dist, 0.3))
+  colorNode = mul(colorNode, vig)
+
+  mat.colorNode = colorNode
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

package/layers/shader/app/components/Material/AmbientNebula.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { Color, DoubleSide } from 'three'
+import {
+  add,
+  exp,
+  length,
+  mix,
+  mul,
+  smoothstep,
+  sub,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { fbm3D, ridgedFbm2d, voronoi2D } from '../../shaders/common/noise'
+import { cosinePalette } from '../../shaders/common/palette'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    color1: '#1a0a2e',
+    color2: '#ff6b6b',
+    color3: '#4ecdc4',
+    color4: '#ffe66d',
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+  }
+)
+
+// Create reactive uniforms
+const speedUniform = uniform(props.speed)
+const intensityUniform = uniform(props.intensity)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const color1Uniform = uniform(new Color(props.color1))
+const color2Uniform = uniform(new Color(props.color2))
+const color3Uniform = uniform(new Color(props.color3))
+const color4Uniform = uniform(new Color(props.color4))
+
+// Watch prop changes
+watch(
+  () => props.speed,
+  (val) => (speedUniform.value = val)
+)
+watch(
+  () => props.intensity,
+  (val) => (intensityUniform.value = val)
+)
+watch(
+  () => props.mouseX,
+  (val) => (mouseXUniform.value = val)
+)
+watch(
+  () => props.mouseY,
+  (val) => (mouseYUniform.value = val)
+)
+watch(
+  () => props.mouseStrength,
+  (val) => (mouseStrengthUniform.value = val)
+)
+watch(
+  () => props.color1,
+  (val) => (color1Uniform.value = new Color(val))
+)
+watch(
+  () => props.color2,
+  (val) => (color2Uniform.value = new Color(val))
+)
+watch(
+  () => props.color3,
+  (val) => (color3Uniform.value = new Color(val))
+)
+watch(
+  () => props.color4,
+  (val) => (color4Uniform.value = new Color(val))
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Time animation
+  const time = tslTime.mul(speedUniform).mul(0.15)
+
+  // UV centered at origin
+  const uvCoord = sub(uv(), 0.5)
+
+  // Mouse offset
+  const mouseOffset = vec2(
+    sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
+    sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+  )
+  const adjustedUV = add(uvCoord, mouseOffset)
+
+  // Multiple noise layers for depth
+  const n1Pos = vec3(mul(adjustedUV.x, 2.0), mul(adjustedUV.y, 2.0), mul(time, 0.5))
+  const n1 = add(mul(fbm3D(n1Pos, { octaves: 5, lacunarity: 2.0, gain: 0.5 }), 0.5), 0.5)
+
+  const n2Pos = vec3(
+    add(mul(adjustedUV.x, 3.0), 10.0),
+    add(mul(adjustedUV.y, 3.0), 10.0),
+    mul(time, 0.3)
+  )
+  const n2 = add(mul(fbm3D(n2Pos, { octaves: 4, lacunarity: 2.0, gain: 0.5 }), 0.5), 0.5)
+
+  const n3 = add(
+    mul(
+      ridgedFbm2d(add(mul(adjustedUV, 4.0), mul(time, 0.2)), {
+        octaves: 4,
+        lacunarity: 2.0,
+        gain: 0.5,
+      }),
+      0.5
+    ),
+    0.5
+  )
+
+  // Voronoi for stars/clusters
+  const vor = voronoi2D(add(mul(adjustedUV, 8.0), mul(time, 0.1)), 1.0)
+  const stars = mul(smoothstep(0.1, 0.0, vor.x), vor.y)
+
+  // Color layers
+  const layer1 = mix(vec3(color1Uniform), vec3(color2Uniform), n1)
+  const layer2 = mix(vec3(color3Uniform), vec3(color4Uniform), n2)
+
+  // Cosine palette for extra color variation
+  const palette = cosinePalette(
+    n3,
+    vec3(0.5, 0.5, 0.5),
+    vec3(0.5, 0.5, 0.5),
+    vec3(1.0, 0.7, 0.4),
+    vec3(0.0, 0.15, 0.2)
+  )
+
+  // Combine layers
+  let colorNode = mix(layer1, layer2, mul(n2, 0.7))
+  colorNode = mix(colorNode, palette, mul(n3, 0.4))
+
+  // Add central glow
+  const dist = length(uvCoord)
+  const glow = mul(exp(mul(dist, -2.0)), 0.5)
+  colorNode = add(colorNode, mul(vec3(color2Uniform), glow))
+
+  // Add stars
+  colorNode = add(colorNode, mul(vec3(1.0, 0.95, 0.9), stars, 2.0))
+
+  // Vignette
+  const vig = sub(1.0, mul(dist, 0.8))
+  colorNode = mul(colorNode, vig, intensityUniform)
+
+  mat.colorNode = colorNode
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

package/layers/shader/app/components/Material/AmbientOcean.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { Color, DoubleSide } from 'three'
+import {
+  add,
+  exp,
+  length,
+  mix,
+  mul,
+  pow,
+  sin,
+  smoothstep,
+  sub,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    color1: '#0a1628',
+    color2: '#1e3a5f',
+    color3: '#7ec8e3',
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: true,
+    mouseStrength: 0.5,
+  }
+)
+
+// Create reactive uniforms
+const speedUniform = uniform(props.speed)
+const intensityUniform = uniform(props.intensity)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const color1Uniform = uniform(new Color(props.color1))
+const color2Uniform = uniform(new Color(props.color2))
+const color3Uniform = uniform(new Color(props.color3))
+
+// Watch prop changes
+watch(
+  () => props.speed,
+  (val) => (speedUniform.value = val)
+)
+watch(
+  () => props.intensity,
+  (val) => (intensityUniform.value = val)
+)
+watch(
+  () => props.mouseX,
+  (val) => (mouseXUniform.value = val)
+)
+watch(
+  () => props.mouseY,
+  (val) => (mouseYUniform.value = val)
+)
+watch(
+  () => props.mouseStrength,
+  (val) => (mouseStrengthUniform.value = val)
+)
+watch(
+  () => props.color1,
+  (val) => (color1Uniform.value = new Color(val))
+)
+watch(
+  () => props.color2,
+  (val) => (color2Uniform.value = new Color(val))
+)
+watch(
+  () => props.color3,
+  (val) => (color3Uniform.value = new Color(val))
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Time animation
+  const time = tslTime.mul(speedUniform).mul(0.3)
+
+  // UV coordinates
+  const uvCoord = uv()
+
+  // Mouse position for ripples
+  const mousePos = vec2(mouseXUniform, mouseYUniform)
+  const mouseDist = length(sub(uvCoord, mousePos))
+
+  // Mouse ripple effect
+  const ripple = mul(
+    sin(sub(mul(mouseDist, 30.0), mul(time, 5.0))),
+    exp(mul(mouseDist, -5.0)),
+    props.mouseInteraction ? mouseStrengthUniform : 0
+  )
+
+  // Wave layers
+  const wave1 = add(mul(sin(add(mul(uvCoord.x, 8.0), time, mul(ripple, 2.0))), 0.5), 0.5)
+  const wave2 = add(
+    mul(sin(add(sub(mul(uvCoord.x, 12.0), mul(time, 0.7)), mul(uvCoord.y, 3.0))), 0.5),
+    0.5
+  )
+  const wave3 = simplexNoise2D(
+    vec2(add(mul(uvCoord.x, 4.0), mul(time, 0.5)), add(mul(uvCoord.y, 2.0), mul(time, 0.3)))
+  )
+
+  // Caustics-like pattern
+  const caustic1UV = add(mul(uvCoord, 10.0), mul(time, 0.5))
+  const caustic1 = add(mul(simplexNoise2D(caustic1UV), 0.5), 0.5)
+  const caustic2UV = add(sub(mul(uvCoord, 15.0), mul(time, 0.3)), 5.0)
+  const caustic2 = add(mul(simplexNoise2D(caustic2UV), 0.5), 0.5)
+  const caustics = pow(mul(caustic1, caustic2), 2.0)
+
+  // Foam on wave peaks
+  const foam = smoothstep(0.7, 0.9, mul(wave1, wave2))
+
+  // Depth gradient
+  const depth = add(mul(uvCoord.y, 0.5), 0.3)
+
+  // Color mixing
+  let colorNode = mix(vec3(color1Uniform), vec3(color2Uniform), add(depth, mul(wave3, 0.2)))
+  colorNode = mix(colorNode, vec3(color3Uniform), mul(caustics, 0.3, intensityUniform))
+  colorNode = add(colorNode, mul(vec3(1.0, 1.0, 1.0), foam, 0.3))
+
+  // Add shimmer
+  const shimmerUV = add(mul(uvCoord, 30.0), mul(time, 2.0))
+  const shimmer = mul(simplexNoise2D(shimmerUV), 0.05, intensityUniform)
+  colorNode = add(colorNode, shimmer)
+
+  // Subtle vignette
+  const dist = length(sub(uvCoord, 0.5))
+  const vig = sub(1.0, mul(dist, 0.5))
+  colorNode = mul(colorNode, vig)
+
+  mat.colorNode = colorNode
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

package/layers/shader/app/components/Material/Fresnel.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Color, DoubleSide } from 'three'
+import {
+  dot,
+  float,
+  mix,
+  normalize,
+  normalView,
+  positionViewDirection,
+  pow,
+  uniform,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+
+const props = withDefaults(
+  defineProps<{
+    baseColor?: string
+    fresnelColor?: string
+    power?: number
+    intensity?: number
+    transparent?: boolean
+  }>(),
+  {
+    baseColor: '#1e1b4b',
+    fresnelColor: '#22d3ee',
+    power: 2,
+    intensity: 1,
+    transparent: false,
+  }
+)
+
+// Create reactive uniforms
+const baseColorUniform = uniform(new Color(props.baseColor))
+const fresnelColorUniform = uniform(new Color(props.fresnelColor))
+const powerUniform = uniform(props.power)
+const intensityUniform = uniform(props.intensity)
+
+// Watch prop changes
+watch(
+  () => props.baseColor,
+  (val) => {
+    baseColorUniform.value = new Color(val)
+  }
+)
+watch(
+  () => props.fresnelColor,
+  (val) => {
+    fresnelColorUniform.value = new Color(val)
+  }
+)
+watch(
+  () => props.power,
+  (val) => {
+    powerUniform.value = val
+  }
+)
+watch(
+  () => props.intensity,
+  (val) => {
+    intensityUniform.value = val
+  }
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Calculate fresnel with reactive uniforms
+  const viewDir = normalize(positionViewDirection.negate())
+  const normal = normalize(normalView)
+  const nDotV = dot(normal, viewDir).clamp(0, 1)
+  const fresnelFactor = pow(float(1).sub(nDotV), powerUniform).mul(intensityUniform)
+
+  // Mix colors based on fresnel using reactive uniforms
+  const colorNode = mix(vec3(baseColorUniform), vec3(fresnelColorUniform), fresnelFactor)
+
+  mat.colorNode = colorNode as any
+  mat.transparent = props.transparent
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>