@treasuryspatial/map-kit 0.1.3 → 0.1.5

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,CAoJhF"}
+{"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,CA+OhF"}

package/dist/mapThreeLayer.js

@@ -1,7 +1,7 @@
 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;
@@ -18,6 +18,55 @@ export function createMapThreeLayer(options) {
     let zOffset = zOffsetMeters;
     let targetWidth = 0;
     let targetHeight = 0;
+    let renderDisabled = false;
+    let errorCount = 0;
+    let hasRenderable = false;
+    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 updateRenderable = (group) => {
+        if (!group) {
+            hasRenderable = false;
+            return;
+        }
+        let found = false;
+        group.traverse((child) => {
+            if (found)
+                return;
+            const mesh = child;
+            if (!mesh.isMesh)
+                return;
+            if (mesh.visible === false)
+                return;
+            const geometry = mesh.geometry;
+            const position = geometry?.getAttribute?.('position');
+            if (position && position.count > 0) {
+                found = true;
+            }
+        });
+        hasRenderable = found;
+    };
     const layer = {
         id,
         type: 'custom',
@@ -46,6 +95,7 @@ export function createMapThreeLayer(options) {
             });
             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({
@@ -66,41 +116,89 @@ export function createMapThreeLayer(options) {
                 onInit(scene, renderer, camera);
         },
         prerender: (_gl, matrix) => {
+            if (renderDisabled)
+                return;
             if (!renderer || !scene || !camera || !rootGroup || !renderTarget)
                 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 (!hasRenderable)
+                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.setClearColor(0x000000, 0);
+                renderer.setClearAlpha(0);
+                renderer.clear(true, true, true);
+                const gl = renderer.getContext();
+                checkFramebuffer(gl, 'prerender');
+                renderer.render(scene, camera);
+                logGlError(gl, 'prerender');
+                renderer.setRenderTarget(null);
             }
-            const canvas = mapRef?.getCanvas();
-            if (canvas && (canvas.width !== targetWidth || canvas.height !== targetHeight)) {
-                targetWidth = canvas.width;
-                targetHeight = canvas.height;
-                renderTarget.setSize(targetWidth, targetHeight);
+            catch (err) {
+                errorCount += 1;
+                logError('prerender failed', err);
+                if (errorCount > 2) {
+                    renderDisabled = true;
+                    log('render disabled after repeated errors');
+                }
             }
-            renderer.setRenderTarget(renderTarget);
-            renderer.clear(true, true, true);
-            renderer.render(scene, camera);
-            renderer.setRenderTarget(null);
         },
         render: (gl) => {
+            if (renderDisabled)
+                return;
             if (!renderer || !screenScene || !screenCamera)
                 return;
-            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);
-            mapRef?.triggerRepaint();
+            if (!hasRenderable)
+                return;
+            try {
+                renderer.resetState();
+                gl.disable(gl.DEPTH_TEST);
+                gl.depthMask(false);
+                gl.disable(gl.STENCIL_TEST);
+                gl.disable(gl.SCISSOR_TEST);
+                gl.colorMask(true, true, true, true);
+                gl.enable(gl.BLEND);
+                gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                const canvas = mapRef?.getCanvas();
+                if (canvas) {
+                    renderer.setViewport(0, 0, canvas.width, canvas.height);
+                }
+                renderer.render(screenScene, screenCamera);
+                logGlError(gl, 'render');
+                renderer.resetState();
+                mapRef?.triggerRepaint();
+            }
+            catch (err) {
+                errorCount += 1;
+                logError('render failed', err);
+                if (errorCount > 2) {
+                    renderDisabled = true;
+                    log('render disabled after repeated errors');
+                }
+            }
         },
     };
     return {
         layer,
         setGroup: (group) => {
             meshGroup = group;
+            updateRenderable(group);
+            if (debug) {
+                log('group set', { hasRenderable });
+            }
             if (rootGroup) {
                 rootGroup.clear();
                 if (meshGroup)

package/package.json

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