@deck.gl/extensions 9.0.0-beta.1 → 9.0.0-beta.10

package/dist/terrain/terrain-extension.js

@@ -0,0 +1,44 @@
+import { LayerExtension } from '@deck.gl/core';
+import { TerrainEffect } from "./terrain-effect.js";
+import { terrainModule } from "./shader-module.js";
+const defaultProps = {
+    terrainDrawMode: undefined
+};
+/** Allows layers to show/hide objects by a geofence. */
+export default class TerrainExtension extends LayerExtension {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'TerrainExtension'; }
+    getShaders() {
+        return {
+            modules: [terrainModule]
+        };
+    }
+    initializeState() {
+        this.context.deck?._addDefaultEffect(new TerrainEffect());
+    }
+    updateState(params) {
+        const { props, oldProps } = params;
+        if (this.state.terrainDrawMode &&
+            props.terrainDrawMode === oldProps.terrainDrawMode &&
+            // @ts-ignore `extruded` may not exist in props
+            props.extruded === oldProps.extruded) {
+            return;
+        }
+        let { terrainDrawMode } = props;
+        if (!terrainDrawMode) {
+            // props.extruded is used as an indication that the layer is 2.5D
+            // @ts-ignore `extruded` may not exist in props
+            const is3d = this.props.extruded;
+            const attributes = this.getAttributeManager()?.attributes;
+            const hasAnchor = attributes && 'instancePositions' in attributes;
+            terrainDrawMode = is3d || hasAnchor ? 'offset' : 'drape';
+        }
+        this.setState({ terrainDrawMode });
+    }
+    onNeedsRedraw() {
+        const state = this.state;
+        if (state.terrainDrawMode === 'drape') {
+            state.terrainCoverNeedsRedraw = true;
+        }
+    }
+}

package/{typed → dist}/terrain/terrain-pass.d.ts

@@ -1,6 +1,6 @@
 import { Layer, Viewport, _LayersPass as LayersPass, LayersPassRenderOptions } from '@deck.gl/core';
-import type { HeightMapBuilder } from './height-map-builder';
-import type { TerrainCover } from './terrain-cover';
+import type { HeightMapBuilder } from "./height-map-builder.js";
+import type { TerrainCover } from "./terrain-cover.js";
 export type TerrainPassRenderOptions = LayersPassRenderOptions;
 /** Renders textures used by the TerrainEffect render pass */
 export declare class TerrainPass extends LayersPass {

package/dist/terrain/terrain-pass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-pass.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,IAAI,UAAU,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAClG,OAAO,KAAK,EAAC,gBAAgB,EAAC,gCAA6B;AAC3D,OAAO,KAAK,EAAC,YAAY,EAAC,2BAAwB;AAElD,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC;AAE/D,6DAA6D;AAC7D,qBAAa,WAAY,SAAQ,UAAU;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,wBAAwB,GAAG,KAAK,EAAE;IAchF,eAAe,CAAC,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;IA+BpF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;CA4BvF"}

package/dist/terrain/terrain-pass.js

@@ -0,0 +1,61 @@
+import { GL } from '@luma.gl/constants';
+import { _LayersPass as LayersPass } from '@deck.gl/core';
+/** Renders textures used by the TerrainEffect render pass */
+export class TerrainPass extends LayersPass {
+    getRenderableLayers(viewport, opts) {
+        const { layers } = opts;
+        const result = [];
+        const drawParamsByIndex = this._getDrawLayerParams(viewport, opts, true);
+        for (let i = 0; i < layers.length; i++) {
+            const layer = layers[i];
+            if (!layer.isComposite && drawParamsByIndex[i].shouldDrawLayer) {
+                result.push(layer);
+            }
+        }
+        return result;
+    }
+    renderHeightMap(heightMap, opts) {
+        // console.log('Updating height map')
+        const target = heightMap.getRenderFramebuffer();
+        const viewport = heightMap.renderViewport;
+        if (!target || !viewport) {
+            return;
+        }
+        target.resize(viewport);
+        this.device.withParametersWebGL({
+            clearColor: [0, 0, 0, 0],
+            blend: true,
+            blendFunc: [1, 1],
+            blendEquation: 32776,
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            target,
+            pass: 'terrain-height-map',
+            layers: opts.layers,
+            viewports: [viewport],
+            effects: []
+        }));
+    }
+    renderTerrainCover(terrainCover, opts) {
+        // console.log('Updating terrain cover ' + terrainCover.id)
+        const target = terrainCover.getRenderFramebuffer();
+        const viewport = terrainCover.renderViewport;
+        if (!target || !viewport) {
+            return;
+        }
+        const layers = terrainCover.filterLayers(opts.layers);
+        target.resize(viewport);
+        this.device.withParametersWebGL({
+            clearColor: [0, 0, 0, 0],
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            target,
+            pass: `terrain-cover-${terrainCover.id}`,
+            layers,
+            effects: [],
+            viewports: [viewport]
+        }));
+    }
+}

package/{typed → dist}/terrain/terrain-picking-pass.d.ts

@@ -1,5 +1,5 @@
 import { Layer, Viewport, LayersPassRenderOptions, _PickLayersPass as PickLayersPass } from '@deck.gl/core';
-import type { TerrainCover } from './terrain-cover';
+import type { TerrainCover } from "./terrain-cover.js";
 export type TerrainPickingPassRenderOptions = LayersPassRenderOptions & {
     pickZ: boolean;
 };

package/dist/terrain/terrain-picking-pass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain-picking-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-picking-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,uBAAuB,EACvB,eAAe,IAAI,cAAc,EAClC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAC,YAAY,EAAC,2BAAwB;AAElD,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,GAAG;IACtE,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,8DAA8D;AAC9D,qBAAa,kBAAmB,SAAQ,cAAc;IACpD;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAEzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,+BAA+B,GAAG,KAAK,EAAE;IAiBvF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,+BAA+B,CAAC;IAqC7F,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;CAQxF"}

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: 'rgba32float',
+                    type: 5126
+                }),
+                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];
+}

package/dist/utils/syntax-tags.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Marks GLSL shaders for syntax highlighting: glsl`...`
+ * Install https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal
+ */
+export declare const glsl: (s: TemplateStringsArray) => string;
+//# sourceMappingURL=syntax-tags.d.ts.map

package/dist/utils/syntax-tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syntax-tags.d.ts","sourceRoot":"","sources":["../../src/utils/syntax-tags.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,MAAO,oBAAoB,WAAW,CAAC"}

package/dist/utils/syntax-tags.js

@@ -0,0 +1,5 @@
+/**
+ * Marks GLSL shaders for syntax highlighting: glsl`...`
+ * Install https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal
+ */
+export const glsl = (s) => `${s}`;