@deck.gl/extensions 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/terrain/terrain-picking-pass.js

@@ -0,0 +1,66 @@
+import { _PickLayersPass as PickLayersPass } from '@deck.gl/core';
+/** Renders textures used by the TerrainEffect picking pass */
+export class TerrainPickingPass extends PickLayersPass {
+    constructor() {
+        super(...arguments);
+        /** Save layer index for use when drawing to terrain cover.
+         * When a terrain cover's picking buffer is rendered,
+         * we need to make sure each layer receives a consistent index (encoded in the alpha channel)
+         * so that a picked color can be decoded back to the correct layer.
+         * Updated in getRenderableLayers which is called in TerrainEffect.preRender
+         */
+        this.drawParameters = {};
+    }
+    getRenderableLayers(viewport, opts) {
+        const { layers } = opts;
+        const result = [];
+        this.drawParameters = {};
+        this._resetColorEncoder(opts.pickZ);
+        const drawParamsByIndex = this._getDrawLayerParams(viewport, opts);
+        for (let i = 0; i < layers.length; i++) {
+            const layer = layers[i];
+            if (!layer.isComposite && drawParamsByIndex[i].shouldDrawLayer) {
+                result.push(layer);
+                this.drawParameters[layer.id] = drawParamsByIndex[i].layerParameters;
+            }
+        }
+        return result;
+    }
+    renderTerrainCover(terrainCover, opts) {
+        // console.log('Updating terrain cover for picking ' + terrainCover.id)
+        const target = terrainCover.getPickingFramebuffer();
+        const viewport = terrainCover.renderViewport;
+        if (!target || !viewport) {
+            return;
+        }
+        const layers = terrainCover.filterLayers(opts.layers);
+        const terrainLayer = terrainCover.targetLayer;
+        if (terrainLayer.props.pickable) {
+            layers.unshift(terrainLayer);
+        }
+        target.resize(viewport);
+        this.device.withParametersWebGL({
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            pickingFBO: target,
+            pass: `terrain-cover-picking-${terrainCover.id}`,
+            layers,
+            effects: [],
+            viewports: [viewport],
+            // Disable the default culling because TileLayer would cull sublayers based on the screen viewport,
+            // not the viewport of the terrain cover. Culling is already done by `terrainCover.filterLayers`
+            cullRect: undefined,
+            deviceRect: viewport,
+            pickZ: false
+        }));
+    }
+    getLayerParameters(layer, layerIndex, viewport) {
+        if (this.drawParameters[layer.id]) {
+            return this.drawParameters[layer.id];
+        }
+        const parameters = super.getLayerParameters(layer, layerIndex, viewport);
+        parameters.blend = true;
+        return parameters;
+    }
+}

package/dist/terrain/utils.js

@@ -0,0 +1,21 @@
+import { GL } from '@luma.gl/constants';
+export function createRenderTarget(device, opts) {
+    return device.createFramebuffer({
+        id: opts.id,
+        colorAttachments: [
+            device.createTexture({
+                ...(opts.float && {
+                    format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+                    type: GL.FLOAT
+                }),
+                mipmaps: false,
+                sampler: {
+                    minFilter: 'linear',
+                    magFilter: 'linear',
+                    addressModeU: 'clamp-to-edge',
+                    addressModeV: 'clamp-to-edge'
+                }
+            })
+        ]
+    });
+}

package/{typed → dist}/utils/debug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/utils/debug.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,qDAAqD;AAErD,eAAO,MAAM,QAAQ,QACd,WAAW;;;UAmDjB,CAAC"}
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/utils/debug.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,qDAAqD;AAErD,eAAO,MAAM,QAAQ,QACd,WAAW;;;UAmDjB,CAAC"}

package/dist/utils/debug.js

@@ -0,0 +1,50 @@
+/* global document */
+/** Debug utility to draw FBO contents onto screen */
+// eslint-disable-next-line
+export const debugFBO = function (fbo, { minimap, opaque } = {}) {
+    const color = fbo.device.readPixelsToArrayWebGL(fbo);
+    let canvas = document.getElementById('fbo-canvas');
+    const canvasHeight = (minimap ? 2 : 1) * fbo.height;
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'fbo-canvas';
+        canvas.style.zIndex = '100';
+        canvas.style.position = 'absolute';
+        canvas.style.top = '0';
+        canvas.style.right = '0';
+        canvas.style.border = 'blue 1px solid';
+        canvas.style.transform = 'scaleY(-1)';
+        document.body.appendChild(canvas);
+    }
+    if (canvas.width !== fbo.width || canvas.height !== canvasHeight) {
+        canvas.width = fbo.width;
+        canvas.height = canvasHeight;
+        canvas.style.width = '400px';
+    }
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(canvas.width, canvas.height);
+    // Minimap
+    if (minimap) {
+        const zoom = 8; // Zoom factor for minimap
+        const { width, height } = canvas;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const d = 4 * (x + y * width); // destination pixel
+                const s = 4 * (Math.floor(x / zoom) + Math.floor(y / zoom) * width); // source
+                imageData.data[d + 0] = color[s + 0];
+                imageData.data[d + 1] = color[s + 1];
+                imageData.data[d + 2] = color[s + 2];
+                imageData.data[d + 3] = opaque ? 255 : color[s + 3];
+            }
+        }
+    }
+    // Full map
+    const offset = minimap ? color.length : 0;
+    for (let i = 0; i < color.length; i += 4) {
+        imageData.data[offset + i + 0] = color[i + 0];
+        imageData.data[offset + i + 1] = color[i + 1];
+        imageData.data[offset + i + 2] = color[i + 2];
+        imageData.data[offset + i + 3] = opaque ? 255 : color[i + 3];
+    }
+    ctx.putImageData(imageData, 0, 0);
+};

