@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/components/WeatherLayer/WeatherLayer.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { onMount, onDestroy, untrack } from 'svelte';
+  import { T, useTask, useThrelte, type Props as ThrelteProps } from '@threlte/core';
+  import { WeatherType, type WeatherLayerPreset } from './types';
+  import ParticleSystem from '../ParticleSystem/ParticleSystem.svelte';
+  import type { StageProps } from '../Stage/types';
+
+  import SnowPreset from './presets/SnowPreset';
+  import RainPreset from './presets/RainPreset';
+  import LeavesPreset from './presets/LeavesPreset';
+  import AshPreset from './presets/AshPreset';
+
+  interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    props: StageProps;
+    size: { x: number; y: number };
+  }
+
+  const { props, size, ...meshProps }: Props = $props();
+
+  const { renderer, renderStage } = useThrelte();
+  let weatherType: WeatherType | null = $state(null);
+  let weatherPreset: WeatherLayerPreset = $state(RainPreset);
+  let mesh: THREE.Mesh = $state(new THREE.Mesh());
+  let particleScene = $state(new THREE.Scene());
+  let particleCamera = $state(new THREE.PerspectiveCamera(90, 1, 0.01, 10));
+  particleCamera.position.set(0, 0, -1);
+  particleCamera.rotation.x = Math.PI;
+
+  // Render target for particle scene
+  const renderTarget = new THREE.WebGLRenderTarget(1, 1, {
+    format: THREE.RGBAFormat,
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter
+  });
+
+  // Material for displaying particles
+  const quadMaterial = new THREE.MeshBasicMaterial({
+    map: renderTarget.texture,
+    transparent: true,
+    blending: THREE.NormalBlending
+  });
+
+  onMount(() => {
+    if (particleCamera && particleScene) {
+      renderTarget.setSize(size.x, size.y);
+    }
+  });
+
+  onDestroy(() => {
+    renderTarget.dispose();
+    quadMaterial.dispose();
+  });
+
+  // If weather type changes, update the preset
+  $effect(() => {
+    if (props.weather.type === weatherType) {
+      return;
+    }
+
+    untrack(() => {
+      weatherType = props.weather.type;
+      switch (weatherType) {
+        case WeatherType.Snow:
+          weatherPreset = { ...SnowPreset };
+          break;
+        case WeatherType.Rain:
+          weatherPreset = { ...RainPreset };
+          break;
+        case WeatherType.Leaves:
+          weatherPreset = { ...LeavesPreset };
+          break;
+        case WeatherType.Custom:
+          weatherPreset = { ...(props.weather.custom || RainPreset) };
+          break;
+        case WeatherType.Ash:
+          weatherPreset = { ...AshPreset };
+          break;
+        default:
+          // Fallback to rain preset
+          weatherPreset = { ...RainPreset };
+      }
+    });
+  });
+
+  // Overrides for fov, intensity, and opacity set in the UI
+  $effect(() => {
+    if (props.weather.fov) {
+      weatherPreset.fov = props.weather.fov;
+    }
+
+    if (props.weather.intensity) {
+      weatherPreset.intensity = props.weather.intensity;
+    }
+
+    if (props.weather.opacity) {
+      weatherPreset.opacity = props.weather.opacity;
+    }
+  });
+
+  // Update the camera and render target when size changes
+  $effect(() => {
+    particleCamera.aspect = size.x / size.y;
+    particleCamera.fov = weatherPreset.fov;
+    particleCamera.updateProjectionMatrix();
+    renderTarget.setSize(size.x, size.y);
+  });
+
+  // Render particle scene directly to render target (bypasses unnecessary EffectComposer overhead)
+  useTask(
+    () => {
+      if (!particleScene || !particleCamera || !size) return;
+
+      particleScene.visible = true;
+      renderer.setRenderTarget(renderTarget);
+      renderer.clear();
+      renderer.render(particleScene, particleCamera);
+      renderer.setRenderTarget(null);
+      particleScene.visible = false;
+      quadMaterial.needsUpdate = true;
+    },
+    { stage: renderStage }
+  );
+</script>
+
+<!-- Remove the stencil mesh and keep only the particle scenes -->
+<T.Scene is={particleScene} visible={false}>
+  <T.PerspectiveCamera is={particleCamera} manual />
+  <ParticleSystem props={weatherPreset.particles} opacity={weatherPreset.opacity} intensity={weatherPreset.intensity} />
+</T.Scene>
+
+<T.Mesh bind:ref={mesh} {...meshProps} visible={props.weather.type !== WeatherType.None}>
+  <T.MeshBasicMaterial is={quadMaterial} />
+  <T.PlaneGeometry args={[size.x, size.y]} />
+</T.Mesh>

package/src/lib/components/Stage/components/WeatherLayer/presets/AshPreset.ts

