@deck.gl/arcgis 9.0.0-beta.10 → 9.0.0-beta.11

package/dist/commons.d.ts

@@ -1,6 +1,6 @@
 import { Model } from '@luma.gl/engine';
 import { Deck } from '@deck.gl/core';
-import type { Device, Texture, Framebuffer } from '@luma.gl/core';
+import type { Texture, Framebuffer } from '@luma.gl/core';
 interface Renderer {
     redraw: () => void;
 }
@@ -10,7 +10,7 @@ export type RenderResources = {
     model: Model;
     fbo: Framebuffer;
 };
-export declare function initializeResources(this: Renderer, device: Device): RenderResources;
+export declare function initializeResources(this: Renderer, gl: WebGL2RenderingContext): Promise<RenderResources>;
 export declare function render(resources: RenderResources, viewport: {
     width: number;
     height: number;

package/dist/commons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commons.d.ts","sourceRoot":"","sources":["../src/commons.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAW,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGhE,UAAU,QAAQ;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,eAAe,CA2FnF;AAED,wBAAgB,MAAM,CACpB,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,QAoCF;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,eAAe,QAK3D"}
+{"version":3,"file":"commons.d.ts","sourceRoot":"","sources":["../src/commons.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAW,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,EAAS,OAAO,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAEhE,UAAU,QAAQ;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,WAAW,CAAC;CAClB,CAAC;AA8BF,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,sBAAsB,GACzB,OAAO,CAAC,eAAe,CAAC,CAkF1B;AAED,wBAAgB,MAAM,CACpB,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,QAgCF;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,eAAe,QAK3D"}

package/dist/commons.js

@@ -2,7 +2,28 @@
 import { GL } from '@luma.gl/constants';
 import { Model, Geometry } from '@luma.gl/engine';
 import { Deck } from '@deck.gl/core';
-export function initializeResources(device) {
+async function createDeckInstance(gl) {
+    return new Promise(resolve => {
+        const deckInstance = new Deck({
+            // Input is handled by the ArcGIS API for JavaScript.
+            controller: false,
+            // We use the same WebGL context as the ArcGIS API for JavaScript.
+            gl,
+            // We need depth testing in general; we don't know what layers might be added to the deck.
+            parameters: {
+                depthCompare: 'less-equal'
+            },
+            // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
+            width: null,
+            height: null,
+            onDeviceInitialized: (device) => {
+                resolve({ deckInstance, device });
+            }
+        });
+    });
+}
+export async function initializeResources(gl) {
+    const { deckInstance, device } = await createDeckInstance(gl);
     const texture = device.createTexture({
         format: 'rgba8unorm',
         width: 1,
@@ -42,7 +63,13 @@ void main(void) {
         },
         parameters: {
             depthWriteEnabled: true,
-            depthCompare: 'less-equal'
+            depthCompare: 'less-equal',
+            blendColorSrcFactor: 'one',
+            blendColorDstFactor: 'one-minus-src-alpha',
+            blendAlphaSrcFactor: 'one',
+            blendAlphaDstFactor: 'one-minus-src-alpha',
+            blendColorOperation: 'add',
+            blendAlphaOperation: 'add'
         },
         geometry: new Geometry({
             topology: 'triangle-strip',
@@ -56,24 +83,12 @@ void main(void) {
         id: 'deckfbo',
         width: 1,
         height: 1,
-        colorAttachments: [texture]
+        colorAttachments: [texture],
+        depthStencilAttachment: 'depth16unorm'
     });
-    const deckInstance = new Deck({
-        // The view state will be set dynamically to track the MapView current extent.
-        viewState: {},
-        // Input is handled by the ArcGIS API for JavaScript.
-        controller: false,
-        // We use the same WebGL context as the ArcGIS API for JavaScript.
-        device,
-        // We need depth testing in general; we don't know what layers might be added to the deck.
-        parameters: {
-            depthTest: true
-        },
+    deckInstance.setProps({
         // This deck renders into an auxiliary framebuffer.
         _framebuffer: fbo,
-        // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
-        width: null,
-        height: null,
         _customRender: redrawReason => {
             if (redrawReason === 'arcgis') {
                 deckInstance._drawLayers(redrawReason);
@@ -88,6 +103,7 @@ void main(void) {
 export function render(resources, viewport) {
     const { model, deck, fbo } = resources;
     const device = model.device;
+    // @ts-ignore device.getParametersWebGL should return `any` not `void`?
     const screenFbo = device.getParametersWebGL(36006);
     const { width, height, ...viewState } = viewport;
     /* global window */
@@ -102,15 +118,15 @@ export function render(resources, viewport) {
     const textureToScreenPass = device.beginRenderPass({
         framebuffer: screenFbo,
         parameters: { viewport: [0, 0, pixelWidth, pixelHeight] },
-        clearColor: [0, 0, 0, 0],
-        clearDepth: 1
+        clearColor: false,
+        clearDepth: false
     });
-    device.withParametersWebGL({
-        blend: true,
-        blendFunc: [1, 771]
-    }, () => {
+    try {
         model.draw(textureToScreenPass);
-    });
+    }
+    finally {
+        textureToScreenPass.end();
+    }
 }
 export function finalizeResources(resources) {
     resources.deck.finalize();

package/dist/deck-layer-view-2d.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deck-layer-view-2d.d.ts","sourceRoot":"","sources":["../src/deck-layer-view-2d.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,iBAAiB,KAAA,OAiD9D"}
+{"version":3,"file":"deck-layer-view-2d.d.ts","sourceRoot":"","sources":["../src/deck-layer-view-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,iBAAiB,KAAA,OAgE9D"}

package/dist/deck-layer-view-2d.js

@@ -1,32 +1,45 @@
-import { WebGLDevice } from '@luma.gl/webgl';
 import { initializeResources, render, finalizeResources } from "./commons.js";
 export default function createDeckLayerView2D(BaseLayerViewGL2D) {
     return BaseLayerViewGL2D.createSubclass({
         properties: {
+            cancelInitialization: null,
             resources: null
         },
         // Attach is called as soon as the layer view is ready to start rendering.
-        attach() {
+        async attach() {
             // We use a full-screen quad and shaders to composite the frame rendered
             // with deck.gl on top of the MapView. Composition uses the MapView context.
             const gl = this.context;
-            const device = WebGLDevice.attach(gl);
-            this.resources = initializeResources.call(this, device);
+            let cancelled = false;
+            this.cancelInitialization = () => (cancelled = true);
+            const resources = await initializeResources.call(this, gl);
+            // If the layer got detached while awaiting, do not proceed
+            if (cancelled) {
+                finalizeResources(resources);
+                return;
+            }
+            this.resources = resources;
             // Update deck props
-            this.layer.deck.on('change', props => this.resources.deck.setProps(props));
+            this.layer.deck.on('change', props => resources.deck.setProps(props));
             // We need to start drawing the deck.gl layer immediately.
-            this.resources.deck.setProps(this.layer.deck.toJSON());
+            resources.deck.setProps(this.layer.deck.toJSON());
         },
         redraw() {
             this.requestRender();
         },
         // Called when the layer must be destroyed.
         detach() {
-            finalizeResources(this.resources);
-            this.resources = null;
+            this.cancelInitialization?.();
+            if (this.resources) {
+                finalizeResources(this.resources);
+                this.resources = null;
+            }
         },
         // Called every time that the layer view must be rendered.
         render(renderParameters) {
+            if (!this.resources) {
+                return;
+            }
             const [width, height] = this.view.state.size;
             // The view state must be kept in-sync with the MapView of the ArcGIS API.
             const state = renderParameters.state;

package/dist/deck-renderer.d.ts

@@ -5,7 +5,8 @@ export default function createDeckRenderer(DeckProps: any, externalRenderers: an
         view: SceneView;
         deck: any;
         resources: RenderResources | null;
-        setup(context: any): void;
+        cancelInitialization: (() => void) | null;
+        setup(context: any): Promise<void>;
         dispose(): void;
         redraw(): void;
         render(): void;

package/dist/deck-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deck-renderer.d.ts","sourceRoot":"","sources":["../src/deck-renderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiD,eAAe,EAAC,qBAAkB;AAE1F,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAWrD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,SAAS,KAAA,EAAE,iBAAiB,KAAA;eAMjD,SAAS,SAAS,SAAS;cAJvC,SAAS;cACT,GAAG;mBACE,eAAe,GAAG,IAAI;;;;;;EA6CpC"}
+{"version":3,"file":"deck-renderer.d.ts","sourceRoot":"","sources":["../src/deck-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiD,eAAe,EAAC,qBAAkB;AAE1F,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAWrD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,SAAS,KAAA,EAAE,iBAAiB,KAAA;eAOjD,SAAS,SAAS,SAAS;cALvC,SAAS;cACT,GAAG;mBACE,eAAe,GAAG,IAAI;8BACX,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;;;;;;EAqD5C"}

package/dist/deck-renderer.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-invalid-this */
-import { WebGLDevice } from '@luma.gl/webgl';
 import { initializeResources, render, finalizeResources } from "./commons.js";
 /** Convert ArcGIS FOV to WebMercatorViewport altitude */
 function arcgisFOVToDeckAltitude(fov, aspectRatio) {
@@ -12,18 +11,26 @@ export default function createDeckRenderer(DeckProps, externalRenderers) {
     class DeckRenderer {
         constructor(view, props) {
             this.resources = null;
+            this.cancelInitialization = null;
             this.view = view;
             this.deck = new DeckProps(props);
         }
-        setup(context) {
+        async setup(context) {
             const gl = context.gl;
-            const device = WebGLDevice.attach(gl);
-            const resources = initializeResources.call(this, device);
+            let cancelled = false;
+            this.cancelInitialization = () => (cancelled = true);
+            const resources = await initializeResources.call(this, gl);
+            // If the renderer got disposed while awaiting, do not proceed
+            if (cancelled) {
+                finalizeResources(resources);
+                return;
+            }
             this.deck.on('change', props => resources.deck.setProps(props));
             resources.deck.setProps(this.deck.toJSON());
             this.resources = resources;
         }
         dispose() {
+            this.cancelInitialization?.();
             if (this.resources) {
                 finalizeResources(this.resources);
             }