package/dist/utils/projection-utils.js

@@ -0,0 +1,153 @@
+import { WebMercatorViewport, OrthographicViewport } from '@deck.gl/core';
+/*
+ * Compute the union of bounds from multiple layers
+ * Returns bounds in CARTESIAN coordinates
+ */
+export function joinLayerBounds(
+/** The layers to combine */
+layers, 
+/** A Viewport instance that is used to determine the type of the view */
+viewport) {
+    // Join the bounds of layer data
+    const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const layer of layers) {
+        const layerBounds = layer.getBounds();
+        if (layerBounds) {
+            const bottomLeftCommon = layer.projectPosition(layerBounds[0], { viewport, autoOffset: false });
+            const topRightCommon = layer.projectPosition(layerBounds[1], { viewport, autoOffset: false });
+            bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]);
+            bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]);
+            bounds[2] = Math.max(bounds[2], topRightCommon[0]);
+            bounds[3] = Math.max(bounds[3], topRightCommon[1]);
+        }
+    }
+    if (Number.isFinite(bounds[0])) {
+        return bounds;
+    }
+    return null;
+}
+const MAX_VIEWPORT_SIZE = 2048;
+/** Construct a viewport that just covers the target bounds. Used for rendering to common space indexed texture. */
+export function makeViewport(opts) {
+    const { bounds, viewport, border = 0 } = opts;
+    const { isGeospatial } = viewport;
+    if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
+        return null;
+    }
+    const centerWorld = viewport.unprojectPosition([
+        (bounds[0] + bounds[2]) / 2,
+        (bounds[1] + bounds[3]) / 2,
+        0
+    ]);
+    let { width, height, zoom } = opts;
+    if (zoom === undefined) {
+        // Use width and height to determine zoom
+        width = width - border * 2;
+        height = height - border * 2;
+        const scale = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
+        zoom = Math.min(Math.log2(scale), 20);
+    }
+    else if (!width || !height) {
+        // Use zoom to determine width and height
+        const scale = 2 ** zoom;
+        width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale);
+        height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale);
+        const maxSize = MAX_VIEWPORT_SIZE - border * 2;
+        if (width > maxSize || height > maxSize) {
+            const r = maxSize / Math.max(width, height);
+            width = Math.round(width * r);
+            height = Math.round(height * r);
+            zoom += Math.log2(r);
+        }
+    }
+    // TODO - find a more generic way to construct this viewport
+    // Geospatial viewports may not be web-mercator
+    return isGeospatial
+        ? new WebMercatorViewport({
+            id: viewport.id,
+            x: border,
+            y: border,
+            width,
+            height,
+            longitude: centerWorld[0],
+            latitude: centerWorld[1],
+            zoom,
+            orthographic: true
+        })
+        : new OrthographicViewport({
+            id: viewport.id,
+            x: border,
+            y: border,
+            width,
+            height,
+            target: centerWorld,
+            zoom,
+            flipY: false
+        });
+}
+/** Returns viewport bounds in CARTESIAN coordinates */
+export function getViewportBounds(viewport, zRange) {
+    // Viewport bounds in world coordinates
+    let viewportBoundsWorld;
+    if (zRange && zRange.length === 2) {
+        const [minZ, maxZ] = zRange;
+        const bounds0 = viewport.getBounds({ z: minZ });
+        const bounds1 = viewport.getBounds({ z: maxZ });
+        viewportBoundsWorld = [
+            Math.min(bounds0[0], bounds1[0]),
+            Math.min(bounds0[1], bounds1[1]),
+            Math.max(bounds0[2], bounds1[2]),
+            Math.max(bounds0[3], bounds1[3])
+        ];
+    }
+    else {
+        viewportBoundsWorld = viewport.getBounds();
+    }
+    // Viewport bounds in cartesian coordinates
+    const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2));
+    const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4));
+    return [
+        viewportBottomLeftCommon[0],
+        viewportBottomLeftCommon[1],
+        viewportTopRightCommon[0],
+        viewportTopRightCommon[1]
+    ];
+}
+/*
+ * Determine the common space bounds that best cover the given data for the given viewport
+ * Returns bounds in CARTESIAN coordinates
+ */
+export function getRenderBounds(layerBounds, viewport, zRange) {
+    if (!layerBounds) {
+        return [0, 0, 1, 1];
+    }
+    const viewportBounds = getViewportBounds(viewport, zRange);
+    // Expand viewport bounds by 2X. Heurestically chosen to avoid masking
+    // errors when mask is partially out of view
+    const paddedBounds = doubleBounds(viewportBounds);
+    // When bounds of the layers are smaller than the viewport bounds simply use
+    // mask bounds, so as to maximize resolution & avoid rerenders
+    if (layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] &&
+        layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1]) {
+        return layerBounds;
+    }
+    // As viewport shrinks, to avoid pixelation along mask edges
+    // we need to reduce the bounds and only render the visible portion
+    // of the mask.
+    // We pad the viewport bounds to capture the section
+    // of the mask just outside the viewport to correctly maskByInstance.
+    // Intersect mask & padded viewport bounds
+    return [
+        Math.max(layerBounds[0], paddedBounds[0]),
+        Math.max(layerBounds[1], paddedBounds[1]),
+        Math.min(layerBounds[2], paddedBounds[2]),
+        Math.min(layerBounds[3], paddedBounds[3])
+    ];
+}
+function doubleBounds(bounds) {
+    const dx = bounds[2] - bounds[0];
+    const dy = bounds[3] - bounds[1];
+    const centerX = (bounds[0] + bounds[2]) / 2;
+    const centerY = (bounds[1] + bounds[3]) / 2;
+    return [centerX - dx, centerY - dy, centerX + dx, centerY + dy];
+}