@treasuryspatial/map-kit 0.1.16 → 0.1.18

package/dist/mapLayers.js

@@ -35,9 +35,9 @@ export function ensureFootprintLayers(map) {
         type: 'line',
         source: 'footprint-hover',
         paint: {
-            'line-color': '#f8d34a',
-            'line-width': 2,
-            'line-opacity': 0.9,
+            'line-color': '#2F4A3C',
+            'line-width': 1.2,
+            'line-opacity': 0.8,
         },
     });
     if (!map.getSource('footprint-selected')) {
@@ -51,9 +51,9 @@ export function ensureFootprintLayers(map) {
         type: 'line',
         source: 'footprint-selected',
         paint: {
-            'line-color': '#6ee7ff',
-            'line-width': 3,
-            'line-opacity': 1,
+            'line-color': '#8C3A2B',
+            'line-width': 1.6,
+            'line-opacity': 0.9,
         },
     });
     const setSource = (id, feature) => {

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;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAsWhF"}
+{"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,CAofhF"}

package/dist/mapThreeLayer.js

@@ -2,6 +2,9 @@ import mapboxgl from 'mapbox-gl';
 import * as THREE from 'three';
 export function createMapThreeLayer(options) {
     const { id, zOffsetMeters = 0.02, onInit, debug = false } = options;
+    const useOffscreen = true;
+    const debugFill = typeof window !== 'undefined' &&
+        /(?:mapDebugFill=1|DebugFill=1)/.test(window.location.href);
     let mapRef = null;
     let scene = null;
     let camera = null;
@@ -25,7 +28,14 @@ export function createMapThreeLayer(options) {
     let didPrerender = false;
     let lastMatrix = null;
     let renderTicks = 0;
+    let blitProgram = null;
+    let blitBuffer = null;
+    let blitAttribPos = -1;
+    let blitAttribUv = -1;
+    let blitUniformTex = null;
     const renderOffscreen = () => {
+        if (!useOffscreen)
+            return;
         if (renderDisabled)
             return;
         if (!renderer || !scene || !camera || !rootGroup || !renderTarget)
@@ -75,8 +85,14 @@ export function createMapThreeLayer(options) {
         gl.colorMask(true, true, true, true);
         gl.depthMask(true);
         renderer.setViewport(0, 0, targetWidth, targetHeight);
-        renderer.setClearColor(0x000000, 0);
-        renderer.setClearAlpha(0);
+        if (debugFill) {
+            renderer.setClearColor(0xff00ff, 1);
+            renderer.setClearAlpha(1);
+        }
+        else {
+            renderer.setClearColor(0x000000, 0);
+            renderer.setClearAlpha(0);
+        }
         renderer.clear(true, true, true);
         checkFramebuffer(gl, 'prerender');
         renderer.render(scene, camera);
@@ -159,7 +175,7 @@ export function createMapThreeLayer(options) {
                 antialias: true,
                 logarithmicDepthBuffer: true,
                 alpha: true,
-                premultipliedAlpha: true,
+                premultipliedAlpha: false,
             });
             renderer.autoClear = false;
             renderer.outputColorSpace = THREE.SRGBColorSpace;
@@ -169,24 +185,75 @@ export function createMapThreeLayer(options) {
             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);
+            if (useOffscreen) {
+                renderTarget = new THREE.WebGLRenderTarget(targetWidth, targetHeight, {
+                    depthBuffer: true,
+                    stencilBuffer: false,
+                });
+                renderTarget.texture.colorSpace = THREE.SRGBColorSpace;
+                log('renderTarget', { width: targetWidth, height: targetHeight });
+                const vsrc = `
+          attribute vec2 a_pos;
+          attribute vec2 a_uv;
+          varying vec2 v_uv;
+          void main() {
+            v_uv = a_uv;
+            gl_Position = vec4(a_pos, 0.0, 1.0);
+          }
+        `;
+                const fsrc = `
+          precision mediump float;
+          varying vec2 v_uv;
+          uniform sampler2D u_tex;
+          void main() {
+            gl_FragColor = texture2D(u_tex, v_uv);
+          }
+        `;
+                const compile = (type, src) => {
+                    const shader = gl.createShader(type);
+                    if (!shader)
+                        return null;
+                    gl.shaderSource(shader, src);
+                    gl.compileShader(shader);
+                    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                        logError('blit shader compile failed', gl.getShaderInfoLog(shader));
+                        gl.deleteShader(shader);
+                        return null;
+                    }
+                    return shader;
+                };
+                const vs = compile(gl.VERTEX_SHADER, vsrc);
+                const fs = compile(gl.FRAGMENT_SHADER, fsrc);
+                if (vs && fs) {
+                    const program = gl.createProgram();
+                    if (program) {
+                        gl.attachShader(program, vs);
+                        gl.attachShader(program, fs);
+                        gl.linkProgram(program);
+                        if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
+                            blitProgram = program;
+                            blitAttribPos = gl.getAttribLocation(program, 'a_pos');
+                            blitAttribUv = gl.getAttribLocation(program, 'a_uv');
+                            blitUniformTex = gl.getUniformLocation(program, 'u_tex');
+                            blitBuffer = gl.createBuffer();
+                            gl.bindBuffer(gl.ARRAY_BUFFER, blitBuffer);
+                            const data = new Float32Array([
+                                -1, -1, 0, 0,
+                                3, -1, 2, 0,
+                                -1, 3, 0, 2,
+                            ]);
+                            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+                            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+                        }
+                        else {
+                            logError('blit program link failed', gl.getProgramInfoLog(program));
+                            gl.deleteProgram(program);
+                        }
+                    }
+                    gl.deleteShader(vs);
+                    gl.deleteShader(fs);
+                }
+            }
             rootGroup = new THREE.Group();
             rootGroup.matrixAutoUpdate = false;
             scene.add(rootGroup);
@@ -239,7 +306,7 @@ export function createMapThreeLayer(options) {
         render: (gl, matrix) => {
             if (renderDisabled)
                 return;
-            if (!renderer || !screenScene || !screenCamera)
+            if (!renderer)
                 return;
             if (!hasRenderable)
                 return;
@@ -255,19 +322,96 @@ export function createMapThreeLayer(options) {
                     renderTicks += 1;
                     log('render tick', { hasMatrix: Boolean(lastMatrix) });
                 }
+                if (useOffscreen) {
+                    if (!renderTarget || !blitProgram || !blitBuffer)
+                        return;
+                    const prevFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+                    renderer.resetState();
+                    renderOffscreen();
+                    if (prevFbo) {
+                        gl.bindFramebuffer(gl.FRAMEBUFFER, prevFbo);
+                    }
+                    else {
+                        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+                    }
+                    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.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                    const canvas = mapRef?.getCanvas();
+                    if (canvas) {
+                        gl.viewport(0, 0, canvas.width, canvas.height);
+                    }
+                    gl.useProgram(blitProgram);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, blitBuffer);
+                    const stride = 4 * 4;
+                    if (blitAttribPos >= 0) {
+                        gl.enableVertexAttribArray(blitAttribPos);
+                        gl.vertexAttribPointer(blitAttribPos, 2, gl.FLOAT, false, stride, 0);
+                    }
+                    if (blitAttribUv >= 0) {
+                        gl.enableVertexAttribArray(blitAttribUv);
+                        gl.vertexAttribPointer(blitAttribUv, 2, gl.FLOAT, false, stride, 8);
+                    }
+                    const texture = renderer.properties.get(renderTarget.texture)?.__webglTexture;
+                    if (texture) {
+                        gl.activeTexture(gl.TEXTURE0);
+                        gl.bindTexture(gl.TEXTURE_2D, texture);
+                        if (blitUniformTex)
+                            gl.uniform1i(blitUniformTex, 0);
+                    }
+                    gl.drawArrays(gl.TRIANGLES, 0, 3);
+                    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+                    gl.useProgram(null);
+                    logGlError(gl, 'render');
+                    renderer.resetState();
+                    mapRef?.triggerRepaint();
+                    return;
+                }
+                if (!scene || !camera)
+                    return;
+                if (!mercatorOrigin && mapRef && !originResolved) {
+                    try {
+                        const center = mapRef.getCenter();
+                        mercatorOrigin = mapboxgl.MercatorCoordinate.fromLngLat(center);
+                        meterScale = mercatorOrigin.meterInMercatorCoordinateUnits();
+                        originResolved = true;
+                        if (debug) {
+                            log('origin fallback', {
+                                origin: { lng: center.lng, lat: center.lat },
+                                mercator: { x: mercatorOrigin.x, y: mercatorOrigin.y, z: mercatorOrigin.z },
+                                meterScale,
+                            });
+                        }
+                    }
+                    catch (err) {
+                        logError('origin fallback failed', err);
+                    }
+                }
+                if (mercatorOrigin && lastMatrix && camera) {
+                    const m = new THREE.Matrix4().fromArray(lastMatrix);
+                    const translate = new THREE.Matrix4().makeTranslation(mercatorOrigin.x, mercatorOrigin.y, (mercatorOrigin.z ?? 0) + zOffset * meterScale);
+                    const scale = new THREE.Matrix4().makeScale(meterScale, -meterScale, meterScale);
+                    const l = new THREE.Matrix4().multiplyMatrices(translate, scale);
+                    camera.projectionMatrix = m.multiply(l);
+                    if ('projectionMatrixInverse' in camera) {
+                        camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+                    }
+                }
                 renderer.resetState();
-                gl.disable(gl.DEPTH_TEST);
-                gl.depthMask(false);
-                gl.disable(gl.STENCIL_TEST);
                 gl.disable(gl.SCISSOR_TEST);
+                gl.disable(gl.STENCIL_TEST);
+                gl.enable(gl.DEPTH_TEST);
+                gl.depthMask(true);
                 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);
+                renderer.render(scene, camera);
                 logGlError(gl, 'render');
                 renderer.resetState();
                 mapRef?.triggerRepaint();

package/package.json

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