maplibre-copc-layer 0.0.1

package/dist/index.mjs

@@ -0,0 +1,645 @@
+import maplibregl from "maplibre-gl";
+import * as THREE from "three";
+//#region src/cache-manager.ts
+var CacheManager = class CacheManager {
+	cache = /* @__PURE__ */ new Map();
+	memoryUsage = 0;
+	options;
+	constructor(options = {}) {
+		this.options = {
+			maxNodes: options.maxNodes ?? 100,
+			maxMemoryBytes: options.maxMemoryBytes ?? 100 * 1024 * 1024,
+			debug: options.debug ?? false
+		};
+	}
+	get(nodeId) {
+		const data = this.cache.get(nodeId);
+		if (data) {
+			this.cache.delete(nodeId);
+			this.cache.set(nodeId, data);
+			data.lastAccessed = Date.now();
+			return data;
+		}
+		return null;
+	}
+	set(nodeData, protectedNodes) {
+		const { nodeId } = nodeData;
+		const existing = this.cache.get(nodeId);
+		if (existing) {
+			this.disposeNodeResources(existing);
+			this.memoryUsage -= existing.sizeBytes;
+			this.cache.delete(nodeId);
+		}
+		this.ensureCacheLimits(nodeData.sizeBytes, protectedNodes);
+		nodeData.lastAccessed = Date.now();
+		this.cache.set(nodeId, nodeData);
+		this.memoryUsage += nodeData.sizeBytes;
+		this.log(`Cached node ${nodeId} (${this.formatBytes(nodeData.sizeBytes)})`);
+	}
+	has(nodeId) {
+		return this.cache.has(nodeId);
+	}
+	delete(nodeId) {
+		const data = this.cache.get(nodeId);
+		if (!data) return false;
+		this.disposeNodeResources(data);
+		this.cache.delete(nodeId);
+		this.memoryUsage -= data.sizeBytes;
+		this.log(`Removed node ${nodeId} from cache`);
+		return true;
+	}
+	clear() {
+		for (const data of this.cache.values()) this.disposeNodeResources(data);
+		this.cache.clear();
+		this.memoryUsage = 0;
+	}
+	updateOptions(newOptions, protectedNodes) {
+		Object.assign(this.options, newOptions);
+		this.ensureCacheLimits(0, protectedNodes);
+	}
+	getCachedNodeIds() {
+		return Array.from(this.cache.keys());
+	}
+	size() {
+		return this.cache.size;
+	}
+	static estimateNodeSize(positions, colors) {
+		return positions.length * (positions instanceof Float64Array ? 8 : 4) + colors.length * 4 + 1024;
+	}
+	static createNodeData(nodeId, positions, colors, materialConfig) {
+		return {
+			nodeId,
+			positions: new Float64Array(positions),
+			colors: new Float32Array(colors),
+			pointCount: positions.length / 3,
+			materialConfig: { ...materialConfig },
+			lastAccessed: Date.now(),
+			sizeBytes: CacheManager.estimateNodeSize(positions, colors)
+		};
+	}
+	ensureCacheLimits(newItemSize, protectedNodes) {
+		while (this.cache.size >= this.options.maxNodes || this.memoryUsage + newItemSize > this.options.maxMemoryBytes) {
+			if (this.cache.size === 0) break;
+			let lruNodeId = null;
+			for (const nodeId of this.cache.keys()) if (!protectedNodes?.has(nodeId)) {
+				lruNodeId = nodeId;
+				break;
+			}
+			if (!lruNodeId) {
+				this.log("Warning: Cannot evict any nodes - all are protected. Cache limit exceeded.");
+				break;
+			}
+			this.delete(lruNodeId);
+		}
+	}
+	disposeNodeResources(data) {
+		data.geometry?.dispose();
+		if (data.points?.material instanceof THREE.Material) data.points.material.dispose();
+	}
+	formatBytes(bytes) {
+		const sizes = [
+			"B",
+			"KB",
+			"MB",
+			"GB"
+		];
+		if (bytes === 0) return "0 B";
+		const i = Math.floor(Math.log(bytes) / Math.log(1024));
+		return `${Math.round(bytes / 1024 ** i * 100) / 100} ${sizes[i]}`;
+	}
+	log(message) {
+		if (this.options.debug) console.log("[CacheManager]", message);
+	}
+};
+//#endregion
+//#region src/shaders/points.vert.glsl
+var points_vert_default = "uniform float size;\nuniform float scale;\n\n#ifdef USE_COLOR\n    varying vec3 vColor;\n#endif\n\nvoid main() {\n    #ifdef USE_COLOR\n        vColor = color;\n    #endif\n\n    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n    gl_Position = projectionMatrix * mvPosition;\n\n    gl_PointSize = size;\n\n    #ifdef USE_SIZEATTENUATION\n        gl_PointSize *= (scale / -mvPosition.z);\n    #endif\n}\n";
+//#endregion
+//#region src/shaders/points.frag.glsl
+var points_frag_default = "uniform vec3 pointColor;\n\n#ifdef USE_COLOR\n    varying vec3 vColor;\n#endif\n\nvoid main() {\n    vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n    float r = dot(cxy, cxy);\n    if (r > 1.0) {\n        discard;\n    }\n\n    #ifdef USE_COLOR\n        gl_FragColor = vec4(vColor, 1.0);\n    #else\n        gl_FragColor = vec4(pointColor, 1.0);\n    #endif\n}\n";
+//#endregion
+//#region src/shaders/edl.vert.glsl
+var edl_vert_default = "varying vec2 vUv;\n\nvoid main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+//#endregion
+//#region src/shaders/edl.frag.glsl
+var edl_frag_default = "uniform sampler2D tDepth;\nuniform sampler2D tColor;\nuniform vec2 screenSize;\nuniform float edlStrength;\nuniform float radius;\nvarying vec2 vUv;\n\nfloat readDepth(sampler2D depthSampler, vec2 coord) {\n    return texture2D(depthSampler, coord).x;\n}\n\nvoid main() {\n    vec4 color = texture2D(tColor, vUv);\n\n    if (color.a == 0.0) {\n        discard;\n    }\n\n    float depth = readDepth(tDepth, vUv);\n\n    float response = 0.0;\n    vec2 texelSize = 1.0 / screenSize;\n\n    for (int i = -2; i <= 2; i++) {\n        for (int j = -2; j <= 2; j++) {\n            if (i == 0 && j == 0) continue;\n\n            vec2 offset = vec2(float(i), float(j)) * texelSize * radius;\n            vec2 sampleCoord = vUv + offset;\n\n            if (sampleCoord.x < 0.0 || sampleCoord.x > 1.0 ||\n                sampleCoord.y < 0.0 || sampleCoord.y > 1.0) {\n                continue;\n            }\n\n            float sampleDepth = readDepth(tDepth, sampleCoord);\n            float depthDiff = depth - sampleDepth;\n\n            if (depthDiff > 0.0) {\n                response += min(1.0, depthDiff * 100.0);\n            }\n        }\n    }\n\n    response /= 24.0;\n    float edl = exp(-response * edlStrength);\n\n    gl_FragColor = vec4(color.rgb * edl, color.a);\n}\n";
+//#endregion
+//#region src/copclayer.ts
+const EARTH_CIRCUMFERENCE = 2 * Math.PI * 6378137;
+const DEG2RAD = Math.PI / 180;
+const DEFAULT_OPTIONS = {
+	pointSize: 6,
+	colorMode: "rgb",
+	maxCacheSize: 100,
+	sseThreshold: 8,
+	depthTest: true,
+	maxCacheMemory: 100 * 1024 * 1024,
+	debug: false,
+	enableEDL: false,
+	edlStrength: .4,
+	edlRadius: 1.5,
+	wasmPath: void 0,
+	onInitialized: () => {}
+};
+var CopcLayer = class {
+	id;
+	type = "custom";
+	renderingMode = "3d";
+	url;
+	map;
+	camera;
+	scene;
+	renderer;
+	worker;
+	cacheManager;
+	options;
+	visibleNodes = [];
+	workerInitialized = false;
+	pendingRequests = /* @__PURE__ */ new Set();
+	requestQueue = [];
+	lastCameraPosition = null;
+	sceneCenter = null;
+	colorTarget;
+	depthTarget;
+	edlMaterial;
+	edlQuadScene;
+	edlQuadCamera;
+	_tempMatrix1 = new THREE.Matrix4();
+	_tempMatrix2 = new THREE.Matrix4();
+	_lastEdlWidth = 0;
+	_lastEdlHeight = 0;
+	_lastUpdatePointsTime = 0;
+	constructor(url, options = {}, layerId = "copc-layer") {
+		this.id = layerId;
+		this.url = url;
+		this.options = {
+			...DEFAULT_OPTIONS,
+			...options
+		};
+		this.cacheManager = new CacheManager({
+			maxNodes: this.options.maxCacheSize,
+			maxMemoryBytes: this.options.maxCacheMemory,
+			debug: this.options.debug
+		});
+		this.camera = new THREE.Camera();
+		this.scene = new THREE.Scene();
+		this.worker = new Worker(new URL("./worker/index.ts", import.meta.url), { type: "module" });
+		this.setupWorkerMessageHandlers();
+	}
+	setupWorkerMessageHandlers() {
+		this.worker.onmessage = (event) => {
+			const message = event.data;
+			switch (message.type) {
+				case "initialized":
+					this.workerInitialized = true;
+					this.requestNodeData("0-0-0-0");
+					this.options.onInitialized?.(message);
+					break;
+				case "nodeLoaded":
+					this.handleNodeLoaded(message.node, message.positions, message.colors);
+					break;
+				case "nodesToLoad":
+					this.cancelAllPendingRequests();
+					this.lastCameraPosition = message.cameraPosition;
+					this.visibleNodes = message.nodes;
+					this.updateVisibleNodes();
+					break;
+				case "error":
+					if (this.options.debug) console.error("[CopcLayer] Worker error:", message.message);
+					break;
+			}
+			this.map?.triggerRepaint();
+		};
+		this.worker.onerror = (error) => {
+			if (this.options.debug) console.error("[CopcLayer] Worker error event:", error);
+		};
+	}
+	handleNodeLoaded(nodeId, positionsBuffer, colorsBuffer) {
+		this.pendingRequests.delete(nodeId);
+		this.removeFromRequestQueue(nodeId);
+		const positions = new Float64Array(positionsBuffer);
+		const colors = new Float32Array(colorsBuffer);
+		const nodeData = CacheManager.createNodeData(nodeId, positions, colors, {
+			colorMode: this.options.colorMode,
+			pointSize: this.options.pointSize,
+			depthTest: this.options.depthTest
+		});
+		const geometry = new THREE.BufferGeometry();
+		if (this.sceneCenter) {
+			const { x: cx, y: cy, z: cz } = this.sceneCenter;
+			const relativePositions = new Float32Array(positions.length);
+			for (let i = 0; i < positions.length; i += 3) {
+				relativePositions[i] = positions[i] - cx;
+				relativePositions[i + 1] = positions[i + 1] - cy;
+				relativePositions[i + 2] = positions[i + 2] - cz;
+			}
+			geometry.setAttribute("position", new THREE.BufferAttribute(relativePositions, 3));
+		} else geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(positions), 3));
+		geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+		const material = this.createPointMaterial();
+		const points = new THREE.Points(geometry, material);
+		nodeData.geometry = geometry;
+		nodeData.points = points;
+		const protectedNodes = new Set(this.visibleNodes);
+		this.cacheManager.set(nodeData, protectedNodes);
+	}
+	updateVisibleNodes() {
+		while (this.scene.children.length > 0) this.scene.remove(this.scene.children[0]);
+		const nodesToRequest = [];
+		for (const nodeId of this.visibleNodes) {
+			const cachedData = this.cacheManager.get(nodeId);
+			if (cachedData?.points) {
+				this.scene.add(cachedData.points);
+				if (this.needsMaterialUpdate(cachedData)) this.updateNodeMaterial(cachedData);
+			} else if (!this.pendingRequests.has(nodeId)) nodesToRequest.push(nodeId);
+		}
+		for (const nodeId of this.prioritizeNodeRequests(nodesToRequest)) this.requestNodeData(nodeId);
+	}
+	requestNodeData(nodeId) {
+		if (this.pendingRequests.has(nodeId)) return;
+		this.pendingRequests.add(nodeId);
+		this.requestQueue.push(nodeId);
+		this.worker.postMessage({
+			type: "loadNode",
+			node: nodeId
+		});
+	}
+	needsMaterialUpdate(nodeData) {
+		const { materialConfig: c } = nodeData;
+		return c.colorMode !== this.options.colorMode || c.pointSize !== this.options.pointSize || c.depthTest !== this.options.depthTest;
+	}
+	updateNodeMaterial(nodeData) {
+		if (!nodeData.points) return;
+		if (nodeData.points.material instanceof THREE.Material) nodeData.points.material.dispose();
+		nodeData.points.material = this.createPointMaterial();
+		nodeData.materialConfig = {
+			colorMode: this.options.colorMode,
+			pointSize: this.options.pointSize,
+			depthTest: this.options.depthTest
+		};
+	}
+	rebuildAllMaterials() {
+		for (const nodeId of this.cacheManager.getCachedNodeIds()) {
+			const nodeData = this.cacheManager.get(nodeId);
+			if (nodeData) this.updateNodeMaterial(nodeData);
+		}
+	}
+	removeFromRequestQueue(nodeId) {
+		const index = this.requestQueue.indexOf(nodeId);
+		if (index > -1) this.requestQueue.splice(index, 1);
+	}
+	cancelAllPendingRequests() {
+		if (this.pendingRequests.size === 0) return;
+		this.worker.postMessage({
+			type: "cancelRequests",
+			nodes: Array.from(this.pendingRequests)
+		});
+		this.pendingRequests.clear();
+		this.requestQueue.length = 0;
+	}
+	prioritizeNodeRequests(nodeIds) {
+		if (!this.lastCameraPosition || nodeIds.length <= 1) return nodeIds;
+		const [camLon, camLat] = this.lastCameraPosition;
+		const nodesWithPriority = nodeIds.map((nodeId) => {
+			const [depth, x, y] = nodeId.split("-").map(Number);
+			const nodeSize = 1 / 2 ** depth;
+			const nodeCenterX = x * nodeSize + nodeSize / 2;
+			const nodeCenterY = y * nodeSize + nodeSize / 2;
+			const dx = nodeCenterX - camLon;
+			const dy = nodeCenterY - camLat;
+			const distance = Math.sqrt(dx * dx + dy * dy);
+			return {
+				nodeId,
+				priority: depth * 10 + (distance > 0 ? 1e3 / distance : 1e3) * .1
+			};
+		});
+		nodesWithPriority.sort((a, b) => b.priority - a.priority);
+		return nodesWithPriority.map((n) => n.nodeId);
+	}
+	async onAdd(map, gl) {
+		this.map = map;
+		this.worker.postMessage({
+			type: "init",
+			url: this.url,
+			options: {
+				colorMode: this.options.colorMode,
+				maxCacheSize: this.options.maxCacheSize,
+				wasmPath: this.options.wasmPath
+			}
+		});
+		this.renderer = new THREE.WebGLRenderer({
+			canvas: map.getCanvas(),
+			context: gl
+		});
+		this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+		this.renderer.autoClear = false;
+		if (this.options.enableEDL) this.setupEDL();
+	}
+	updateCacheConfig(config) {
+		Object.assign(this.options, config);
+		const protectedNodes = new Set(this.visibleNodes);
+		this.cacheManager.updateOptions({
+			maxNodes: this.options.maxCacheSize,
+			maxMemoryBytes: this.options.maxCacheMemory,
+			debug: this.options.debug
+		}, protectedNodes);
+		this.updateVisibleNodes();
+	}
+	setPointSize(size) {
+		this.options.pointSize = size;
+		this.rebuildAllMaterials();
+		this.map?.triggerRepaint();
+	}
+	setSseThreshold(threshold) {
+		this.options.sseThreshold = threshold;
+		this.updatePoints();
+		this.map?.triggerRepaint();
+	}
+	setDepthTest(enabled) {
+		this.options.depthTest = enabled;
+		this.rebuildAllMaterials();
+		this.map?.triggerRepaint();
+	}
+	/**
+	* Compute camera altitude in meters above sea level.
+	* MapLibre's getCameraAltitude() returns NaN in Globe mode because
+	* the Globe transform's internal _pixelPerMeter is never initialized.
+	* We replicate the formula using publicly accessible values.
+	*/
+	computeCameraAltitude(fov, height, zoom) {
+		if (!this.map) return 0;
+		const latRad = this.map.getCenter().lat * DEG2RAD;
+		const fovRad = fov * DEG2RAD;
+		const pitchRad = this.map.getPitch() * DEG2RAD;
+		const pixelPerMeter = 512 * 2 ** zoom / (EARTH_CIRCUMFERENCE * Math.cos(latRad));
+		const cameraToCenterDistance = height / (2 * Math.tan(fovRad / 2));
+		return Math.cos(pitchRad) * cameraToCenterDistance / pixelPerMeter;
+	}
+	updatePoints() {
+		if (!this.map || !this.workerInitialized) return;
+		const now = performance.now();
+		if (now - this._lastUpdatePointsTime < 100) return;
+		this._lastUpdatePointsTime = now;
+		const fov = this.map.transform.fov;
+		const height = this.map.transform.height;
+		const zoom = this.map.getZoom();
+		const cameraLngLat = this.map.transform.getCameraLngLat().toArray();
+		const cameraAltitude = this.computeCameraAltitude(fov, height, zoom);
+		this.worker.postMessage({
+			type: "updatePoints",
+			cameraPosition: [...cameraLngLat, cameraAltitude],
+			mapHeight: height,
+			fov,
+			sseThreshold: this.options.sseThreshold,
+			zoom
+		});
+	}
+	render(_gl, options) {
+		if (!this.map || !this.renderer) return;
+		if (!this.sceneCenter || this.shouldUpdateSceneCenter()) {
+			const center = this.map.getCenter();
+			this.sceneCenter = maplibregl.MercatorCoordinate.fromLngLat(center);
+			this.clearCache();
+		}
+		const centerLngLat = this.sceneCenter.toLngLat();
+		const modelMatrix = this.map.transform.getMatrixForModel([centerLngLat.lng, centerLngLat.lat], 0);
+		const invS = 1 / this.sceneCenter.meterInMercatorCoordinateUnits();
+		this._tempMatrix1.fromArray(options.defaultProjectionData.mainMatrix);
+		this._tempMatrix2.fromArray(modelMatrix);
+		this._tempMatrix1.multiply(this._tempMatrix2);
+		this._tempMatrix2.set(invS, 0, 0, 0, 0, 0, EARTH_CIRCUMFERENCE, 0, 0, invS, 0, 0, 0, 0, 0, 1);
+		this._tempMatrix1.multiply(this._tempMatrix2);
+		this.camera.projectionMatrix.copy(this._tempMatrix1);
+		this.updatePoints();
+		this.renderer.setSize(this.map.getCanvas().width, this.map.getCanvas().height);
+		if (this.options.enableEDL) this.updateEDLSize();
+		this.renderer.resetState();
+		if (this.options.enableEDL && this.colorTarget && this.depthTarget && this.edlQuadScene && this.edlQuadCamera) {
+			this.renderer.setRenderTarget(this.depthTarget);
+			this.renderer.clear();
+			this.renderer.render(this.scene, this.camera);
+			this.renderer.setRenderTarget(this.colorTarget);
+			this.renderer.clear();
+			this.renderer.render(this.scene, this.camera);
+			this.renderer.setRenderTarget(null);
+			this.renderer.render(this.edlQuadScene, this.edlQuadCamera);
+		} else this.renderer.render(this.scene, this.camera);
+		this.map.triggerRepaint();
+	}
+	shouldUpdateSceneCenter() {
+		if (!this.sceneCenter || !this.map) return true;
+		const currentMercator = maplibregl.MercatorCoordinate.fromLngLat(this.map.getCenter());
+		const dx = currentMercator.x - this.sceneCenter.x;
+		const dy = currentMercator.y - this.sceneCenter.y;
+		return Math.sqrt(dx * dx + dy * dy) > .001;
+	}
+	onRemove(_map, _gl) {
+		this.worker.terminate();
+		this.cacheManager.clear();
+		this.visibleNodes.length = 0;
+		this.pendingRequests.clear();
+		this.requestQueue.length = 0;
+		this.colorTarget?.dispose();
+		this.colorTarget = void 0;
+		this.depthTarget?.dispose();
+		this.depthTarget = void 0;
+		this.edlMaterial?.dispose();
+		this.edlMaterial = void 0;
+		this.edlQuadScene?.clear();
+		this.edlQuadScene = void 0;
+		this.edlQuadCamera = void 0;
+	}
+	setupEDL() {
+		if (!this.renderer || !this.map) return;
+		const width = this.map.getCanvas().width;
+		const height = this.map.getCanvas().height;
+		this.colorTarget = new THREE.WebGLRenderTarget(width, height, {
+			minFilter: THREE.LinearFilter,
+			magFilter: THREE.LinearFilter,
+			format: THREE.RGBAFormat
+		});
+		this.depthTarget = new THREE.WebGLRenderTarget(width, height, {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			format: THREE.RGBAFormat,
+			depthBuffer: true,
+			depthTexture: new THREE.DepthTexture(width, height)
+		});
+		this.edlMaterial = new THREE.ShaderMaterial({
+			uniforms: {
+				tColor: { value: this.colorTarget.texture },
+				tDepth: { value: this.depthTarget.depthTexture },
+				screenSize: { value: new THREE.Vector2(width, height) },
+				edlStrength: { value: this.options.edlStrength },
+				radius: { value: this.options.edlRadius }
+			},
+			vertexShader: edl_vert_default,
+			fragmentShader: edl_frag_default
+		});
+		this.edlQuadScene = new THREE.Scene();
+		this.edlQuadCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const geometry = new THREE.PlaneGeometry(2, 2);
+		const quad = new THREE.Mesh(geometry, this.edlMaterial);
+		this.edlQuadScene.add(quad);
+	}
+	updateEDLSize() {
+		if (!this.map || !this.colorTarget || !this.depthTarget || !this.edlMaterial) return;
+		const width = this.map.getCanvas().width;
+		const height = this.map.getCanvas().height;
+		if (width === this._lastEdlWidth && height === this._lastEdlHeight) return;
+		this._lastEdlWidth = width;
+		this._lastEdlHeight = height;
+		this.colorTarget.setSize(width, height);
+		this.depthTarget.setSize(width, height);
+		this.edlMaterial.uniforms.screenSize.value.set(width, height);
+	}
+	createPointMaterial() {
+		if (this.options.enableEDL) return new THREE.ShaderMaterial({
+			uniforms: {
+				size: { value: this.options.pointSize },
+				scale: { value: window.devicePixelRatio },
+				useVertexColors: { value: this.options.colorMode !== "white" },
+				pointColor: { value: new THREE.Color(16777215) }
+			},
+			vertexShader: points_vert_default,
+			fragmentShader: points_frag_default,
+			vertexColors: this.options.colorMode !== "white",
+			depthTest: this.options.depthTest,
+			depthWrite: this.options.depthTest,
+			transparent: false
+		});
+		const material = new THREE.PointsMaterial({
+			vertexColors: this.options.colorMode !== "white",
+			size: this.options.pointSize,
+			depthTest: this.options.depthTest,
+			depthWrite: this.options.depthTest,
+			sizeAttenuation: true
+		});
+		if (this.options.colorMode === "white") material.color.setHex(16777215);
+		return material;
+	}
+	getPointSize() {
+		return this.options.pointSize;
+	}
+	getColorMode() {
+		return this.options.colorMode;
+	}
+	getSseThreshold() {
+		return this.options.sseThreshold;
+	}
+	getDepthTest() {
+		return this.options.depthTest;
+	}
+	getOptions() {
+		return { ...this.options };
+	}
+	isLoading() {
+		return this.pendingRequests.size > 0 || !this.workerInitialized;
+	}
+	getNodeStats() {
+		return {
+			loaded: this.cacheManager.size(),
+			visible: this.visibleNodes.length
+		};
+	}
+	clearCache() {
+		this.cacheManager.clear();
+		this.updateVisibleNodes();
+	}
+	setEDLEnabled(enabled) {
+		this.options.enableEDL = enabled;
+		if (enabled && !this.edlMaterial) this.setupEDL();
+		this.rebuildAllMaterials();
+		this.map?.triggerRepaint();
+	}
+	updateEDLParameters(params) {
+		if (!this.edlMaterial) return;
+		if (params.strength !== void 0) {
+			this.options.edlStrength = params.strength;
+			this.edlMaterial.uniforms.edlStrength.value = params.strength;
+		}
+		if (params.radius !== void 0) {
+			this.options.edlRadius = params.radius;
+			this.edlMaterial.uniforms.radius.value = params.radius;
+		}
+		this.map?.triggerRepaint();
+	}
+	getEDLParameters() {
+		return {
+			enabled: this.options.enableEDL,
+			strength: this.options.edlStrength,
+			radius: this.options.edlRadius
+		};
+	}
+};
+//#endregion
+//#region src/globe-control.ts
+/**
+* A MapLibre control that toggles between Mercator and Globe projections.
+*/
+var GlobeControl = class {
+	map;
+	container;
+	button;
+	isGlobe = false;
+	onAdd(map) {
+		this.map = map;
+		this.container = document.createElement("div");
+		this.container.classList.add("maplibregl-ctrl", "maplibregl-ctrl-group");
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.title = "Toggle Globe view";
+		this.button.setAttribute("aria-label", "Toggle Globe view");
+		this.button.style.cssText = "display:flex;align-items:center;justify-content:center;";
+		this.updateIcon();
+		this.button.addEventListener("click", this.toggle);
+		this.container.appendChild(this.button);
+		return this.container;
+	}
+	onRemove() {
+		this.button?.removeEventListener("click", this.toggle);
+		this.container?.remove();
+		this.map = void 0;
+		this.container = void 0;
+		this.button = void 0;
+	}
+	getDefaultPosition() {
+		return "top-right";
+	}
+	toggle = () => {
+		if (!this.map) return;
+		this.isGlobe = !this.isGlobe;
+		const projection = this.isGlobe ? "globe" : "mercator";
+		this.map.setProjection({ type: projection });
+		this.updateIcon();
+	};
+	updateIcon() {
+		if (!this.button) return;
+		if (this.isGlobe) this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="12" y1="3" x2="12" y2="21"/></svg>`;
+		else this.button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>`;
+	}
+};
+//#endregion
+//#region src/worker/sse.ts
+function distance(a, b) {
+	const dx = a[0] - b[0];
+	const dy = a[1] - b[1];
+	const dz = a[2] - b[2];
+	return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+/**
+* Calculates Screen Space Error (SSE) for a point cloud node.
+* Higher SSE = more visible error = should render with higher detail.
+*
+* @param maxDistance - Optional maximum effective distance. When the camera is
+*   extremely far away (e.g. Globe View at low zoom), the distance is capped
+*   to this value so that SSE does not approach 0.
+*/
+function computeScreenSpaceError(cameraCenter, center, fov, geometricError, screenHeight, maxDistance) {
+	let dist = distance(cameraCenter, center);
+	if (maxDistance !== void 0 && dist > maxDistance) dist = maxDistance;
+	const fovRad = fov * (Math.PI / 180);
+	return geometricError * screenHeight / (2 * dist * Math.tan(fovRad / 2));
+}
+//#endregion
+export { CacheManager, CopcLayer, GlobeControl, computeScreenSpaceError };

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "maplibre-copc-layer",
+	"type": "module",
+	"version": "0.0.1",
+	"description": "A library for loading and rendering Cloud-Optimized Point Cloud (COPC) data in MapLibre GL JS using Three.js.",
+	"license": "MIT",
+	"exports": {
+		".": "./dist/index.mjs",
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"scripts": {
+		"build": "vp pack",
+		"build:demo": "vp build --outDir demo --base ./",
+		"dev": "vp dev",
+		"test": "vp test",
+		"typecheck": "tsc --noEmit",
+		"release": "bumpp",
+		"prepublishOnly": "pnpm run build"
+	},
+	"dependencies": {
+		"copc": "^0.0.8",
+		"proj4": "^2.15.0"
+	},
+	"peerDependencies": {
+		"maplibre-gl": ">=5.0.0",
+		"three": ">=0.150.0"
+	},
+	"devDependencies": {
+		"@cloudflare/kv-asset-handler": "^0.4.2",
+		"@types/node": "^25.5.0",
+		"@types/proj4": "^2.5.6",
+		"@types/three": "^0.173.0",
+		"@typescript/native-preview": "7.0.0-dev.20260316.1",
+		"bumpp": "^11.0.1",
+		"maplibre-gl": "^5.1.1",
+		"three": "^0.173.0",
+		"typescript": "^5.9.3",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"pnpm": {
+		"overrides": {
+			"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+			"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+		}
+	},
+	"packageManager": "pnpm@10.32.1"
+}