@treasuryspatial/map-kit 0.1.2 → 0.1.4

package/dist/mapThreeLayer.d.ts

@@ -13,6 +13,7 @@ export type MapThreeLayerOptions = {
     id: string;
     zOffsetMeters?: number;
     onInit?: (scene: THREE.Scene, renderer: THREE.WebGLRenderer, camera: THREE.Camera) => void;
+    debug?: boolean;
 };
 export declare function createMapThreeLayer(options: MapThreeLayerOptions): MapThreeLayer;
 //# sourceMappingURL=mapThreeLayer.d.ts.map

package/dist/mapThreeLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;CAC5F,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CA4FhF"}
+{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAyMhF"}

package/dist/mapThreeLayer.js

@@ -1,20 +1,53 @@
 import mapboxgl from 'mapbox-gl';
 import * as THREE from 'three';
 export function createMapThreeLayer(options) {
-    const { id, zOffsetMeters = 0.02, onInit } = options;
+    const { id, zOffsetMeters = 0.02, onInit, debug = false } = options;
     let mapRef = null;
     let scene = null;
     let camera = null;
     let renderer = null;
+    let screenScene = null;
+    let screenCamera = null;
+    let screenMaterial = null;
+    let screenQuad = null;
+    let renderTarget = null;
     let rootGroup = null;
     let meshGroup = null;
     let mercatorOrigin = null;
     let meterScale = 1;
     let zOffset = zOffsetMeters;
+    let targetWidth = 0;
+    let targetHeight = 0;
+    let renderDisabled = false;
+    let errorCount = 0;
+    const log = (...args) => {
+        if (!debug)
+            return;
+        console.info(`[map-kit:${id}]`, ...args);
+    };
+    const logError = (message, err) => {
+        console.error(`[map-kit:${id}] ${message}`, err);
+    };
+    const logGlError = (gl, label) => {
+        if (!debug)
+            return;
+        const error = gl.getError();
+        if (error !== gl.NO_ERROR) {
+            log(`GL error (${label})`, error);
+        }
+    };
+    const checkFramebuffer = (gl, label) => {
+        if (!debug)
+            return;
+        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+            log(`Framebuffer incomplete (${label})`, status);
+        }
+    };
     const layer = {
         id,
         type: 'custom',
-        renderingMode: '3d',
+        renderingMode: '2d',
         onAdd: (map, gl) => {
             mapRef = map;
             scene = new THREE.Scene();
@@ -29,6 +62,28 @@ export function createMapThreeLayer(options) {
             renderer.outputColorSpace = THREE.SRGBColorSpace;
             renderer.toneMapping = THREE.NeutralToneMapping;
             renderer.toneMappingExposure = 1.05;
+            renderer.setClearColor(0x000000, 0);
+            const canvas = map.getCanvas();
+            targetWidth = canvas.width;
+            targetHeight = canvas.height;
+            renderTarget = new THREE.WebGLRenderTarget(targetWidth, targetHeight, {
+                depthBuffer: true,
+                stencilBuffer: false,
+            });
+            renderTarget.texture.colorSpace = THREE.SRGBColorSpace;
+            renderTarget.texture.premultiplyAlpha = true;
+            log('renderTarget', { width: targetWidth, height: targetHeight });
+            screenScene = new THREE.Scene();
+            screenCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+            screenMaterial = new THREE.MeshBasicMaterial({
+                map: renderTarget.texture,
+                transparent: true,
+                depthTest: false,
+                depthWrite: false,
+            });
+            screenMaterial.premultipliedAlpha = true;
+            screenQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), screenMaterial);
+            screenScene.add(screenQuad);
             rootGroup = new THREE.Group();
             rootGroup.matrixAutoUpdate = false;
             scene.add(rootGroup);
@@ -37,20 +92,65 @@ export function createMapThreeLayer(options) {
             if (onInit && renderer && camera)
                 onInit(scene, renderer, camera);
         },
-        render: (_gl, matrix) => {
-            if (!renderer || !scene || !camera || !rootGroup)
+        prerender: (_gl, matrix) => {
+            if (renderDisabled)
+                return;
+            if (!renderer || !scene || !camera || !rootGroup || !renderTarget)
+                return;
+            try {
+                camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
+                if (mercatorOrigin) {
+                    const translate = new THREE.Matrix4().makeTranslation(mercatorOrigin.x, mercatorOrigin.y, (mercatorOrigin.z ?? 0) + zOffset * meterScale);
+                    const scale = new THREE.Matrix4().makeScale(meterScale, -meterScale, meterScale);
+                    rootGroup.matrix = new THREE.Matrix4().multiplyMatrices(translate, scale);
+                    rootGroup.matrixWorldNeedsUpdate = true;
+                }
+                const canvas = mapRef?.getCanvas();
+                if (canvas && (canvas.width !== targetWidth || canvas.height !== targetHeight)) {
+                    targetWidth = canvas.width;
+                    targetHeight = canvas.height;
+                    renderTarget.setSize(targetWidth, targetHeight);
+                    log('renderTarget resized', { width: targetWidth, height: targetHeight });
+                }
+                renderer.setRenderTarget(renderTarget);
+                renderer.clear(true, true, true);
+                const gl = renderer.getContext();
+                checkFramebuffer(gl, 'prerender');
+                renderer.render(scene, camera);
+                logGlError(gl, 'prerender');
+                renderer.setRenderTarget(null);
+            }
+            catch (err) {
+                errorCount += 1;
+                logError('prerender failed', err);
+                if (errorCount > 2) {
+                    renderDisabled = true;
+                    log('render disabled after repeated errors');
+                }
+            }
+        },
+        render: (gl) => {
+            if (renderDisabled)
                 return;
-            camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
-            if (mercatorOrigin) {
-                const translate = new THREE.Matrix4().makeTranslation(mercatorOrigin.x, mercatorOrigin.y, (mercatorOrigin.z ?? 0) + zOffset * meterScale);
-                const scale = new THREE.Matrix4().makeScale(meterScale, -meterScale, meterScale);
-                rootGroup.matrix = new THREE.Matrix4().multiplyMatrices(translate, scale);
-                rootGroup.matrixWorldNeedsUpdate = true;
+            if (!renderer || !screenScene || !screenCamera)
+                return;
+            try {
+                renderer.resetState();
+                gl.disable(gl.DEPTH_TEST);
+                gl.enable(gl.BLEND);
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                renderer.render(screenScene, screenCamera);
+                logGlError(gl, 'render');
+                mapRef?.triggerRepaint();
+            }
+            catch (err) {
+                errorCount += 1;
+                logError('render failed', err);
+                if (errorCount > 2) {
+                    renderDisabled = true;
+                    log('render disabled after repeated errors');
+                }
             }
-            renderer.resetState();
-            renderer.clearDepth();
-            renderer.render(scene, camera);
-            mapRef?.triggerRepaint();
         },
     };
     return {
@@ -78,9 +178,19 @@ export function createMapThreeLayer(options) {
             if (rootGroup) {
                 rootGroup.clear();
             }
+            if (screenQuad) {
+                screenQuad.geometry.dispose();
+            }
+            screenMaterial?.dispose();
+            renderTarget?.dispose();
             meshGroup = null;
             scene = null;
             camera = null;
+            screenScene = null;
+            screenCamera = null;
+            screenMaterial = null;
+            screenQuad = null;
+            renderTarget = null;
             renderer = null;
             mapRef = null;
             mercatorOrigin = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treasuryspatial/map-kit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",