@geoql/maplibre-gl-snow 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-current Vinayak Kulkarni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,159 @@
+# @geoql/maplibre-gl-snow
+
+WebGPU-accelerated snow particle layer for [MapLibre GL JS](https://maplibre.org/).
+
+[![npm version](https://img.shields.io/npm/v/@geoql/maplibre-gl-snow.svg)](https://www.npmjs.com/package/@geoql/maplibre-gl-snow)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@geoql/maplibre-gl-snow)](https://bundlephobia.com/package/@geoql/maplibre-gl-snow)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[![oxlint](https://img.shields.io/badge/linter-oxlint-7c5dfa?logo=oxc)](https://oxc.rs)
+[![tsdown](https://img.shields.io/badge/bundler-tsdown-3178c6)](https://tsdown.dev/)
+[![typescript](https://img.shields.io/npm/dependency-version/@geoql/maplibre-gl-snow/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)
+[![WebGPU](https://img.shields.io/badge/WebGPU-Yes-brightgreen)](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
+
+> [**Live Demo**](https://geoql.github.io/maplibre-gl-snow/)
+
+Renders 100,000+ animated snow particles using Three.js WebGPU renderer with TSL compute shaders. Particles are georeferenced in Mercator coordinates — snow always fills the viewport regardless of zoom level. Supports wind direction, intensity, fog overlay, and more.
+
+## Installation
+
+```bash
+# npm
+npm install @geoql/maplibre-gl-snow maplibre-gl three
+
+# pnpm
+pnpm add @geoql/maplibre-gl-snow maplibre-gl three
+
+# yarn
+yarn add @geoql/maplibre-gl-snow maplibre-gl three
+
+# bun
+bun add @geoql/maplibre-gl-snow maplibre-gl three
+```
+
+## Usage
+
+```typescript
+import maplibregl from 'maplibre-gl';
+import { MaplibreSnowLayer } from '@geoql/maplibre-gl-snow';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const map = new maplibregl.Map({
+  container: 'map',
+  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+  center: [-74.006, 40.7128],
+  zoom: 13,
+  pitch: 55,
+  maxPitch: 85,
+});
+
+map.on('load', () => {
+  const snow = new MaplibreSnowLayer({
+    density: 0.5,
+    intensity: 0.5,
+    flakeSize: 4,
+    opacity: 0.8,
+    direction: [0, 50], // [azimuth degrees, horizontal speed px/s]
+    fog: true,
+    fogOpacity: 0.08,
+  });
+
+  map.addLayer(snow);
+});
+```
+
+## Options
+
+```typescript
+interface MaplibreSnowOptions {
+  id?: string;
+  density?: number;
+  intensity?: number;
+  flakeSize?: number;
+  opacity?: number;
+  direction?: [number, number];
+  fog?: boolean;
+  fogOpacity?: number;
+}
+```
+
+| Option       | Type               | Default   | Description                                        |
+| ------------ | ------------------ | --------- | -------------------------------------------------- |
+| `id`         | `string`           | `'snow'`  | Unique layer ID                                    |
+| `density`    | `number` (0–1)     | `0.5`     | Particle density — maps to 10k–200k particles      |
+| `intensity`  | `number` (0–1)     | `0.5`     | Fall speed multiplier                              |
+| `flakeSize`  | `number`           | `4`       | Base flake size in CSS pixels                      |
+| `opacity`    | `number` (0–1)     | `0.8`     | Global opacity multiplier                          |
+| `direction`  | `[number, number]` | `[0, 50]` | Wind as `[azimuth degrees, horizontal speed px/s]` |
+| `fog`        | `boolean`          | `true`    | Enable atmospheric fog overlay                     |
+| `fogOpacity` | `number` (0–1)     | `0.08`    | Fog opacity                                        |
+
+## API
+
+```typescript
+const snow = new MaplibreSnowLayer(options);
+
+// Update settings at runtime
+snow.setDensity(0.8);
+snow.setIntensity(0.7);
+snow.setFlakeSize(6);
+snow.setOpacity(0.6);
+snow.setDirection([45, 80]); // wind from NE at 80 px/s
+snow.setFog(false);
+snow.setFogOpacity(0.12);
+```
+
+## How It Works
+
+The layer implements MapLibre's `CustomLayerInterface` with a two-canvas architecture:
+
+1. **WebGPU overlay** — Three.js `WebGPURenderer` on a separate `<canvas>` positioned absolutely over the MapLibre canvas. `pointer-events: none` ensures clicks pass through to the map.
+2. **TSL compute shaders** — 100k particles stored in GPU `instancedArray` buffers. Compute shaders handle:
+   - `computeInit` — spawns particles in a zoom-adaptive volume centered on the viewport
+   - `computeUpdate` — applies gravity, wind drift, and respawns particles that fall below ground
+3. **Georeferenced particles** — positions stored as `(mercX, mercY, mercAlt)` in Mercator [0,1] space. Spawn volume adapts to zoom level so snow always fills the viewport.
+4. **Camera sync** — uses MapLibre's projection matrix directly. A `PerspectiveCamera` with `updateProjectionMatrix` no-op'd prevents Three.js from overwriting the matrix.
+5. **Animation** — MapLibre drives the frame loop via `triggerRepaint()`, calling our `render()` callback which runs compute + render each frame.
+
+## Browser Support
+
+Requires a WebGPU-capable browser (Chrome 113+, Edge 113+, Firefox Nightly with `dom.webgpu.enabled`, or Safari 17.4+ with WebGPU enabled).
+
+> **Note:** This library is **WebGPU-only**. There is no WebGL fallback. If WebGPU is unavailable, the layer silently does nothing.
+
+## Exports
+
+```typescript
+// Main class
+export { MaplibreSnowLayer } from '@geoql/maplibre-gl-snow';
+
+// Default export (same class)
+export { default } from '@geoql/maplibre-gl-snow';
+
+// Types
+export type { MaplibreSnowOptions } from '@geoql/maplibre-gl-snow';
+```
+
+## Requirements
+
+- MapLibre GL JS >= 3.0.0
+- Three.js >= 0.183.0 (WebGPU-enabled build)
+- Node.js >= 24.0.0
+
+## Contributing
+
+1. Fork and create a feature branch from `main`
+2. Make changes following [conventional commits](https://www.conventionalcommits.org/)
+3. Ensure commits are signed ([why?](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html))
+4. Submit a PR
+
+```bash
+bun install
+bun run build
+bun run lint
+bun run typecheck
+```
+
+## License
+
+[MIT](./LICENSE)

package/dist/index.d.mts

@@ -0,0 +1,54 @@
+import { CustomRenderMethodInput, Map } from "maplibre-gl";
+
+//#region src/index.d.ts
+interface MaplibreSnowOptions {
+  /** Unique layer ID (default: 'snow') */
+  id?: string;
+  /** Particle density 0–1 (default: 0.5) */
+  density?: number;
+  /** Fall speed intensity 0–1 (default: 0.5) */
+  intensity?: number;
+  /** Base flake size in CSS pixels (default: 4) */
+  flakeSize?: number;
+  /** Global opacity 0–1 (default: 0.8) */
+  opacity?: number;
+  /** Wind as [azimuth degrees, horizontal speed px/s] (default: [0, 50]) */
+  direction?: [number, number];
+  /** Enable atmospheric fog overlay (default: true) */
+  fog?: boolean;
+  /** Fog opacity 0–1 (default: 0.08) */
+  fogOpacity?: number;
+}
+declare class MaplibreSnowLayer {
+  id: string;
+  readonly type: "custom";
+  readonly renderingMode: "3d";
+  private map;
+  private overlayCanvas;
+  private overlayDiv;
+  private gpu;
+  private resizeObserver;
+  private _density;
+  private _intensity;
+  private _flakeSize;
+  private _opacity;
+  private _direction;
+  private _fog;
+  private _fogOpacity;
+  private _lastFrameTime;
+  private _fps;
+  constructor(options?: MaplibreSnowOptions);
+  onAdd(map: Map, _gl: WebGL2RenderingContext): void;
+  render(_gl: WebGL2RenderingContext, args: CustomRenderMethodInput): void;
+  onRemove(_map: Map, _gl: WebGL2RenderingContext): void;
+  setDensity(density: number): void;
+  setIntensity(intensity: number): void;
+  setFlakeSize(size: number): void;
+  setOpacity(opacity: number): void;
+  setDirection(direction: [number, number]): void;
+  setFog(enabled: boolean): void;
+  setFogOpacity(opacity: number): void;
+}
+//#endregion
+export { MaplibreSnowLayer, MaplibreSnowOptions };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;;UAkCiB,mBAAA;EAgBf;EAdA,EAAA;EAcU;EAZV,OAAA;EAuYqB;EArYrB,SAAA;EA6ZqB;EA3ZrB,SAAA;EA0a6B;EAxa7B,OAAA;EAie0C;EA/d1C,SAAA;EAwfiC;EAtfjC,GAAA;EAsfuD;EApfvD,UAAA;AAAA;AAAA,cA2XI,iBAAA;EACJ,EAAA;EAAA,SACS,IAAA;EAAA,SACA,aAAA;EAAA,QAED,GAAA;EAAA,QACA,aAAA;EAAA,QACA,UAAA;EAAA,QACA,GAAA;EAAA,QACA,cAAA;EAAA,QAGA,QAAA;EAAA,QACA,UAAA;EAAA,QACA,UAAA;EAAA,QACA,QAAA;EAAA,QACA,UAAA;EAAA,QACA,IAAA;EAAA,QACA,WAAA;EAAA,QAGA,cAAA;EAAA,QACA,IAAA;cAEI,OAAA,GAAS,mBAAA;EAerB,KAAA,CAAM,GAAA,EAAK,GAAA,EAAa,GAAA,EAAK,sBAAA;EAyD7B,MAAA,CAAO,GAAA,EAAK,sBAAA,EAAwB,IAAA,EAAM,uBAAA;EAyB1C,QAAA,CAAS,IAAA,EAAM,GAAA,EAAa,GAAA,EAAK,sBAAA;EAkBjC,UAAA,CAAW,OAAA;EAKX,YAAA,CAAa,SAAA;EAIb,YAAA,CAAa,IAAA;EAIb,UAAA,CAAW,OAAA;EAKX,YAAA,CAAa,SAAA;EAIb,MAAA,CAAO,OAAA;EAKP,aAAA,CAAc,OAAA;AAAA"}

package/dist/index.mjs

@@ -0,0 +1,372 @@
+import * as THREE from "three/webgpu";
+import { Fn, If, color, float, hash, instanceIndex, instancedArray, positionLocal, screenUV, uint, uniform, vec4 } from "three/tsl";
+
+//#region src/index.ts
+/**
+* @geoql/maplibre-gl-snow
+*
+* WebGPU-accelerated snow particle layer for MapLibre GL JS.
+* Uses Three.js WebGPU renderer with TSL compute shaders.
+*
+* Architecture:
+* - Two-canvas overlay: MapLibre (WebGL2) + Three.js WebGPU overlay
+* - Particles georeferenced as (mercX, mercY, altMerc) in mercator [0,1] space
+* - Camera syncs to MapLibre's mercator projection matrix directly
+* - MapLibre drives the frame loop via triggerRepaint()
+*/
+const DEFAULT_PARTICLE_COUNT = 1e5;
+const MIN_PARTICLE_COUNT = 1e4;
+const MAX_PARTICLE_COUNT = 2e5;
+function lngLatToMercator(lng, lat) {
+	const sinLat = Math.sin(lat * Math.PI / 180);
+	return {
+		x: (lng + 180) / 360,
+		y: .5 - Math.log((1 + sinLat) / (1 - sinLat)) / (4 * Math.PI)
+	};
+}
+var SnowGPU = class {
+	renderer = null;
+	scene = null;
+	camera = null;
+	particleCount = DEFAULT_PARTICLE_COUNT;
+	posBuffer = null;
+	velBuffer = null;
+	snowMesh = null;
+	computeInit = null;
+	computeUpdate = null;
+	uCenter = uniform(new THREE.Vector2(.5, .5));
+	uHalfSpan = uniform(.005);
+	uAltSpan = uniform(.0025);
+	uRadius = uniform(1e-6);
+	uFallSpeed = uniform(0);
+	uWindX = uniform(0);
+	uWindY = uniform(0);
+	uOpacity = uniform(.8);
+	uColor = uniform(new THREE.Color(1, 1, 1));
+	fogMesh = null;
+	uFogOpacity = uniform(.08);
+	_fogEnabled = true;
+	initialized = false;
+	resizeObserver = null;
+	async init(overlayCanvas) {
+		if (!navigator.gpu) {
+			console.warn("[maplibre-gl-snow] WebGPU not supported");
+			return false;
+		}
+		try {
+			this.renderer = new THREE.WebGPURenderer({
+				canvas: overlayCanvas,
+				antialias: false,
+				alpha: true
+			});
+			this.renderer.setClearColor(0, 0);
+			this.renderer.setPixelRatio(window.devicePixelRatio);
+			await this.renderer.init();
+			this.scene = new THREE.Scene();
+			this.camera = new THREE.PerspectiveCamera(60, 1, .001, 1e3);
+			this.camera.matrixAutoUpdate = false;
+			this.camera.matrixWorld.identity();
+			this.camera.matrixWorldInverse.identity();
+			this.camera.updateProjectionMatrix = () => {};
+			this._buildParticleSystem();
+			this._buildFogOverlay();
+			this.initialized = true;
+			return true;
+		} catch (err) {
+			console.error("[maplibre-gl-snow] WebGPU init failed:", err);
+			return false;
+		}
+	}
+	_buildParticleSystem() {
+		if (!this.renderer || !this.scene) return;
+		const N = this.particleCount;
+		this.posBuffer = instancedArray(N, "vec3");
+		this.velBuffer = instancedArray(N, "vec4");
+		const randUint = () => uint(Math.floor(Math.random() * 16777215));
+		const posBuffer = this.posBuffer;
+		const velBuffer = this.velBuffer;
+		const uCenter = this.uCenter;
+		const uHalfSpan = this.uHalfSpan;
+		const uAltSpan = this.uAltSpan;
+		const uFallSpeed = this.uFallSpeed;
+		this.computeInit = Fn(() => {
+			const pos = posBuffer.element(instanceIndex);
+			const vel = velBuffer.element(instanceIndex);
+			const rx = hash(instanceIndex);
+			const ry = hash(instanceIndex.add(randUint()));
+			const rz = hash(instanceIndex.add(randUint()));
+			const rs = hash(instanceIndex.add(randUint()));
+			pos.x = uCenter.x.add(rx.mul(uHalfSpan.mul(2)).sub(uHalfSpan));
+			pos.y = uCenter.y.add(ry.mul(uHalfSpan.mul(2)).sub(uHalfSpan));
+			pos.z = rz.mul(uAltSpan);
+			vel.x = float(0);
+			vel.y = float(0);
+			vel.z = rs.mul(.5).add(.5);
+			vel.w = rs;
+		})().compute(N);
+		const uWindX = this.uWindX;
+		const uWindY = this.uWindY;
+		this.computeUpdate = Fn(() => {
+			const pos = posBuffer.element(instanceIndex);
+			const vel = velBuffer.element(instanceIndex);
+			pos.x = pos.x.add(uWindX);
+			pos.y = pos.y.add(uWindY);
+			pos.z = pos.z.sub(uFallSpeed.mul(vel.z));
+			If(pos.z.lessThan(float(0)), () => {
+				const rx2 = hash(instanceIndex.add(uint(Math.floor(Math.random() * 16777215))));
+				const ry2 = hash(instanceIndex.add(uint(Math.floor(Math.random() * 16777215))));
+				pos.x = uCenter.x.add(rx2.mul(uHalfSpan.mul(2)).sub(uHalfSpan));
+				pos.y = uCenter.y.add(ry2.mul(uHalfSpan.mul(2)).sub(uHalfSpan));
+				pos.z = uAltSpan;
+			});
+		})().compute(N);
+		const geometry = new THREE.SphereGeometry(1, 12, 12);
+		const material = new THREE.MeshBasicNodeMaterial({
+			transparent: true,
+			depthWrite: false,
+			depthTest: false
+		});
+		const uRadius = this.uRadius;
+		const uColor = this.uColor;
+		const uOpacity = this.uOpacity;
+		material.positionNode = positionLocal.mul(uRadius).add(posBuffer.toAttribute());
+		material.colorNode = vec4(uColor, uOpacity);
+		this.snowMesh = new THREE.Mesh(geometry, material);
+		this.snowMesh.count = N;
+		this.snowMesh.frustumCulled = false;
+		this.scene.add(this.snowMesh);
+	}
+	_buildFogOverlay() {
+		if (!this.scene) return;
+		const geo = new THREE.PlaneGeometry(2, 2);
+		const mat = new THREE.MeshBasicNodeMaterial({
+			transparent: true,
+			depthWrite: false,
+			depthTest: false
+		});
+		const uFogOpacity = this.uFogOpacity;
+		const vignette = screenUV.distance(float(.5)).mul(2).saturate();
+		mat.colorNode = vec4(color(13690103), vignette.mul(uFogOpacity));
+		this.fogMesh = new THREE.Mesh(geo, mat);
+		this.fogMesh.frustumCulled = false;
+		this.fogMesh.renderOrder = 999;
+		this.fogMesh.visible = this._fogEnabled;
+		this.scene.add(this.fogMesh);
+	}
+	frame(projMatrix) {
+		if (!this.renderer || !this.scene || !this.camera || !this.initialized) return;
+		this.camera.projectionMatrix.fromArray(projMatrix);
+		this.camera.projectionMatrixInverse.copy(this.camera.projectionMatrix).invert();
+		if (this.computeUpdate) this.renderer.compute(this.computeUpdate);
+		this.renderer.render(this.scene, this.camera);
+	}
+	_initRan = false;
+	runInit() {
+		if (this._initRan || !this.renderer || !this.computeInit) return;
+		this.renderer.compute(this.computeInit);
+		this._initRan = true;
+	}
+	updateSpatial(mercX, mercY, zoom, canvasCSSWidth) {
+		const halfSpan = canvasCSSWidth * (1 / (512 * Math.pow(2, zoom))) * 1.2;
+		const altSpan = halfSpan * .5;
+		this.uCenter.value.set(mercX, mercY);
+		this.uHalfSpan.value = halfSpan;
+		this.uAltSpan.value = altSpan;
+	}
+	updateFlakeRadius(flakeSizePx, zoom, dpr) {
+		const pxToMerc = 1 / (512 * Math.pow(2, zoom));
+		this.uRadius.value = flakeSizePx * pxToMerc * dpr * .5;
+	}
+	updateWind(azimuthDeg, speedPxPerSec, zoom, fps) {
+		const pxToMerc = 1 / (512 * Math.pow(2, zoom));
+		const azRad = azimuthDeg * Math.PI / 180;
+		const mercSpeedPerFrame = speedPxPerSec * pxToMerc / fps;
+		this.uWindX.value = Math.sin(azRad) * mercSpeedPerFrame;
+		this.uWindY.value = Math.cos(azRad) * mercSpeedPerFrame;
+	}
+	updateFallSpeed(intensity, zoom, fps) {
+		const pxToMerc = 1 / (512 * Math.pow(2, zoom));
+		this.uFallSpeed.value = 40 * intensity * pxToMerc / fps;
+	}
+	setDensity(density) {
+		const newCount = Math.round(MIN_PARTICLE_COUNT + Math.max(0, Math.min(1, density)) * (MAX_PARTICLE_COUNT - MIN_PARTICLE_COUNT));
+		if (newCount === this.particleCount) return;
+		this.particleCount = newCount;
+		this._rebuildParticles();
+	}
+	_rebuildParticles() {
+		if (!this.scene) return;
+		if (this.snowMesh) {
+			this.scene.remove(this.snowMesh);
+			this.snowMesh.geometry.dispose();
+			this.snowMesh.material.dispose();
+		}
+		this._initRan = false;
+		this._buildParticleSystem();
+	}
+	setOpacity(value) {
+		this.uOpacity.value = Math.max(0, Math.min(1, value));
+	}
+	setColor(r, g, b) {
+		this.uColor.value.setRGB(r, g, b);
+	}
+	setFog(enabled) {
+		this._fogEnabled = enabled;
+		if (this.fogMesh) this.fogMesh.visible = enabled;
+	}
+	setFogOpacity(value) {
+		this.uFogOpacity.value = Math.max(0, Math.min(1, value));
+	}
+	resize(cssWidth, cssHeight) {
+		if (!this.renderer) return;
+		this.renderer.setSize(cssWidth, cssHeight);
+	}
+	dispose() {
+		if (this.snowMesh) {
+			this.snowMesh.geometry.dispose();
+			this.snowMesh.material.dispose();
+		}
+		if (this.fogMesh) {
+			this.fogMesh.geometry.dispose();
+			this.fogMesh.material.dispose();
+		}
+		this.renderer?.dispose();
+		this.resizeObserver?.disconnect();
+	}
+	get ready() {
+		return this.initialized;
+	}
+};
+var MaplibreSnowLayer = class {
+	id;
+	type = "custom";
+	renderingMode = "3d";
+	map = null;
+	overlayCanvas = null;
+	overlayDiv = null;
+	gpu = null;
+	resizeObserver = null;
+	_density;
+	_intensity;
+	_flakeSize;
+	_opacity;
+	_direction;
+	_fog;
+	_fogOpacity;
+	_lastFrameTime = 0;
+	_fps = 60;
+	constructor(options = {}) {
+		this.id = options.id ?? "snow";
+		this._density = options.density ?? .5;
+		this._intensity = options.intensity ?? .5;
+		this._flakeSize = options.flakeSize ?? 4;
+		this._opacity = options.opacity ?? .8;
+		this._direction = options.direction ?? [0, 50];
+		this._fog = options.fog ?? true;
+		this._fogOpacity = options.fogOpacity ?? .08;
+	}
+	onAdd(map, _gl) {
+		this.map = map;
+		const container = map.getContainer();
+		container.style.position = "relative";
+		this.overlayDiv = document.createElement("div");
+		Object.assign(this.overlayDiv.style, {
+			position: "absolute",
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%",
+			pointerEvents: "none",
+			zIndex: "10"
+		});
+		this.overlayCanvas = document.createElement("canvas");
+		Object.assign(this.overlayCanvas.style, {
+			width: "100%",
+			height: "100%",
+			display: "block"
+		});
+		this.overlayDiv.appendChild(this.overlayCanvas);
+		container.appendChild(this.overlayDiv);
+		const dpr = window.devicePixelRatio;
+		this.overlayCanvas.width = container.clientWidth * dpr;
+		this.overlayCanvas.height = container.clientHeight * dpr;
+		this.resizeObserver = new ResizeObserver(() => {
+			if (!this.overlayCanvas || !this.map) return;
+			const c = this.map.getContainer();
+			const d = window.devicePixelRatio;
+			this.overlayCanvas.width = c.clientWidth * d;
+			this.overlayCanvas.height = c.clientHeight * d;
+			this.gpu?.resize(c.clientWidth, c.clientHeight);
+		});
+		this.resizeObserver.observe(container);
+		this.gpu = new SnowGPU();
+		this.gpu.init(this.overlayCanvas).then((ok) => {
+			if (!ok) return;
+			this.gpu.setDensity(this._density);
+			this.gpu.setOpacity(this._opacity);
+			this.gpu.setFog(this._fog);
+			this.gpu.setFogOpacity(this._fogOpacity);
+		});
+	}
+	render(_gl, args) {
+		if (!this.gpu?.ready || !this.map) return;
+		const now = performance.now();
+		const dt = now - this._lastFrameTime;
+		if (this._lastFrameTime > 0 && dt > 0) {
+			const instantFps = 1e3 / dt;
+			this._fps = this._fps * .9 + instantFps * .1;
+		}
+		this._lastFrameTime = now;
+		const fps = Math.max(10, Math.min(120, this._fps));
+		const zoom = this.map.getZoom();
+		const center = this.map.getCenter();
+		const dpr = window.devicePixelRatio;
+		const cssW = this.map.getContainer().clientWidth;
+		const merc = lngLatToMercator(center.lng, center.lat);
+		this.gpu.updateSpatial(merc.x, merc.y, zoom, cssW);
+		this.gpu.updateFlakeRadius(this._flakeSize, zoom, dpr);
+		this.gpu.updateWind(this._direction[0], this._direction[1], zoom, fps);
+		this.gpu.updateFallSpeed(this._intensity, zoom, fps);
+		this.gpu.runInit();
+		this.gpu.frame(new Float32Array(args.defaultProjectionData.mainMatrix));
+		this.map.triggerRepaint();
+	}
+	onRemove(_map, _gl) {
+		this.resizeObserver?.disconnect();
+		this.gpu?.dispose();
+		if (this.overlayDiv?.parentElement) this.overlayDiv.parentElement.removeChild(this.overlayDiv);
+		this.map = null;
+		this.overlayDiv = null;
+		this.overlayCanvas = null;
+		this.gpu = null;
+	}
+	setDensity(density) {
+		this._density = density;
+		this.gpu?.setDensity(density);
+	}
+	setIntensity(intensity) {
+		this._intensity = Math.max(0, Math.min(1, intensity));
+	}
+	setFlakeSize(size) {
+		this._flakeSize = size;
+	}
+	setOpacity(opacity) {
+		this._opacity = opacity;
+		this.gpu?.setOpacity(opacity);
+	}
+	setDirection(direction) {
+		this._direction = direction;
+	}
+	setFog(enabled) {
+		this._fog = enabled;
+		this.gpu?.setFog(enabled);
+	}
+	setFogOpacity(opacity) {
+		this._fogOpacity = opacity;
+		this.gpu?.setFogOpacity(opacity);
+	}
+};
+
+//#endregion
+export { MaplibreSnowLayer };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\n * @geoql/maplibre-gl-snow\n *\n * WebGPU-accelerated snow particle layer for MapLibre GL JS.\n * Uses Three.js WebGPU renderer with TSL compute shaders.\n *\n * Architecture:\n * - Two-canvas overlay: MapLibre (WebGL2) + Three.js WebGPU overlay\n * - Particles georeferenced as (mercX, mercY, altMerc) in mercator [0,1] space\n * - Camera syncs to MapLibre's mercator projection matrix directly\n * - MapLibre drives the frame loop via triggerRepaint()\n */\n\nimport * as THREE from 'three/webgpu';\nimport {\n  Fn,\n  vec4,\n  float,\n  uint,\n  instanceIndex,\n  instancedArray,\n  positionLocal,\n  uniform,\n  hash,\n  If,\n  color,\n  screenUV,\n} from 'three/tsl';\nimport type { CustomRenderMethodInput, Map as MaplibreMap } from 'maplibre-gl';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface MaplibreSnowOptions {\n  /** Unique layer ID (default: 'snow') */\n  id?: string;\n  /** Particle density 0–1 (default: 0.5) */\n  density?: number;\n  /** Fall speed intensity 0–1 (default: 0.5) */\n  intensity?: number;\n  /** Base flake size in CSS pixels (default: 4) */\n  flakeSize?: number;\n  /** Global opacity 0–1 (default: 0.8) */\n  opacity?: number;\n  /** Wind as [azimuth degrees, horizontal speed px/s] (default: [0, 50]) */\n  direction?: [number, number];\n  /** Enable atmospheric fog overlay (default: true) */\n  fog?: boolean;\n  /** Fog opacity 0–1 (default: 0.08) */\n  fogOpacity?: number;\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst DEFAULT_PARTICLE_COUNT = 100_000;\nconst MIN_PARTICLE_COUNT = 10_000;\nconst MAX_PARTICLE_COUNT = 200_000;\n\n// ---------------------------------------------------------------------------\n// Mercator helpers (no maplibre-gl import needed)\n// ---------------------------------------------------------------------------\n\nfunction lngLatToMercator(lng: number, lat: number): { x: number; y: number } {\n  const sinLat = Math.sin((lat * Math.PI) / 180);\n  return {\n    x: (lng + 180) / 360,\n    y: 0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (4 * Math.PI),\n  };\n}\n\n// ---------------------------------------------------------------------------\n// WebGPU Particle System\n// ---------------------------------------------------------------------------\n\nclass SnowGPU {\n  private renderer: THREE.WebGPURenderer | null = null;\n  private scene: THREE.Scene | null = null;\n  private camera: THREE.PerspectiveCamera | null = null;\n\n  // Particle state\n  private particleCount = DEFAULT_PARTICLE_COUNT;\n  private posBuffer: ReturnType<typeof instancedArray> | null = null;\n  private velBuffer: ReturnType<typeof instancedArray> | null = null;\n  private snowMesh: THREE.Mesh | null = null;\n  private computeInit: ReturnType<ReturnType<typeof Fn>['compute']> | null =\n    null;\n  private computeUpdate: ReturnType<ReturnType<typeof Fn>['compute']> | null =\n    null;\n\n  // Uniforms (updated every frame from render callback)\n  private uCenter = uniform(new THREE.Vector2(0.5, 0.5));\n  private uHalfSpan = uniform(0.005);\n  private uAltSpan = uniform(0.0025);\n  private uRadius = uniform(1e-6);\n  private uFallSpeed = uniform(0.0);\n  private uWindX = uniform(0.0);\n  private uWindY = uniform(0.0);\n  private uOpacity = uniform(0.8);\n  private uColor = uniform(new THREE.Color(1, 1, 1));\n\n  // Fog overlay\n  private fogMesh: THREE.Mesh | null = null;\n  private uFogOpacity = uniform(0.08);\n  private _fogEnabled = true;\n\n  private initialized = false;\n  private resizeObserver: ResizeObserver | null = null;\n\n  async init(overlayCanvas: HTMLCanvasElement): Promise<boolean> {\n    if (!(navigator as unknown as { gpu?: unknown }).gpu) {\n      console.warn('[maplibre-gl-snow] WebGPU not supported');\n      return false;\n    }\n\n    try {\n      this.renderer = new THREE.WebGPURenderer({\n        canvas: overlayCanvas,\n        antialias: false,\n        alpha: true,\n      });\n      this.renderer.setClearColor(0x000000, 0);\n      this.renderer.setPixelRatio(window.devicePixelRatio);\n      await this.renderer.init();\n\n      this.scene = new THREE.Scene();\n\n      // PerspectiveCamera — projection matrix is driven by MapLibre, not Three.js internals.\n      // Override updateProjectionMatrix to no-op so the renderer does not\n      // clobber our manually-set projection matrix from MapLibre's mercator projection.\n      this.camera = new THREE.PerspectiveCamera(60, 1, 0.001, 1000);\n      this.camera.matrixAutoUpdate = false;\n      this.camera.matrixWorld.identity();\n      this.camera.matrixWorldInverse.identity();\n      // Prevent Three.js renderer from overwriting our projection matrix\n      this.camera.updateProjectionMatrix = () => {};\n\n      this._buildParticleSystem();\n      this._buildFogOverlay();\n\n      this.initialized = true;\n      return true;\n    } catch (err) {\n      console.error('[maplibre-gl-snow] WebGPU init failed:', err);\n      return false;\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Particle system construction\n  // -------------------------------------------------------------------------\n\n  private _buildParticleSystem(): void {\n    if (!this.renderer || !this.scene) return;\n\n    const N = this.particleCount;\n\n    // Storage buffers\n    // posBuffer: vec3(mercX, mercY, mercAlt) — mercator [0,1] space\n    // velBuffer: vec4(vx, vy, valt, seed)\n    this.posBuffer = instancedArray(N, 'vec3');\n    this.velBuffer = instancedArray(N, 'vec4');\n\n    const randUint = () => uint(Math.floor(Math.random() * 0xffffff));\n\n    // ----- computeInit -----\n    const posBuffer = this.posBuffer;\n    const velBuffer = this.velBuffer;\n    const uCenter = this.uCenter;\n    const uHalfSpan = this.uHalfSpan;\n    const uAltSpan = this.uAltSpan;\n    const uFallSpeed = this.uFallSpeed;\n\n    const initFn = Fn(() => {\n      const pos = posBuffer.element(instanceIndex);\n      const vel = velBuffer.element(instanceIndex);\n\n      const rx = hash(instanceIndex);\n      const ry = hash(instanceIndex.add(randUint()));\n      const rz = hash(instanceIndex.add(randUint()));\n      const rs = hash(instanceIndex.add(randUint()));\n\n      // Spawn in a box centered at uCenter\n      // Spawn in a box centered at uCenter, scattered vertically\n      pos.x = uCenter.x.add(rx.mul(uHalfSpan.mul(2.0)).sub(uHalfSpan));\n      pos.y = uCenter.y.add(ry.mul(uHalfSpan.mul(2.0)).sub(uHalfSpan));\n      pos.z = rz.mul(uAltSpan); // altitude [0, altSpan]\n      // vel.z is a per-particle random multiplier [0.5, 1.0].\n      // Actual fall delta = uFallSpeed * vel.z, computed live in update shader.\n      vel.x = float(0.0);\n      vel.y = float(0.0);\n      vel.z = rs.mul(0.5).add(0.5); // random speed multiplier, NOT absolute speed\n      vel.w = rs; // random seed for drift\n    });\n\n    this.computeInit = initFn().compute(N);\n\n    // ----- computeUpdate -----\n    const uWindX = this.uWindX;\n    const uWindY = this.uWindY;\n\n    const updateFn = Fn(() => {\n      const pos = posBuffer.element(instanceIndex);\n      const vel = velBuffer.element(instanceIndex);\n      // Fall: actual delta = uFallSpeed * per-particle multiplier (vel.z)\n      // Wind: uWindX / uWindY are already in merc-units/frame\n      pos.x = pos.x.add(uWindX);\n      pos.y = pos.y.add(uWindY);\n      pos.z = pos.z.sub(uFallSpeed.mul(vel.z));\n\n      // Only respawn when particle has fallen below ground (pos.z < 0).\n      // No horizontal OOB check — that caused jitter when uCenter moved each frame.\n      If(pos.z.lessThan(float(0.0)), () => {\n        const rx2 = hash(instanceIndex.add(uint(Math.floor(Math.random() * 0xffffff))));\n        const ry2 = hash(instanceIndex.add(uint(Math.floor(Math.random() * 0xffffff))));\n        pos.x = uCenter.x.add(rx2.mul(uHalfSpan.mul(2.0)).sub(uHalfSpan));\n        pos.y = uCenter.y.add(ry2.mul(uHalfSpan.mul(2.0)).sub(uHalfSpan));\n        pos.z = uAltSpan; // respawn at top\n      });\n    });\n\n    this.computeUpdate = updateFn().compute(N);\n\n    // ----- Snow flake mesh -----\n    const geometry = new THREE.SphereGeometry(1, 12, 12);\n\n    const material = new THREE.MeshBasicNodeMaterial({\n      transparent: true,\n      depthWrite: false,\n      depthTest: false,\n    });\n\n    const uRadius = this.uRadius;\n    const uColor = this.uColor;\n    const uOpacity = this.uOpacity;\n\n    // positionNode: scale unit sphere by uRadius, offset by particle mercator position\n    material.positionNode = positionLocal\n      .mul(uRadius)\n      .add(posBuffer.toAttribute());\n\n    material.colorNode = vec4(uColor, uOpacity);\n\n    this.snowMesh = new THREE.Mesh(geometry, material);\n    this.snowMesh.count = N;\n    this.snowMesh.frustumCulled = false;\n\n    this.scene.add(this.snowMesh);\n  }\n\n  private _buildFogOverlay(): void {\n    if (!this.scene) return;\n\n    // Fullscreen quad using NDC-space plane\n    const geo = new THREE.PlaneGeometry(2, 2);\n    const mat = new THREE.MeshBasicNodeMaterial({\n      transparent: true,\n      depthWrite: false,\n      depthTest: false,\n    });\n\n    const uFogOpacity = this.uFogOpacity;\n\n    // Radial vignette fog (blue-white tint)\n    const vignette = screenUV.distance(float(0.5)).mul(2.0).saturate();\n    mat.colorNode = vec4(\n      color(0xd0e4f7), // cool blue-white\n      vignette.mul(uFogOpacity),\n    );\n\n    this.fogMesh = new THREE.Mesh(geo, mat);\n    this.fogMesh.frustumCulled = false;\n    this.fogMesh.renderOrder = 999;\n    this.fogMesh.visible = this._fogEnabled;\n\n    this.scene.add(this.fogMesh);\n  }\n\n  // -------------------------------------------------------------------------\n  // Called by MaplibreSnowLayer.render() every frame\n  // -------------------------------------------------------------------------\n\n  frame(projMatrix: Float32Array): void {\n    if (!this.renderer || !this.scene || !this.camera || !this.initialized)\n      return;\n\n    // Apply MapLibre's mercator projection matrix directly\n    this.camera.projectionMatrix.fromArray(projMatrix);\n    this.camera.projectionMatrixInverse\n      .copy(this.camera.projectionMatrix)\n      .invert();\n\n    // Run compute\n    if (this.computeUpdate) {\n      this.renderer.compute(this.computeUpdate);\n    }\n\n    // Render\n    this.renderer.render(this.scene, this.camera);\n  }\n\n  // Called once on first render to initialize particle positions\n  private _initRan = false;\n  runInit(): void {\n    if (this._initRan || !this.renderer || !this.computeInit) return;\n    this.renderer.compute(this.computeInit);\n    this._initRan = true;\n  }\n\n  // -------------------------------------------------------------------------\n  // Uniform updates (called from MaplibreSnowLayer)\n  // -------------------------------------------------------------------------\n\n  updateSpatial(\n    mercX: number,\n    mercY: number,\n    zoom: number,\n    canvasCSSWidth: number,\n  ): void {\n    // Pixels per mercator unit at this zoom\n    const pxToMerc = 1 / (512 * Math.pow(2, zoom));\n    const halfSpan = canvasCSSWidth * pxToMerc * 1.2; // 120% of viewport width\n    const altSpan = halfSpan * 0.5;\n\n    this.uCenter.value.set(mercX, mercY);\n    this.uHalfSpan.value = halfSpan;\n    this.uAltSpan.value = altSpan;\n    // Flake radius: stored separately, updated via setFlakeSize\n    // (radius doesn't change per-frame unless user changes it)\n  }\n\n  updateFlakeRadius(flakeSizePx: number, zoom: number, dpr: number): void {\n    const pxToMerc = 1 / (512 * Math.pow(2, zoom));\n    this.uRadius.value = flakeSizePx * pxToMerc * dpr * 0.5;\n  }\n\n  updateWind(\n    azimuthDeg: number,\n    speedPxPerSec: number,\n    zoom: number,\n    fps: number,\n  ): void {\n    const pxToMerc = 1 / (512 * Math.pow(2, zoom));\n    const azRad = (azimuthDeg * Math.PI) / 180;\n    const mercSpeedPerFrame = (speedPxPerSec * pxToMerc) / fps;\n    this.uWindX.value = Math.sin(azRad) * mercSpeedPerFrame;\n    // mercY increases downward (southward), so negate cosine for northward component\n    this.uWindY.value = Math.cos(azRad) * mercSpeedPerFrame;\n  }\n\n  updateFallSpeed(intensity: number, zoom: number, fps: number): void {\n    const pxToMerc = 1 / (512 * Math.pow(2, zoom));\n    // base fall = 40 px/s * intensity, converted to merc/frame\n    this.uFallSpeed.value = (40 * intensity * pxToMerc) / fps;\n  }\n\n  // -------------------------------------------------------------------------\n  // Public API setters\n  // -------------------------------------------------------------------------\n\n  setDensity(density: number): void {\n    const newCount = Math.round(\n      MIN_PARTICLE_COUNT +\n        Math.max(0, Math.min(1, density)) *\n          (MAX_PARTICLE_COUNT - MIN_PARTICLE_COUNT),\n    );\n    if (newCount === this.particleCount) return;\n    this.particleCount = newCount;\n    this._rebuildParticles();\n  }\n\n  private _rebuildParticles(): void {\n    if (!this.scene) return;\n    if (this.snowMesh) {\n      this.scene.remove(this.snowMesh);\n      this.snowMesh.geometry.dispose();\n      (this.snowMesh.material as THREE.Material).dispose();\n    }\n    this._initRan = false;\n    this._buildParticleSystem();\n    // Re-run init on next frame\n  }\n\n  setOpacity(value: number): void {\n    this.uOpacity.value = Math.max(0, Math.min(1, value));\n  }\n\n  setColor(r: number, g: number, b: number): void {\n    this.uColor.value.setRGB(r, g, b);\n  }\n\n  setFog(enabled: boolean): void {\n    this._fogEnabled = enabled;\n    if (this.fogMesh) this.fogMesh.visible = enabled;\n  }\n\n  setFogOpacity(value: number): void {\n    this.uFogOpacity.value = Math.max(0, Math.min(1, value));\n  }\n\n  resize(cssWidth: number, cssHeight: number): void {\n    if (!this.renderer) return;\n    this.renderer.setSize(cssWidth, cssHeight);\n  }\n\n  dispose(): void {\n    if (this.snowMesh) {\n      this.snowMesh.geometry.dispose();\n      (this.snowMesh.material as THREE.Material).dispose();\n    }\n    if (this.fogMesh) {\n      this.fogMesh.geometry.dispose();\n      (this.fogMesh.material as THREE.Material).dispose();\n    }\n    this.renderer?.dispose();\n    this.resizeObserver?.disconnect();\n  }\n\n  get ready(): boolean {\n    return this.initialized;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// MapLibre Custom Layer\n// ---------------------------------------------------------------------------\n\nclass MaplibreSnowLayer {\n  id: string;\n  readonly type = 'custom' as const;\n  readonly renderingMode = '3d' as const;\n\n  private map: MaplibreMap | null = null;\n  private overlayCanvas: HTMLCanvasElement | null = null;\n  private overlayDiv: HTMLDivElement | null = null;\n  private gpu: SnowGPU | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n\n  // Options\n  private _density: number;\n  private _intensity: number;\n  private _flakeSize: number;\n  private _opacity: number;\n  private _direction: [number, number];\n  private _fog: boolean;\n  private _fogOpacity: number;\n\n  // Frame timing\n  private _lastFrameTime = 0;\n  private _fps = 60;\n\n  constructor(options: MaplibreSnowOptions = {}) {\n    this.id = options.id ?? 'snow';\n    this._density = options.density ?? 0.5;\n    this._intensity = options.intensity ?? 0.5;\n    this._flakeSize = options.flakeSize ?? 4;\n    this._opacity = options.opacity ?? 0.8;\n    this._direction = options.direction ?? [0, 50];\n    this._fog = options.fog ?? true;\n    this._fogOpacity = options.fogOpacity ?? 0.08;\n  }\n\n  // -------------------------------------------------------------------------\n  // MapLibre lifecycle\n  // -------------------------------------------------------------------------\n\n  onAdd(map: MaplibreMap, _gl: WebGL2RenderingContext): void {\n    this.map = map;\n\n    const container = map.getContainer();\n    container.style.position = 'relative';\n\n    // Overlay div\n    this.overlayDiv = document.createElement('div');\n    Object.assign(this.overlayDiv.style, {\n      position: 'absolute',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none',\n      zIndex: '10',\n    });\n\n    // Overlay canvas\n    this.overlayCanvas = document.createElement('canvas');\n    Object.assign(this.overlayCanvas.style, {\n      width: '100%',\n      height: '100%',\n      display: 'block',\n    });\n\n    this.overlayDiv.appendChild(this.overlayCanvas);\n    container.appendChild(this.overlayDiv);\n\n    // Physical canvas size\n    const dpr = window.devicePixelRatio;\n    this.overlayCanvas.width = container.clientWidth * dpr;\n    this.overlayCanvas.height = container.clientHeight * dpr;\n\n    // Resize observer\n    this.resizeObserver = new ResizeObserver(() => {\n      if (!this.overlayCanvas || !this.map) return;\n      const c = this.map.getContainer();\n      const d = window.devicePixelRatio;\n      this.overlayCanvas.width = c.clientWidth * d;\n      this.overlayCanvas.height = c.clientHeight * d;\n      this.gpu?.resize(c.clientWidth, c.clientHeight);\n    });\n    this.resizeObserver.observe(container);\n\n    // Init WebGPU async\n    this.gpu = new SnowGPU();\n    this.gpu.init(this.overlayCanvas).then((ok) => {\n      if (!ok) return;\n      // Apply initial options after init\n      this.gpu!.setDensity(this._density);\n      this.gpu!.setOpacity(this._opacity);\n      this.gpu!.setFog(this._fog);\n      this.gpu!.setFogOpacity(this._fogOpacity);\n    });\n  }\n\n  render(_gl: WebGL2RenderingContext, args: CustomRenderMethodInput): void {\n    if (!this.gpu?.ready || !this.map) return;\n    const now = performance.now();\n    const dt = now - this._lastFrameTime;\n    if (this._lastFrameTime > 0 && dt > 0) {\n      const instantFps = 1000 / dt;\n      this._fps = this._fps * 0.9 + instantFps * 0.1;\n    }\n    this._lastFrameTime = now;\n    const fps = Math.max(10, Math.min(120, this._fps));\n    const zoom = this.map.getZoom();\n    const center = this.map.getCenter();\n    const dpr = window.devicePixelRatio;\n    const cssW = this.map.getContainer().clientWidth;\n    const merc = lngLatToMercator(center.lng, center.lat);\n    this.gpu.updateSpatial(merc.x, merc.y, zoom, cssW);\n    this.gpu.updateFlakeRadius(this._flakeSize, zoom, dpr);\n    this.gpu.updateWind(this._direction[0], this._direction[1], zoom, fps);\n    this.gpu.updateFallSpeed(this._intensity, zoom, fps);\n    this.gpu.runInit();\n    this.gpu.frame(new Float32Array(args.defaultProjectionData.mainMatrix));\n    this.map.triggerRepaint();\n  }\n\n\n  onRemove(_map: MaplibreMap, _gl: WebGL2RenderingContext): void {\n    this.resizeObserver?.disconnect();\n    this.gpu?.dispose();\n\n    if (this.overlayDiv?.parentElement) {\n      this.overlayDiv.parentElement.removeChild(this.overlayDiv);\n    }\n\n    this.map = null;\n    this.overlayDiv = null;\n    this.overlayCanvas = null;\n    this.gpu = null;\n  }\n\n  // -------------------------------------------------------------------------\n  // Public API\n  // -------------------------------------------------------------------------\n\n  setDensity(density: number): void {\n    this._density = density;\n    this.gpu?.setDensity(density);\n  }\n\n  setIntensity(intensity: number): void {\n    this._intensity = Math.max(0, Math.min(1, intensity));\n  }\n\n  setFlakeSize(size: number): void {\n    this._flakeSize = size;\n  }\n\n  setOpacity(opacity: number): void {\n    this._opacity = opacity;\n    this.gpu?.setOpacity(opacity);\n  }\n\n  setDirection(direction: [number, number]): void {\n    this._direction = direction;\n  }\n\n  setFog(enabled: boolean): void {\n    this._fog = enabled;\n    this.gpu?.setFog(enabled);\n  }\n\n  setFogOpacity(opacity: number): void {\n    this._fogOpacity = opacity;\n    this.gpu?.setFogOpacity(opacity);\n  }\n}\n\nexport { MaplibreSnowLayer };\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@geoql/maplibre-gl-snow",
+  "version": "0.0.1",
+  "private": false,
+  "description": "A MapLibre GL JS custom layer for rendering falling snow particles via Three.js WebGPU compute shaders",
+  "keywords": [
+    "layer",
+    "maplibre",
+    "particles",
+    "snow",
+    "three.js",
+    "weather",
+    "webgpu"
+  ],
+  "homepage": "https://github.com/geoql/maplibre-gl-snow#readme",
+  "bugs": {
+    "url": "https://github.com/geoql/maplibre-gl-snow/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Vinayak Kulkarni",
+    "email": "inbox.vinayak@gmail.com",
+    "url": "https://vinayakkulkarni.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geoql/maplibre-gl-snow.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "echo 'test!'",
+    "prepare": "is-ci || husky",
+    "lint": "oxlint --deny-warnings",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt --check",
+    "format:fix": "oxfmt --write",
+    "typecheck": "tsc --noEmit",
+    "publish:npm": "npm publish --access public",
+    "publish:jsr": "bunx jsr publish"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@commitlint/types": "^20.4.0",
+    "@types/node": "^25.3.0",
+    "husky": "^9.1.7",
+    "is-ci": "^4.1.0",
+    "lint-staged": "^16.2.7",
+    "maplibre-gl": "^5.19.0",
+    "oxfmt": "^0.35.0",
+    "oxlint": "^1.50.0",
+    "three": "^0.183.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "maplibre-gl": ">=3.0.0",
+    "three": ">=0.183.0"
+  },
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "packageManager": "bun@1.3.9"
+}