kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,23 +1,28 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4, floor, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, floor, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Number of colour steps per channel */
-  steps?: number
-  order?: number
-}>(), { steps: 6, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Number of colour steps per channel */
+      steps?: number
+      order?: number
+    }>(),
+    { steps: 6, order: 0 }
+  )
 
-const stepsNode = uniform(props.steps)
-watch(() => props.steps, v => { stepsNode.value = v })
+  const stepsNode = uniform(props.steps)
+  watch(
+    () => props.steps,
+    (v) => {
+      stepsNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const posterised = floor(prev.xyz.mul(stepsNode)).div(stepsNode.sub(float(1)))
     return vec4(posterised, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,39 +1,54 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color } from 'three'
-import { clamp, mix, uniform, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { clamp, mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorCenter?: string
-  colorEdge?: string
-  radius?: number
-  order?: number
-}>(), {
-  colorCenter: '#ffffff',
-  colorEdge: '#000000',
-  radius: 0.7,
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      colorCenter?: string
+      colorEdge?: string
+      radius?: number
+      order?: number
+    }>(),
+    {
+      colorCenter: '#ffffff',
+      colorEdge: '#000000',
+      radius: 0.7,
+      order: 0,
+    }
+  )
 
-const colorCenterVal = new Color(props.colorCenter)
-const colorEdgeVal = new Color(props.colorEdge)
-const colorCenterNode = uniform(colorCenterVal)
-const colorEdgeNode = uniform(colorEdgeVal)
-const radiusNode = uniform(props.radius)
+  const colorCenterVal = new Color(props.colorCenter)
+  const colorEdgeVal = new Color(props.colorEdge)
+  const colorCenterNode = uniform(colorCenterVal)
+  const colorEdgeNode = uniform(colorEdgeVal)
+  const radiusNode = uniform(props.radius)
 
-watch(() => props.colorCenter, v => { colorCenterNode.value.set(v) })
-watch(() => props.colorEdge, v => { colorEdgeNode.value.set(v) })
-watch(() => props.radius, v => { radiusNode.value = v })
+  watch(
+    () => props.colorCenter,
+    (v) => {
+      colorCenterNode.value.set(v)
+    }
+  )
+  watch(
+    () => props.colorEdge,
+    (v) => {
+      colorEdgeNode.value.set(v)
+    }
+  )
+  watch(
+    () => props.radius,
+    (v) => {
+      radiusNode.value = v
+    }
+  )
 
-const { uvNode } = useShaderPipelineContext()
+  const { uvNode } = useShaderPipelineContext()
 
-useShaderStage(
-  (_prev) => {
+  useShaderStage((_prev) => {
     const t = clamp(uvNode.value.sub(0.5).length().div(radiusNode), 0, 1)
     return vec4(mix(colorCenterNode, colorEdgeNode, t), 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,37 +1,50 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time, cos, sin, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, time, uniform, vec3 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Orbit speed in radians per second (Y axis) */
-  speed?: number
-  /** Additional fixed pitch in radians (X axis) */
-  pitch?: number
-  order?: number
-}>(), { speed: 0.5, pitch: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Orbit speed in radians per second (Y axis) */
+      speed?: number
+      /** Additional fixed pitch in radians (X axis) */
+      pitch?: number
+      order?: number
+    }>(),
+    { speed: 0.5, pitch: 0, order: 0 }
+  )
 
-const speedNode = uniform(props.speed)
-const pitchNode = uniform(props.pitch)
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.pitch, v => { pitchNode.value = v })
+  const speedNode = uniform(props.speed)
+  const pitchNode = uniform(props.pitch)
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.pitch,
+    (v) => {
+      pitchNode.value = v
+    }
+  )
 
-useShaderStage(
-  (ray) => {
-    const yaw = time.mul(speedNode)
+  useShaderStage(
+    (ray) => {
+      const yaw = time.mul(speedNode)
 
-    // Y-axis rotation (orbit)
-    const cy = cos(yaw)
-    const sy = sin(yaw)
-    const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+      // Y-axis rotation (orbit)
+      const cy = cos(yaw)
+      const sy = sin(yaw)
+      const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
 
-    // X-axis pitch
-    const cp = cos(pitchNode)
-    const sp = sin(pitchNode)
-    return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
-  },
-  props.order,
-  'ray',
-)
+      // X-axis pitch
+      const cp = cos(pitchNode)
+      const sp = sin(pitchNode)
+      return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,49 +1,62 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Vector2 } from 'three'
-import { uniform, cos, sin, vec3 } from 'three/tsl'
-
-const props = withDefaults(defineProps<{
-  /** Multiplier for horizontal mouse sweep → yaw range (radians) */
-  yawRange?: number
-  /** Multiplier for vertical mouse sweep → pitch range (radians) */
-  pitchRange?: number
-  order?: number
-}>(), { yawRange: Math.PI, pitchRange: Math.PI / 3, order: 0 })
-
-const mouse = uniform(new Vector2(0.5, 0.5))
-
-onMounted(() => {
-  const onMove = (e: MouseEvent) => {
-    mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
-  }
-  window.addEventListener('mousemove', onMove)
-  onUnmounted(() => window.removeEventListener('mousemove', onMove))
-})
-
-const yawRangeNode = uniform(props.yawRange)
-const pitchRangeNode = uniform(props.pitchRange)
-watch(() => props.yawRange, v => { yawRangeNode.value = v })
-watch(() => props.pitchRange, v => { pitchRangeNode.value = v })
-
-useShaderStage(
-  (ray) => {
-    const yaw = mouse.x.sub(0.5).mul(yawRangeNode)
-    const pitch = mouse.y.sub(0.5).mul(pitchRangeNode)
-
-    // Yaw (Y-axis)
-    const cy = cos(yaw)
-    const sy = sin(yaw)
-    const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
-
-    // Pitch (X-axis)
-    const cp = cos(pitch)
-    const sp = sin(pitch)
-    return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
-  },
-  props.order,
-  'ray',
-)
+  // @ts-nocheck
+  import { Vector2 } from 'three'
+  import { cos, sin, uniform, vec3 } from 'three/tsl'
+
+  const props = withDefaults(
+    defineProps<{
+      /** Multiplier for horizontal mouse sweep → yaw range (radians) */
+      yawRange?: number
+      /** Multiplier for vertical mouse sweep → pitch range (radians) */
+      pitchRange?: number
+      order?: number
+    }>(),
+    { yawRange: Math.PI, pitchRange: Math.PI / 3, order: 0 }
+  )
+
+  const mouse = uniform(new Vector2(0.5, 0.5))
+
+  onMounted(() => {
+    const onMove = (e: MouseEvent) => {
+      mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+    }
+    window.addEventListener('mousemove', onMove)
+    onUnmounted(() => window.removeEventListener('mousemove', onMove))
+  })
+
+  const yawRangeNode = uniform(props.yawRange)
+  const pitchRangeNode = uniform(props.pitchRange)
+  watch(
+    () => props.yawRange,
+    (v) => {
+      yawRangeNode.value = v
+    }
+  )
+  watch(
+    () => props.pitchRange,
+    (v) => {
+      pitchRangeNode.value = v
+    }
+  )
+
+  useShaderStage(
+    (ray) => {
+      const yaw = mouse.x.sub(0.5).mul(yawRangeNode)
+      const pitch = mouse.y.sub(0.5).mul(pitchRangeNode)
+
+      // Yaw (Y-axis)
+      const cy = cos(yaw)
+      const sy = sin(yaw)
+      const rayY = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+
+      // Pitch (X-axis)
+      const cp = cos(pitch)
+      const sp = sin(pitch)
+      return vec3(rayY.x, rayY.y.mul(cp).sub(rayY.z.mul(sp)), rayY.y.mul(sp).add(rayY.z.mul(cp)))
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,25 +1,33 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, cos, sin, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Rotation angle in radians */
-  angle?: number
-  order?: number
-}>(), { angle: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Rotation angle in radians */
+      angle?: number
+      order?: number
+    }>(),
+    { angle: 0, order: 0 }
+  )
 
-const angleNode = uniform(props.angle)
-watch(() => props.angle, v => { angleNode.value = v })
+  const angleNode = uniform(props.angle)
+  watch(
+    () => props.angle,
+    (v) => {
+      angleNode.value = v
+    }
+  )
 
-useShaderStage(
-  (ray) => {
-    const c = cos(angleNode)
-    const s = sin(angleNode)
-    return vec3(ray.x, ray.y.mul(c).sub(ray.z.mul(s)), ray.y.mul(s).add(ray.z.mul(c)))
-  },
-  props.order,
-  'ray',
-)
+  useShaderStage(
+    (ray) => {
+      const c = cos(angleNode)
+      const s = sin(angleNode)
+      return vec3(ray.x, ray.y.mul(c).sub(ray.z.mul(s)), ray.y.mul(s).add(ray.z.mul(c)))
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,25 +1,33 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, cos, sin, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Rotation angle in radians */
-  angle?: number
-  order?: number
-}>(), { angle: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Rotation angle in radians */
+      angle?: number
+      order?: number
+    }>(),
+    { angle: 0, order: 0 }
+  )
 
-const angleNode = uniform(props.angle)
-watch(() => props.angle, v => { angleNode.value = v })
+  const angleNode = uniform(props.angle)
+  watch(
+    () => props.angle,
+    (v) => {
+      angleNode.value = v
+    }
+  )
 
-useShaderStage(
-  (ray) => {
-    const c = cos(angleNode)
-    const s = sin(angleNode)
-    return vec3(ray.x.mul(c).add(ray.z.mul(s)), ray.y, ray.z.mul(c).sub(ray.x.mul(s)))
-  },
-  props.order,
-  'ray',
-)
+  useShaderStage(
+    (ray) => {
+      const c = cos(angleNode)
+      const s = sin(angleNode)
+      return vec3(ray.x.mul(c).add(ray.z.mul(s)), ray.y, ray.z.mul(c).sub(ray.x.mul(s)))
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,25 +1,33 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, cos, sin, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Rotation angle in radians */
-  angle?: number
-  order?: number
-}>(), { angle: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Rotation angle in radians */
+      angle?: number
+      order?: number
+    }>(),
+    { angle: 0, order: 0 }
+  )
 
-const angleNode = uniform(props.angle)
-watch(() => props.angle, v => { angleNode.value = v })
+  const angleNode = uniform(props.angle)
+  watch(
+    () => props.angle,
+    (v) => {
+      angleNode.value = v
+    }
+  )
 
-useShaderStage(
-  (ray) => {
-    const c = cos(angleNode)
-    const s = sin(angleNode)
-    return vec3(ray.x.mul(c).sub(ray.y.mul(s)), ray.x.mul(s).add(ray.y.mul(c)), ray.z)
-  },
-  props.order,
-  'ray',
-)
+  useShaderStage(
+    (ray) => {
+      const c = cos(angleNode)
+      const s = sin(angleNode)
+      return vec3(ray.x.mul(c).sub(ray.y.mul(s)), ray.x.mul(s).add(ray.y.mul(c)), ray.z)
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,41 +1,62 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, cos, sin, vec3 } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, uniform, vec3 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Yaw offset in radians (horizontal look) */
-  yaw?: number
-  /** Pitch offset in radians (vertical tilt) */
-  pitch?: number
-  /** Roll offset in radians */
-  roll?: number
-  order?: number
-}>(), { yaw: 0, pitch: 0, roll: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Yaw offset in radians (horizontal look) */
+      yaw?: number
+      /** Pitch offset in radians (vertical tilt) */
+      pitch?: number
+      /** Roll offset in radians */
+      roll?: number
+      order?: number
+    }>(),
+    { yaw: 0, pitch: 0, roll: 0, order: 0 }
+  )
 
-const yawNode = uniform(props.yaw)
-const pitchNode = uniform(props.pitch)
-const rollNode = uniform(props.roll)
-watch(() => props.yaw, v => { yawNode.value = v })
-watch(() => props.pitch, v => { pitchNode.value = v })
-watch(() => props.roll, v => { rollNode.value = v })
+  const yawNode = uniform(props.yaw)
+  const pitchNode = uniform(props.pitch)
+  const rollNode = uniform(props.roll)
+  watch(
+    () => props.yaw,
+    (v) => {
+      yawNode.value = v
+    }
+  )
+  watch(
+    () => props.pitch,
+    (v) => {
+      pitchNode.value = v
+    }
+  )
+  watch(
+    () => props.roll,
+    (v) => {
+      rollNode.value = v
+    }
+  )
 
-useShaderStage(
-  (ray) => {
-    // Yaw (Y)
-    const cy = cos(yawNode); const sy = sin(yawNode)
-    const r1 = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
+  useShaderStage(
+    (ray) => {
+      // Yaw (Y)
+      const cy = cos(yawNode)
+      const sy = sin(yawNode)
+      const r1 = vec3(ray.x.mul(cy).add(ray.z.mul(sy)), ray.y, ray.z.mul(cy).sub(ray.x.mul(sy)))
 
-    // Pitch (X)
-    const cp = cos(pitchNode); const sp = sin(pitchNode)
-    const r2 = vec3(r1.x, r1.y.mul(cp).sub(r1.z.mul(sp)), r1.y.mul(sp).add(r1.z.mul(cp)))
+      // Pitch (X)
+      const cp = cos(pitchNode)
+      const sp = sin(pitchNode)
+      const r2 = vec3(r1.x, r1.y.mul(cp).sub(r1.z.mul(sp)), r1.y.mul(sp).add(r1.z.mul(cp)))
 
-    // Roll (Z)
-    const cr = cos(rollNode); const sr = sin(rollNode)
-    return vec3(r2.x.mul(cr).sub(r2.y.mul(sr)), r2.x.mul(sr).add(r2.y.mul(cr)), r2.z)
-  },
-  props.order,
-  'ray',
-)
+      // Roll (Z)
+      const cr = cos(rollNode)
+      const sr = sin(rollNode)
+      return vec3(r2.x.mul(cr).sub(r2.y.mul(sr)), r2.x.mul(sr).add(r2.y.mul(cr)), r2.z)
+    },
+    props.order,
+    'ray'
+  )
 </script>
-
-<template><!-- --></template>