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

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/arcgis",
   "description": "Use deck.gl as a custom ArcGIS API for JavaScript layer",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -16,12 +17,17 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -29,15 +35,18 @@
     "build-bundle": "ocular-bundle ./bundle.ts",
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
+  "dependencies": {
+    "@luma.gl/constants": "^9.0.11",
+    "esri-loader": "^3.7.0"
+  },
   "peerDependencies": {
     "@arcgis/core": "^4.0.0",
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/engine": "9.0.0-alpha.54"
+    "@deck.gl/core": "^9.0.0-beta",
+    "@luma.gl/core": "^9.0.0",
+    "@luma.gl/engine": "^9.0.0"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "esri-loader": "^3.3.0"
+  "devDependencies": {
+    "@arcgis/core": "^4.21.0"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/commons.ts

@@ -1,115 +1,184 @@
 /* eslint-disable no-invalid-this */
 
-import type {Device} from '@luma.gl/core';
-import {Model} from '@luma.gl/engine';
 import {GL} from '@luma.gl/constants';
-import {withGLParameters} from '@luma.gl/webgl';
-
+import {Model, Geometry} from '@luma.gl/engine';
 import {Deck} from '@deck.gl/core';
+import type {Device, Texture, Framebuffer} from '@luma.gl/core';
+
+interface Renderer {
+  redraw: () => void;
+}
+
+export type RenderResources = {
+  deck: Deck;
+  texture: Texture;
+  model: Model;
+  fbo: Framebuffer;
+};
+
+async function createDeckInstance(gl: WebGL2RenderingContext): Promise<{
+  deckInstance: Deck;
+  device: Device;
+}> {
+  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: Device) => {
+        resolve({deckInstance, device});
+      }
+    });
+  });
+}
 
-export function initializeResources(device: Device) {
-  // What is `this` referring to this function???
-  this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
+export async function initializeResources(
+  this: Renderer,
+  gl: WebGL2RenderingContext
+): Promise<RenderResources> {
+  const {deckInstance, device} = await createDeckInstance(gl);
+
+  const texture = device.createTexture({
+    format: 'rgba8unorm',
+    width: 1,
+    height: 1,
+    sampler: {
+      minFilter: 'linear',
+      magFilter: 'linear',
+      addressModeU: 'clamp-to-edge',
+      addressModeV: 'clamp-to-edge'
+    }
+  });
 
-  this.model = new Model(device, {
+  const model = new Model(device, {
     vs: `\
 #version 300 es
-in vec2 a_pos;
+in vec2 pos;
 out vec2 v_texcoord;
 void main(void) {
-    gl_Position = vec4(a_pos, 0.0, 1.0);
-    v_texcoord = (a_pos + 1.0) / 2.0;
+    gl_Position = vec4(pos, 0.0, 1.0);
+    v_texcoord = (pos + 1.0) / 2.0;
 }
     `,
     fs: `\
 #version 300 es
 precision mediump float;
-uniform sampler2D u_texture;
+uniform sampler2D deckglTexture;
 in vec2 v_texcoord;
 out vec4 fragColor;
+
 void main(void) {
-    vec4 rgba = texture(u_texture, v_texcoord);
-    rgba.rgb *= rgba.a;
-    fragColor = rgba;
+    vec4 imageColor = texture(deckglTexture, v_texcoord);
+    imageColor.rgb *= imageColor.a;
+    fragColor = imageColor;
 }
     `,
-    attributes: {
-      // eslint-disable-next-line camelcase
-      a_pos: this.buffer
+    bindings: {
+      deckglTexture: texture
     },
-    vertexCount: 4,
-    drawMode: GL.TRIANGLE_STRIP
-  });
-
-  this.deckFbo = device.createFramebuffer({width: 1, height: 1});
-
-  this.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.
-    gl: device.gl,
-
-    // We need depth testing in general; we don't know what layers might be added to the deck.
     parameters: {
-      depthTest: true
+      depthWriteEnabled: true,
+      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',
+      attributes: {
+        pos: {size: 2, value: new Int8Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, -1])}
+      }
+    }),
+    vertexCount: 6
+  });
 