@@ -0,0 +1,71 @@
+import { KernelSize } from 'postprocessing';
+import type { WeatherLayerPreset } from '../types';
+
+export default {
+  fov: 20,
+  intensity: 0.5,
+  opacity: 0.8,
+  depthOfField: {
+    enabled: true,
+    focus: 0.75,
+    focalLength: 6.6,
+    bokehScale: 250.0,
+    kernelSize: KernelSize.LARGE
+  },
+  particles: {
+    maxParticleCount: 500,
+    opacity: 0.5,
+    type: 4,
+    color: '#404040',
+    fadeInTime: 5,
+    fadeOutTime: 2,
+    lifetime: 10,
+    spawnArea: {
+      minRadius: 0.01,
+      maxRadius: 0.08
+    },
+    initialVelocity: {
+      x: 0,
+      y: 0,
+      z: 0
+    },
+    force: {
+      linear: {
+        x: 0,
+        y: 0,
+        z: 0.01
+      },
+      exponential: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      sinusoidal: {
+        amplitude: {
+          x: 0.015,
+          y: 0.014,
+          z: 0
+        },
+        frequency: {
+          x: 0.002,
+          y: 0.0025,
+          z: 0
+        }
+      }
+    },
+    rotation: {
+      alignRadially: false,
+      offset: 0,
+      velocity: 1,
+      randomize: true
+    },
+    scale: {
+      x: 1,
+      y: 1
+    },
+    size: {
+      min: 0.001,
+      max: 0.0013
+    }
+  }
+} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/LeavesPreset.ts

@@ -0,0 +1,70 @@
+import { KernelSize } from 'postprocessing';
+import type { WeatherLayerPreset } from '../types';
+
+export default {
+  fov: 30,
+  intensity: 0.5,
+  opacity: 1,
+  depthOfField: {
+    enabled: true,
+    focus: 0.7,
+    focalLength: 4,
+    bokehScale: 50,
+    kernelSize: KernelSize.VERY_LARGE
+  },
+  particles: {
+    maxParticleCount: 50,
+    type: 3,
+    color: '#ffffff',
+    fadeInTime: 7,
+    fadeOutTime: 1,
+    lifetime: 15,
+    spawnArea: {
+      minRadius: 0.20142663043478262,
+      maxRadius: 0.27751358695652173
+    },
+    initialVelocity: {
+      x: 0,
+      y: 0,
+      z: 0
+    },
+    force: {
+      linear: {
+        x: 0,
+        y: 0,
+        z: 0.02
+      },
+      exponential: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      sinusoidal: {
+        amplitude: {
+          x: 0.01,
+          y: 0.015,
+          z: 0
+        },
+        frequency: {
+          x: 0.3,
+          y: 0.5,
+          z: 0
+        }
+      }
+    },
+    rotation: {
+      alignRadially: false,
+      offset: 0,
+      velocity: 0.9,
+      randomize: true
+    },
+    scale: {
+      x: 1,
+      y: 1
+    },
+    size: {
+      min: 0.025611413043478262,
+      max: 0.0484375
+    }
+  }
+} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/RainPreset.ts

@@ -0,0 +1,68 @@
+import type { WeatherLayerPreset } from '../types';
+export default {
+  fov: 70,
+  intensity: 0.7,
+  opacity: 1.0,
+  depthOfField: {
+    enabled: false,
+    focus: 0,
+    focalLength: 0,
+    bokehScale: 0,
+    kernelSize: 0
+  },
+  particles: {
+    maxParticleCount: 5000,
+    type: 2,
+    color: '#e0e0e0',
+    fadeInTime: 1,
+    fadeOutTime: 3,
+    lifetime: 3,
+    spawnArea: {
+      minRadius: 0.008,
+      maxRadius: 0.02
+    },
+    initialVelocity: {
+      x: 0,
+      y: 0,
+      z: 0
+    },
+    force: {
+      linear: {
+        x: 0,
+        y: 0,
+        z: 0.02
+      },
+      exponential: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      sinusoidal: {
+        amplitude: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        frequency: {
+          x: 5,
+          y: 5,
+          z: 5
+        }
+      }
+    },
+    rotation: {
+      alignRadially: true,
+      offset: 270,
+      velocity: 0,
+      randomize: false
+    },
+    scale: {
+      x: 0.2,
+      y: 1
+    },
+    size: {
+      min: 0.001,
+      max: 0.001
+    }
+  }
+} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/SnowPreset.ts

