kmcom-nuxt-layers 1.0.1

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

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { Color, DoubleSide } from 'three'
+import { mix, sin, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import type { UniformNode } from 'three/webgpu'
+import type { TSLNode } from '../../types'
+
+const props = withDefaults(
+  defineProps<{
+    colors?: string[]
+    angle?: number
+    type?: 'linear' | 'radial'
+    animated?: boolean
+    speed?: number
+    transparent?: boolean
+    /** Mouse X position (0-1) for interaction */
+    mouseX?: number
+    /** Mouse Y position (0-1) for interaction */
+    mouseY?: number
+    /** Enable mouse interaction */
+    mouseInteraction?: boolean
+    /** Mouse interaction strength */
+    mouseStrength?: number
+  }>(),
+  {
+    colors: () => ['#4f46e5', '#7c3aed', '#ec4899'],
+    angle: 0,
+    type: 'linear',
+    animated: false,
+    speed: 1,
+    transparent: false,
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: false,
+    mouseStrength: 0.3,
+  }
+)
+
+// Create reactive uniforms for all animatable properties
+const angleUniform = uniform(props.angle)
+const speedUniform = uniform(props.speed)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+
+// Create color uniforms (up to 5 colors supported) - stored as typed array
+const colorUniforms: UniformNode<Color>[] = [
+  uniform(new Color(props.colors[0] || '#4f46e5')),
+  uniform(new Color(props.colors[1] || '#7c3aed')),
+  uniform(new Color(props.colors[2] || '#ec4899')),
+  uniform(new Color(props.colors[3] || '#ec4899')),
+  uniform(new Color(props.colors[4] || '#ec4899')),
+]
+
+// Watch prop changes and update uniforms
+watch(
+  () => props.angle,
+  (val) => {
+    angleUniform.value = val
+  }
+)
+watch(
+  () => props.speed,
+  (val) => {
+    speedUniform.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.colors,
+  (colors) => {
+    colors.forEach((c, i) => {
+      if (i < colorUniforms.length) {
+        colorUniforms[i]!.value = new Color(c)
+      }
+    })
+  },
+  { deep: true }
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+  const colorCount = props.colors.length
+
+  // Get UV coordinates
+  let t: TSLNode = uv().y
+
+  // Apply angle rotation for linear gradient (using uniform for reactivity)
+  if (props.type === 'linear') {
+    const rad = angleUniform.mul(Math.PI / 180)
+    const cosVal = rad.cos()
+    const sinVal = rad.sin()
+    t = uv().x.mul(sinVal).add(uv().y.mul(cosVal))
+  }
+
+  // Radial gradient uses distance from center
+  if (props.type === 'radial') {
+    let center = uv().sub(0.5)
+    // Add mouse interaction offset
+    if (props.mouseInteraction) {
+      const mouseOffset = vec3(
+        mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
+        mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
+        0
+      )
+      center = center.sub(mouseOffset.xy)
+    }
+    t = center.length().mul(2)
+  }
+
+  // Add mouse interaction for linear gradients
+  if (props.type === 'linear' && props.mouseInteraction) {
+    t = t.add(mouseXUniform.sub(0.5).mul(mouseStrengthUniform))
+  }
+
+  // Add animation
+  if (props.animated) {
+    t = t.add(sin(tslTime.mul(speedUniform)).mul(0.2))
+  }
+
+  // Build gradient from colors using uniforms
+  // Use type assertion since we know the array is initialized
+  const c0 = colorUniforms[0] as UniformNode<Color>
+  const c1 = colorUniforms[1] as UniformNode<Color>
+  const c2 = colorUniforms[2] as UniformNode<Color>
+  const c3 = colorUniforms[3] as UniformNode<Color>
+  const c4 = colorUniforms[4] as UniformNode<Color>
+
+  let colorNode: TSLNode = vec3(c0 as unknown as TSLNode)
+
+  if (colorCount === 2) {
+    colorNode = mix(vec3(c0 as unknown as TSLNode), vec3(c1 as unknown as TSLNode), t)
+  } else if (colorCount >= 3) {
+    // Multi-stop gradient using pre-extracted uniforms
+    const uniforms = [c0, c1, c2, c3, c4]
+    const segments = colorCount - 1
+
+    for (let i = 0; i < segments && i < 4; i++) {
+      const localT = t.mul(segments).sub(i).clamp(0, 1)
+      const currColor = uniforms[i] as unknown as TSLNode
+      const nextColor = uniforms[i + 1] as unknown as TSLNode
+
+      if (i === 0) {
+        colorNode = mix(vec3(currColor), vec3(nextColor), localT)
+      } else {
+        const prevT = t
+          .mul(segments)
+          .sub(i - 1)
+          .clamp(0, 1)
+        colorNode = mix(colorNode, mix(vec3(currColor), vec3(nextColor), localT), prevT.step(1))
+      }
+    }
+  }
+
+  mat.colorNode = colorNode
+  mat.transparent = props.transparent
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

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

@@ -0,0 +1,232 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { DoubleSide, type Texture } from 'three'
+import {
+  float,
+  mix,
+  sin,
+  smoothstep,
+  texture,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+  vec4,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial, TextureLoader } from 'three/webgpu'
+import type { TSLNode } from '../../types'
+import { simplexNoise2D } from '../../utils/tsl/noise'
+
+const props = withDefaults(
+  defineProps<{
+    /** Image source URL or path */
+    src: string
+    /** Distortion effect strength (0 = none) */
+    distortion?: number
+    /** Distortion speed */
+    distortionSpeed?: number
+    /** Enable mouse-reactive ripple effect */
+    mouseRipple?: boolean
+    /** Ripple strength */
+    rippleStrength?: number
+    /** Zoom level (1 = normal) */
+    zoom?: number
+    /** Grayscale amount (0-1) */
+    grayscale?: number
+    /** RGB shift/chromatic aberration amount */
+    rgbShift?: number
+    /** Enable vignette effect */
+    vignette?: boolean
+    /** Vignette intensity */
+    vignetteIntensity?: number
+    /** Transparent background */
+    transparent?: boolean
+    /** Mouse X position (0-1) for external control */
+    mouseX?: number
+    /** Mouse Y position (0-1) for external control */
+    mouseY?: number
+  }>(),
+  {
+    distortion: 0,
+    distortionSpeed: 1,
+    mouseRipple: false,
+    rippleStrength: 0.02,
+    zoom: 1,
+    grayscale: 0,
+    rgbShift: 0,
+    vignette: false,
+    vignetteIntensity: 0.5,
+    transparent: false,
+    mouseX: 0.5,
+    mouseY: 0.5,
+  }
+)
+
+const loadedTexture = ref<Texture | null>(null)
+const isLoading = ref(true)
+const error = ref<Error | null>(null)
+
+// Reactive uniforms
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const distortionUniform = uniform(props.distortion)
+const distortionSpeedUniform = uniform(props.distortionSpeed)
+const rippleStrengthUniform = uniform(props.rippleStrength)
+const zoomUniform = uniform(props.zoom)
+const grayscaleUniform = uniform(props.grayscale)
+const rgbShiftUniform = uniform(props.rgbShift)
+const vignetteIntensityUniform = uniform(props.vignetteIntensity)
+
+// Watch all prop changes for reactivity
+watch(
+  () => props.mouseX,
+  (val) => {
+    mouseXUniform.value = val
+  }
+)
+watch(
+  () => props.mouseY,
+  (val) => {
+    mouseYUniform.value = val
+  }
+)
+watch(
+  () => props.distortion,
+  (val) => {
+    distortionUniform.value = val
+  }
+)
+watch(
+  () => props.distortionSpeed,
+  (val) => {
+    distortionSpeedUniform.value = val
+  }
+)
+watch(
+  () => props.rippleStrength,
+  (val) => {
+    rippleStrengthUniform.value = val
+  }
+)
+watch(
+  () => props.zoom,
+  (val) => {
+    zoomUniform.value = val
+  }
+)
+watch(
+  () => props.grayscale,
+  (val) => {
+    grayscaleUniform.value = val
+  }
+)
+watch(
+  () => props.rgbShift,
+  (val) => {
+    rgbShiftUniform.value = val
+  }
+)
+watch(
+  () => props.vignetteIntensity,
+  (val) => {
+    vignetteIntensityUniform.value = val
+  }
+)
+
+// Load texture
+watch(
+  () => props.src,
+  async (src) => {
+    if (!src) return
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const loader = new TextureLoader()
+      loadedTexture.value = await loader.loadAsync(src)
+    } catch (e) {
+      error.value = e as Error
+      console.error('Failed to load texture:', e)
+    } finally {
+      isLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+const material = computed(() => {
+  if (!loadedTexture.value) return null
+
+  const mat = new MeshBasicNodeMaterial()
+  const tex = loadedTexture.value
+
+  // Start with base UV
+  let uvCoord: TSLNode = uv()
+
+  // Apply zoom (centered) - using uniform for reactivity
+  const zoomFactor = float(1).div(zoomUniform)
+  const zoomOffset = float(1).sub(float(1).div(zoomUniform)).mul(0.5)
+  uvCoord = uvCoord.mul(zoomFactor).add(zoomOffset)
+
+  // Apply distortion using uniforms
+  const animatedUV = uvCoord.add(tslTime.mul(distortionSpeedUniform))
+  const noiseVal = simplexNoise2D(animatedUV.mul(3))
+  const distortedUV = uvCoord.add(noiseVal.mul(distortionUniform).mul(0.1))
+  // Use step to conditionally apply distortion
+  const hasDistortion = distortionUniform.greaterThan(0.001)
+  uvCoord = mix(uvCoord, distortedUV, hasDistortion) as TSLNode
+
+  // Apply mouse ripple effect
+  if (props.mouseRipple) {
+    const mousePos = vec2(mouseXUniform, mouseYUniform)
+    const diff = uvCoord.sub(mousePos)
+    const dist = diff.length()
+    const ripple = sin(dist.mul(30).sub(tslTime.mul(3))).mul(rippleStrengthUniform)
+    const falloff = smoothstep(0.5, 0, dist)
+    uvCoord = uvCoord.add(diff.normalize().mul(ripple).mul(falloff))
+  }
+
+  // Sample the texture with RGB shift for chromatic aberration
+  const shift = rgbShiftUniform.mul(0.01)
+  const rChannel = texture(tex, uvCoord.add(vec2(shift, 0))).r
+  const gChannel = texture(tex, uvCoord).g
+  const bChannel = texture(tex, uvCoord.sub(vec2(shift, 0))).b
+  const aChannel = texture(tex, uvCoord).a
+
+  let colorNode: TSLNode = vec4(rChannel, gChannel, bChannel, aChannel)
+
+  // Apply grayscale using uniform
+  const rgb = vec3(colorNode.x, colorNode.y, colorNode.z)
+  const gray = rgb.dot(vec3(0.299, 0.587, 0.114))
+  const grayColor = vec3(gray, gray, gray)
+  const blendedRgb = mix(rgb, grayColor, grayscaleUniform)
+  colorNode = vec4(blendedRgb.x, blendedRgb.y, blendedRgb.z, colorNode.w)
+
+  // Apply vignette
+  if (props.vignette) {
+    const center = vec2(0.5, 0.5)
+    const dist = uv().sub(center).length()
+    const vignetteAmount = smoothstep(0.2, 0.8, dist).mul(vignetteIntensityUniform)
+    colorNode = colorNode.mul(float(1).sub(vignetteAmount))
+  }
+
+  mat.colorNode = colorNode
+  mat.transparent = props.transparent
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({
+  material,
+  isLoading,
+  error,
+  loadedTexture,
+})
+</script>
+
+<template>
+  <primitive v-if="material" :object="material" attach="material" />
+</template>

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

@@ -0,0 +1,79 @@
+<!-- eslint-disable vue/require-default-prop -->
+<script setup lang="ts">
+import { BackSide, DoubleSide, FrontSide } from 'three'
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu'
+import type { TSLNode } from '../../types'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'basic' | 'standard'
+    colorNode?: TSLNode
+    opacityNode?: TSLNode
+    normalNode?: TSLNode
+    emissiveNode?: TSLNode
+    metalnessNode?: TSLNode
+    roughnessNode?: TSLNode
+    positionNode?: TSLNode
+    transparent?: boolean
+    side?: 'front' | 'back' | 'double'
+    wireframe?: boolean
+    flatShading?: boolean
+    depthTest?: boolean
+    depthWrite?: boolean
+  }>(),
+  {
+    type: 'basic',
+    transparent: false,
+    side: 'front',
+    wireframe: false,
+    flatShading: false,
+    depthTest: true,
+    depthWrite: true,
+  }
+)
+
+const sideMap = {
+  front: FrontSide,
+  back: BackSide,
+  double: DoubleSide,
+}
+
+const material = computed(() => {
+  const mat =
+    props.type === 'standard' ? new MeshStandardNodeMaterial() : new MeshBasicNodeMaterial()
+
+  // Apply node properties
+  if (props.colorNode) mat.colorNode = props.colorNode
+  if (props.opacityNode) {
+    mat.opacityNode = props.opacityNode
+    mat.transparent = true
+  }
+  if (props.normalNode) mat.normalNode = props.normalNode
+  if (props.positionNode) mat.positionNode = props.positionNode
+
+  // Standard material specific
+  if (mat instanceof MeshStandardNodeMaterial) {
+    if (props.emissiveNode) mat.emissiveNode = props.emissiveNode
+    if (props.metalnessNode) mat.metalnessNode = props.metalnessNode
+    if (props.roughnessNode) mat.roughnessNode = props.roughnessNode
+    mat.flatShading = props.flatShading
+  }
+
+  // Standard properties
+  mat.transparent = props.transparent || !!props.opacityNode
+  mat.side = sideMap[props.side]
+  mat.wireframe = props.wireframe
+  mat.depthTest = props.depthTest
+  mat.depthWrite = props.depthWrite
+
+  return mat
+})
+
+// Expose material for parent access
+defineExpose({ material })
+</script>
+
+<template>
+  <TresMeshBasicMaterial v-if="type === 'basic'" v-bind="material" />
+  <TresMeshStandardMaterial v-else v-bind="material" />
+</template>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { Color, DoubleSide } from 'three'
+import { mix, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { fbm, simplexNoise2D } from '../../utils/tsl/noise'
+
+const props = withDefaults(
+  defineProps<{
+    scale?: number
+    speed?: number
+    octaves?: number
+    baseColor?: string
+    peakColor?: string
+    type?: 'simplex' | 'fbm'
+    transparent?: boolean
+    /** Mouse X position (0-1) for interaction */
+    mouseX?: number
+    /** Mouse Y position (0-1) for interaction */
+    mouseY?: number
+    /** Enable mouse interaction */
+    mouseInteraction?: boolean
+    /** Mouse interaction strength */
+    mouseStrength?: number
+  }>(),
+  {
+    scale: 3,
+    speed: 0.5,
+    octaves: 4,
+    baseColor: '#1e1b4b',
+    peakColor: '#c084fc',
+    type: 'simplex',
+    transparent: false,
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: false,
+    mouseStrength: 0.5,
+  }
+)
+
+// Create reactive uniforms
+const scaleUniform = uniform(props.scale)
+const speedUniform = uniform(props.speed)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const baseColorUniform = uniform(new Color(props.baseColor))
+const peakColorUniform = uniform(new Color(props.peakColor))
+
+// Watch prop changes
+watch(
+  () => props.scale,
+  (val) => {
+    scaleUniform.value = val
+  }
+)
+watch(
+  () => props.speed,
+  (val) => {
+    speedUniform.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.baseColor,
+  (val) => {
+    baseColorUniform.value = new Color(val)
+  }
+)
+watch(
+  () => props.peakColor,
+  (val) => {
+    peakColorUniform.value = new Color(val)
+  }
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Animated UV with reactive uniforms
+  let animatedUV = uv().mul(scaleUniform).add(tslTime.mul(speedUniform))
+
+  // Add mouse interaction
+  if (props.mouseInteraction) {
+    const mouseOffset = vec3(
+      mouseXUniform.sub(0.5).mul(mouseStrengthUniform),
+      mouseYUniform.sub(0.5).mul(mouseStrengthUniform),
+      0
+    )
+    animatedUV = animatedUV.add(mouseOffset.xy)
+  }
+
+  // Generate noise based on type
+  let noiseValue
+  if (props.type === 'fbm') {
+    noiseValue = fbm(vec3(animatedUV.x, animatedUV.y, tslTime.mul(speedUniform.mul(0.1))), {
+      octaves: props.octaves,
+      lacunarity: 2.0,
+      gain: 0.5,
+      amplitude: 0.5,
+      frequency: 1.0,
+    })
+  } else {
+    noiseValue = simplexNoise2D(animatedUV)
+  }
+
+  // Remap noise from [-1, 1] to [0, 1]
+  const normalizedNoise = noiseValue.mul(0.5).add(0.5)
+
+  // Mix colors based on noise using reactive uniforms
+  const colorNode = mix(vec3(baseColorUniform), vec3(peakColorUniform), normalizedNoise)
+
+  mat.colorNode = colorNode as any
+  mat.transparent = props.transparent
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

package/layers/shader/app/components/Mesh/Plane.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    width?: number
+    height?: number
+    widthSegments?: number
+    heightSegments?: number
+    position?: [number, number, number]
+    rotation?: [number, number, number]
+  }>(),
+  {
+    width: 2,
+    height: 2,
+    widthSegments: 1,
+    heightSegments: 1,
+    position: () => [0, 0, 0],
+    rotation: () => [0, 0, 0],
+  }
+)
+</script>
+
+<template>
+  <TresMesh :position :rotation>
+    <TresPlaneGeometry :args="[width, height, widthSegments, heightSegments]" />
+    <slot />
+  </TresMesh>
+</template>