-    // This deck renders into an auxiliary framebuffer.
-    _framebuffer: this.deckFbo,
+  const fbo = device.createFramebuffer({
+    id: 'deckfbo',
+    width: 1,
+    height: 1,
+    colorAttachments: [texture],
+    depthStencilAttachment: 'depth16unorm'
+  });
 
-    // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
-    width: null,
-    height: null,
+  deckInstance.setProps({
+    // This deck renders into an auxiliary framebuffer.
+    _framebuffer: fbo,
 
     _customRender: redrawReason => {
       if (redrawReason === 'arcgis') {
-        this.deckInstance._drawLayers(redrawReason);
+        deckInstance._drawLayers(redrawReason);
       } else {
         this.redraw();
       }
     }
   });
+
+  return {deck: deckInstance, texture, fbo, model};
 }
 
-export function render({gl, width, height, viewState}) {
-  const screenFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+export function render(
+  resources: RenderResources,
+  viewport: {
+    width: number;
+    height: number;
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    altitude?: number;
+    pitch: number;
+    bearing: number;
+  }
+) {
+  const {model, deck, fbo} = resources;
+  const device = model.device;
+  // @ts-ignore device.getParametersWebGL should return `any` not `void`?
+  const screenFbo: Framebuffer = device.getParametersWebGL(GL.FRAMEBUFFER_BINDING);
+  const {width, height, ...viewState} = viewport;
 
   /* global window */
   const dpr = window.devicePixelRatio;
-  width = Math.round(width * dpr);
-  height = Math.round(height * dpr);
+  const pixelWidth = Math.round(width * dpr);
+  const pixelHeight = Math.round(height * dpr);
 
-  this.deckFbo.resize({width, height});
+  fbo.resize({width: pixelWidth, height: pixelHeight});
 
-  this.deckInstance.setProps({viewState});
+  deck.setProps({viewState});
   // redraw deck immediately into deckFbo
-  this.deckInstance.redraw('arcgis');
+  deck.redraw('arcgis');
 
   // We overlay the texture on top of the map using the full-screen quad.
-  withGLParameters(
-    gl,
-    {
-      blend: true,
-      blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
-      framebuffer: screenFbo,
-      viewport: [0, 0, width, height]
-    },
-    () => {
-      // eslint-disable-next-line camelcase
-      this.model.setUniforms({u_texture: this.deckFbo}).draw(this.context.renderPass);
-    }
-  );
-}
 
-export function finalizeResources() {
-  this.deckInstance?.finalize();
-  this.deckInstance = null;
+  const textureToScreenPass = device.beginRenderPass({
+    framebuffer: screenFbo,
+    parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
+    clearColor: false,
+    clearDepth: false
+  });
+  try {
+    model.draw(textureToScreenPass);
+  } finally {
+    textureToScreenPass.end();
+  }
+}
 
-  this.model?.delete();
-  this.buffer?.delete();
-  this.deckFbo?.delete();
+export function finalizeResources(resources: RenderResources) {
+  resources.deck.finalize();
+  resources.model.destroy();
+  resources.fbo.destroy();
+  resources.texture.destroy();
 }

package/src/{deck-layer-view-2d.js → deck-layer-view-2d.ts}

@@ -3,24 +3,31 @@ import {initializeResources, render, finalizeResources} from './commons';
 export default function createDeckLayerView2D(BaseLayerViewGL2D) {
   return BaseLayerViewGL2D.createSubclass({
     properties: {
-      deckgl: {},
-      deckFbo: {},
-      model: {},
-      buffer: {}
+      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;
-      initializeResources.call(this, gl);
+
+      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.deckInstance.setProps(props));
+      this.layer.deck.on('change', props => resources.deck.setProps(props));
 
       // We need to start drawing the deck.gl layer immediately.
-      this.deckInstance.setProps(this.layer.deck.toJSON());
+      resources.deck.setProps(this.layer.deck.toJSON());
     },
 
     redraw() {
@@ -29,26 +36,31 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
 
     // Called when the layer must be destroyed.
     detach() {
-      finalizeResources.call(this);
+      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;
 
-      render.call(this, {
-        gl: renderParameters.context,
+      render(this.resources, {
         width,
         height,
-        viewState: {
-          latitude: this.view.center.latitude,
-          longitude: this.view.center.longitude,
-          zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
-          bearing: -state.rotation,
-          pitch: 0
-        }
+        latitude: this.view.center.latitude,
+        longitude: this.view.center.longitude,
+        zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
+        bearing: -state.rotation,
+        pitch: 0
       });
     }
   });

package/src/deck-renderer.ts

@@ -0,0 +1,73 @@
+/* eslint-disable no-invalid-this */
+import {initializeResources, render, finalizeResources, RenderResources} from './commons';
+
+import SceneView from '@arcgis/core/views/SceneView';
+import type {DeckProps} from '@deck.gl/core';
+
+/** Convert ArcGIS FOV to WebMercatorViewport altitude */
+function arcgisFOVToDeckAltitude(fov: number, aspectRatio: number): number {
+  // ArcGIS fov is corner-to-corner
+  const D = Math.sqrt(1 + aspectRatio ** 2);
+  const halfFOV = (fov / 2 / 180) * Math.PI;
+  return D / 2 / Math.tan(halfFOV);
+}
+
+export default function createDeckRenderer(DeckProps, externalRenderers) {
+  class DeckRenderer {
+    view: SceneView;
+    deck: any;
+    resources: RenderResources | null = null;
+    cancelInitialization: (() => void) | null = null;
+
+    constructor(view: SceneView, props: DeckProps) {
+      this.view = view;
+      this.deck = new DeckProps(props);
+    }
+
+    async setup(context) {
+      const gl = context.gl;
+
+      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);
+      }
+    }
+
+    redraw() {
+      externalRenderers.requestRender(this.view);
+    }
+
+    render() {
+      const [width, height] = this.view.size;
+
+      render(this.resources!, {
+        width,
+        height,
+        latitude: this.view.center.latitude,
+        longitude: this.view.center.longitude,
+        altitude: arcgisFOVToDeckAltitude(this.view.camera.fov, width / height),
+        zoom: this.view.zoom,
+        bearing: this.view.camera.heading,
+        pitch: this.view.camera.tilt
+      });
+    }
+  }
+
+  return DeckRenderer;
+}

package/src/{load-modules.js → load-modules.ts}

@@ -2,11 +2,20 @@ import createDeckProps from './deck-props';
 import createDeckLayer from './deck-layer';
 import createDeckLayerView2D from './deck-layer-view-2d';
 import createDeckRenderer from './deck-renderer';
-import {loadModules as esriLoaderLoadModules} from 'esri-loader';
+import {loadModules as esriLoaderLoadModules, ILoadScriptOptions} from 'esri-loader';
 
-let arcGIS = null;
+type LoadedModules = {
+  DeckLayer: any;
+  DeckRenderer: any;
+  modules?: unknown[];
+};
 
-export async function loadArcGISModules(modules, loadScriptOptions) {
+let arcGIS: LoadedModules;
+
+export async function loadArcGISModules(
+  modules: string[],
+  loadScriptOptions: ILoadScriptOptions
+): Promise<LoadedModules> {
   const namespace = Array.isArray(modules) ? null : modules;
   await loadArcGISModule(namespace, loadScriptOptions);
 
@@ -18,7 +27,10 @@ export async function loadArcGISModules(modules, loadScriptOptions) {
   return arcGIS;
 }
 
-function loadArcGISModule(esri, loadScriptOptions) {
+async function loadArcGISModule(
+  esri,
+  loadScriptOptions: ILoadScriptOptions
+): Promise<LoadedModules> {
   if (arcGIS) {
     // Already loaded
     return arcGIS;
@@ -34,7 +46,7 @@ function loadArcGISModule(esri, loadScriptOptions) {
     return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
   }
 
-  return esriLoaderLoadModules(
+  const [Layer, Accessor, BaseLayerViewGL2D, externalRenderers] = await esriLoaderLoadModules(
     [
       'esri/layers/Layer',
       'esri/core/Accessor',
@@ -42,12 +54,11 @@ function loadArcGISModule(esri, loadScriptOptions) {
       'esri/views/3d/externalRenderers'
     ],
     loadScriptOptions
-  ).then(([Layer, Accessor, BaseLayerViewGL2D, externalRenderers]) => {
-    return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
-  });
+  );
+  return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
 }
 
-function initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers) {
+function initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers): LoadedModules {
   const DeckProps = createDeckProps(Accessor);
   const DeckLayerView2D = createDeckLayerView2D(BaseLayerViewGL2D);
   const DeckLayer = createDeckLayer(DeckProps, Layer, DeckLayerView2D);

package/dist/es5/commons.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initializeResources = initializeResources;
-exports.render = render;
-exports.finalizeResources = finalizeResources;
-
-var _engine = require("@luma.gl/engine");
-
-var _constants = require("@luma.gl/constants");
-
-var _webgl = require("@luma.gl/webgl");
-
-var _core = require("@deck.gl/core");
-
-function initializeResources(device) {
-  var _this = this;
-
-  this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
-  this.model = new _engine.Model(device, {
-    vs: "#version 300 es\nin vec2 a_pos;\nout vec2 v_texcoord;\nvoid main(void) {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n    v_texcoord = (a_pos + 1.0) / 2.0;\n}\n    ",
-    fs: "#version 300 es\nprecision mediump float;\nuniform sampler2D u_texture;\nin vec2 v_texcoord;\nout vec4 fragColor;\nvoid main(void) {\n    vec4 rgba = texture(u_texture, v_texcoord);\n    rgba.rgb *= rgba.a;\n    fragColor = rgba;\n}\n    ",
-    attributes: {
-      a_pos: this.buffer
-    },
-    vertexCount: 4,
-    drawMode: 5
-  });
-  this.deckFbo = device.createFramebuffer({
-    width: 1,
-    height: 1
-  });
-  this.deckInstance = new _core.Deck({
-    viewState: {},
-    controller: false,
-    gl: device.gl,
-    parameters: {
-      depthTest: true
-    },
-    _framebuffer: this.deckFbo,
-    width: null,
-    height: null,
-    _customRender: function _customRender(redrawReason) {
-      if (redrawReason === 'arcgis') {
-        _this.deckInstance._drawLayers(redrawReason);
-      } else {
-        _this.redraw();
-      }
-    }
-  });
-}
-
-function render(_ref) {
-  var _this2 = this;
-
-  var gl = _ref.gl,
-      width = _ref.width,
-      height = _ref.height,
-      viewState = _ref.viewState;
-  var screenFbo = gl.getParameter(36006);
-  var dpr = window.devicePixelRatio;
-  width = Math.round(width * dpr);
-  height = Math.round(height * dpr);
-  this.deckFbo.resize({
-    width: width,
-    height: height
-  });
-  this.deckInstance.setProps({
-    viewState: viewState
-  });
-  this.deckInstance.redraw('arcgis');
-  (0, _webgl.withGLParameters)(gl, {
-    blend: true,
-    blendFunc: [1, 771],
-    framebuffer: screenFbo,
-    viewport: [0, 0, width, height]
-  }, function () {
-    _this2.model.setUniforms({
-      u_texture: _this2.deckFbo
-    }).draw(_this2.context.renderPass);
-  });
-}
-
-function finalizeResources() {
-  var _this$deckInstance, _this$model, _this$buffer, _this$deckFbo;
-
-  (_this$deckInstance = this.deckInstance) === null || _this$deckInstance === void 0 ? void 0 : _this$deckInstance.finalize();
-  this.deckInstance = null;
-  (_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.delete();
-  (_this$buffer = this.buffer) === null || _this$buffer === void 0 ? void 0 : _this$buffer.delete();
-  (_this$deckFbo = this.deckFbo) === null || _this$deckFbo === void 0 ? void 0 : _this$deckFbo.delete();
-}
-//# sourceMappingURL=commons.js.map

package/dist/es5/commons.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/commons.ts"],"names":["initializeResources","device","buffer","createBuffer","Int8Array","model","Model","vs","fs","attributes","a_pos","vertexCount","drawMode","deckFbo","createFramebuffer","width","height","deckInstance","Deck","viewState","controller","gl","parameters","depthTest","_framebuffer","_customRender","redrawReason","_drawLayers","redraw","render","screenFbo","getParameter","dpr","window","devicePixelRatio","Math","round","resize","setProps","blend","blendFunc","framebuffer","viewport","setUniforms","u_texture","draw","context","renderPass","finalizeResources","finalize","delete"],"mappings":"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","sourcesContent":["/* eslint-disable no-invalid-this */\n\nimport type {Device} from '@luma.gl/core';\nimport {Model} from '@luma.gl/engine';\nimport {GL} from '@luma.gl/constants';\nimport {withGLParameters} from '@luma.gl/webgl';\n\nimport {Deck} from '@deck.gl/core';\n\nexport function initializeResources(device: Device) {\n  // What is `this` referring to this function???\n  this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));\n\n  this.model = new Model(device, {\n    vs: `\\\n#version 300 es\nin vec2 a_pos;\nout vec2 v_texcoord;\nvoid main(void) {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n    v_texcoord = (a_pos + 1.0) / 2.0;\n}\n    `,\n    fs: `\\\n#version 300 es\nprecision mediump float;\nuniform sampler2D u_texture;\nin vec2 v_texcoord;\nout vec4 fragColor;\nvoid main(void) {\n    vec4 rgba = texture(u_texture, v_texcoord);\n    rgba.rgb *= rgba.a;\n    fragColor = rgba;\n}\n    `,\n    attributes: {\n      // eslint-disable-next-line camelcase\n      a_pos: this.buffer\n    },\n    vertexCount: 4,\n    drawMode: GL.TRIANGLE_STRIP\n  });\n\n  this.deckFbo = device.createFramebuffer({width: 1, height: 1});\n\n  this.deckInstance = new Deck({\n    // The view state will be set dynamically to track the MapView current extent.\n    viewState: {},\n\n    // Input is handled by the ArcGIS API for JavaScript.\n    controller: false,\n\n    // We use the same WebGL context as the ArcGIS API for JavaScript.\n    gl: device.gl,\n\n    // We need depth testing in general; we don't know what layers might be added to the deck.\n    parameters: {\n      depthTest: true\n    },\n\n    // This deck renders into an auxiliary framebuffer.\n    _framebuffer: this.deckFbo,\n\n    // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.\n    width: null,\n    height: null,\n\n    _customRender: redrawReason => {\n      if (redrawReason === 'arcgis') {\n        this.deckInstance._drawLayers(redrawReason);\n      } else {\n        this.redraw();\n      }\n    }\n  });\n}\n\nexport function render({gl, width, height, viewState}) {\n  const screenFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);\n\n  /* global window */\n  const dpr = window.devicePixelRatio;\n  width = Math.round(width * dpr);\n  height = Math.round(height * dpr);\n\n  this.deckFbo.resize({width, height});\n\n  this.deckInstance.setProps({viewState});\n  // redraw deck immediately into deckFbo\n  this.deckInstance.redraw('arcgis');\n\n  // We overlay the texture on top of the map using the full-screen quad.\n  withGLParameters(\n    gl,\n    {\n      blend: true,\n      blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],\n      framebuffer: screenFbo,\n      viewport: [0, 0, width, height]\n    },\n    () => {\n      // eslint-disable-next-line camelcase\n      this.model.setUniforms({u_texture: this.deckFbo}).draw(this.context.renderPass);\n    }\n  );\n}\n\nexport function finalizeResources() {\n  this.deckInstance?.finalize();\n  this.deckInstance = null;\n\n  this.model?.delete();\n  this.buffer?.delete();\n  this.deckFbo?.delete();\n}\n"],"file":"commons.js"}