@@ -0,0 +1,70 @@
+import { KernelSize } from 'postprocessing';
+import type { WeatherLayerPreset } from '../types';
+
+export default {
+  fov: 90,
+  intensity: 0.2,
+  opacity: 0.8,
+  depthOfField: {
+    enabled: true,
+    focus: 0.7,
+    focalLength: 5.0,
+    bokehScale: 50.0,
+    kernelSize: KernelSize.LARGE
+  },
+  particles: {
+    maxParticleCount: 1000,
+    type: 1,
+    color: '#ffffff',
+    fadeInTime: 8,
+    fadeOutTime: 2,
+    lifetime: 10,
+    spawnArea: {
+      minRadius: 0.02,
+      maxRadius: 0.5
+    },
+    initialVelocity: {
+      x: 0,
+      y: 0,
+      z: 0
+    },
+    force: {
+      linear: {
+        x: 0,
+        y: 0,
+        z: 0.005
+      },
+      exponential: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      sinusoidal: {
+        amplitude: {
+          x: 0.002,
+          y: 0.003,
+          z: 0
+        },
+        frequency: {
+          x: 2,
+          y: 1,
+          z: 0
+        }
+      }
+    },
+    rotation: {
+      alignRadially: false,
+      offset: 0,
+      velocity: 0,
+      randomize: true
+    },
+    scale: {
+      x: 1,
+      y: 1
+    },
+    size: {
+      min: 0.001,
+      max: 0.005
+    }
+  }
+} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/index.ts

@@ -0,0 +1,6 @@
+import AshPreset from './AshPreset';
+import LeavesPreset from './LeavesPreset';
+import RainPreset from './RainPreset';
+import SnowPreset from './SnowPreset';
+
+export { AshPreset, LeavesPreset, RainPreset, SnowPreset };

package/src/lib/components/Stage/components/WeatherLayer/types.ts

@@ -0,0 +1,35 @@
+import type { KernelSize } from 'postprocessing';
+import type { ParticleSystemProps } from '../ParticleSystem/types';
+
+export enum WeatherType {
+  None = 0,
+  Rain = 1,
+  Snow = 2,
+  Leaves = 3,
+  Ash = 4,
+  Custom = 99
+}
+
+export interface DepthOfFieldConfig {
+  enabled: boolean;
+  focus: number;
+  focalLength: number;
+  bokehScale: number;
+  kernelSize: KernelSize;
+}
+
+export interface WeatherLayerPreset {
+  fov: number;
+  intensity: number;
+  opacity: number;
+  depthOfField: DepthOfFieldConfig;
+  particles: ParticleSystemProps;
+}
+
+export interface WeatherLayerProps {
+  type: WeatherType;
+  fov?: number;
+  intensity?: number;
+  opacity?: number;
+  custom?: WeatherLayerPreset;
+}

package/src/lib/components/Stage/helpers/clippingPlaneStore.svelte.ts

@@ -0,0 +1,28 @@
+import * as THREE from 'three';
+import type { SceneLayerProps } from '../components/Scene/types';
+import type { DisplayProps } from '../components/Stage/types';
+
+export const clippingPlaneStore: { value: THREE.Plane[] } = $state({
+  value: [
+    new THREE.Plane(new THREE.Vector3(-1, 0, 0)),
+    new THREE.Plane(new THREE.Vector3(1, 0, 0)),
+    new THREE.Plane(new THREE.Vector3(0, 1, 0)),
+    new THREE.Plane(new THREE.Vector3(0, -1, 0))
+  ]
+});
+
+export function updateClippingPlanes(sceneProps: SceneLayerProps, displayProps: DisplayProps) {
+  // Whenever the scene is translated/zoomed, update the clipping planes
+  const { x, y } = sceneProps.offset;
+  const worldExtents = {
+    x: sceneProps.zoom * (displayProps.resolution.x / 2),
+    y: sceneProps.zoom * (displayProps.resolution.y / 2)
+  };
+
+  clippingPlaneStore.value = [
+    new THREE.Plane(new THREE.Vector3(-1, 0, 0), worldExtents.x + x),
+    new THREE.Plane(new THREE.Vector3(1, 0, 0), worldExtents.x - x),
+    new THREE.Plane(new THREE.Vector3(0, 1, 0), worldExtents.y - y),
+    new THREE.Plane(new THREE.Vector3(0, -1, 0), worldExtents.y + y)
+  ];
+}

package/src/lib/components/Stage/helpers/debugState.svelte.ts

@@ -0,0 +1,18 @@
+/**
+ * Global debug state that persists independently of stageProps.
+ * This prevents debug settings from being reset when stageProps are rebuilt.
+ */
+export const debugState: {
+  enableMetrics: boolean;
+  logMetricsToConsole: boolean;
+} = $state({
+  enableMetrics: false,
+  logMetricsToConsole: false
+});
+
+export const setDebugEnabled = (enabled: boolean) => {
+  debugState.enableMetrics = enabled;
+  debugState.logMetricsToConsole = enabled;
+};
+
+export const isDebugEnabled = () => debugState.enableMetrics;