@deck.gl/arcgis 9.0.0-beta.8 → 9.0.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Use deck.gl as a custom ArcGIS API for JavaScript layer",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,18 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.0.0-beta.10",
+    "@luma.gl/constants": "^9.0.6",
+    "@luma.gl/webgl": "^9.0.6",
     "esri-loader": "^3.3.0"
   },
   "peerDependencies": {
     "@arcgis/core": "^4.0.0",
-    "@deck.gl/core": "^9.0.0-beta",
-    "@luma.gl/core": "9.0.0-beta.10",
-    "@luma.gl/engine": "9.0.0-beta.10"
+    "@deck.gl/core": "^9.0.0",
+    "@luma.gl/core": "^9.0.0",
+    "@luma.gl/engine": "^9.0.0"
   },
-  "gitHead": "8867a1047c2693d44e4af9507c296cf7ab61f9e8"
+  "devDependencies": {
+    "@arcgis/core": "^4.21.0"
+  },
+  "gitHead": "fcb5ccf0a899e651949b24986488211e278e9321"
 }

package/src/commons.ts

@@ -1,15 +1,24 @@
 /* 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 {Model, Geometry} from '@luma.gl/engine';
 import {Deck} from '@deck.gl/core';
-import {WebGLDevice} from '@luma.gl/webgl';
+import type {Device, Texture, Framebuffer} from '@luma.gl/core';
+import type {WebGLDevice} from '@luma.gl/webgl';
 
-export function initializeResources(device: Device) {
-  // 'this' refers to the BaseLayerViewGL2D class from
-  // import BaseLayerViewGL2D from "@arcgis/core/views/2d/layers/BaseLayerViewGL2D.js";
+interface Renderer {
+  redraw: () => void;
+}
+
+export type RenderResources = {
+  deck: Deck;
+  texture: Texture;
+  model: Model;
+  fbo: Framebuffer;
+};
 
-  const deckglTexture = device.createTexture({
+export function initializeResources(this: Renderer, device: Device): RenderResources {
+  const texture = device.createTexture({
     format: 'rgba8unorm',
     width: 1,
     height: 1,
@@ -21,18 +30,14 @@ export function initializeResources(device: Device) {
     }
   });
 
-  this.deckglTexture = deckglTexture;
-
-  this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, -1]));
-
-  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: `\
@@ -48,30 +53,30 @@ void main(void) {
     fragColor = imageColor;
 }
     `,
-    bufferLayout: [{name: 'a_pos', format: 'sint8x2'}],
     bindings: {
-      deckglTexture
+      deckglTexture: texture
     },
     parameters: {
       depthWriteEnabled: true,
       depthCompare: 'less-equal'
     },
-    attributes: {
-      // eslint-disable-next-line camelcase
-      a_pos: this.buffer
-    },
-    vertexCount: 6,
-    topology: 'triangle-strip'
+    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.deckFbo = device.createFramebuffer({
+  const fbo = device.createFramebuffer({
     id: 'deckfbo',
     width: 1,
     height: 1,
-    colorAttachments: [deckglTexture]
+    colorAttachments: [texture]
   });
 
-  this.deckInstance = new Deck({
+  const deckInstance = new Deck({
     // The view state will be set dynamically to track the MapView current extent.
     viewState: {},
 
@@ -79,7 +84,7 @@ void main(void) {
     controller: false,
 
     // We use the same WebGL context as the ArcGIS API for JavaScript.
-    gl: (device as WebGLDevice).gl,
+    device,
 
     // We need depth testing in general; we don't know what layers might be added to the deck.
     parameters: {
@@ -87,7 +92,7 @@ void main(void) {
     },
 
     // This deck renders into an auxiliary framebuffer.
-    _framebuffer: this.deckFbo,
+    _framebuffer: fbo,
 
     // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
     width: null,
@@ -95,34 +100,50 @@ void main(void) {
 
     _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;
+  const screenFbo = (device as WebGLDevice).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.
-  const device: WebGLDevice = this.deckInstance.device;
 
   const textureToScreenPass = device.beginRenderPass({
     framebuffer: screenFbo,
-    parameters: {viewport: [0, 0, width, height]},
+    parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
     clearColor: [0, 0, 0, 0],
     clearDepth: 1
   });
@@ -130,23 +151,17 @@ export function render({gl, width, height, viewState}) {
   device.withParametersWebGL(
     {
       blend: true,
-      blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]
+      blendFunc: [GL.ONE, GL.ONE_MINUS_SRC_ALPHA]
     },
     () => {
-      this.model.setBindings({
-        deckglTexture: this.deckFbo.colorAttachments[0]
-      });
-      this.model.draw(textureToScreenPass);
+      model.draw(textureToScreenPass);
     }
   );
 }
 
-export function finalizeResources() {
-  this.deckInstance?.finalize();
-  this.deckInstance = null;
-
-  this.model?.delete();
-  this.buffer?.delete();
-  this.deckFbo?.delete();
-  this.deckglTexture?.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}

@@ -4,10 +4,7 @@ import {initializeResources, render, finalizeResources} from './commons';
 export default function createDeckLayerView2D(BaseLayerViewGL2D) {
   return BaseLayerViewGL2D.createSubclass({
     properties: {
-      deckgl: {},
-      deckFbo: {},
-      model: {},
-      buffer: {}
+      resources: null
     },
 
     // Attach is called as soon as the layer view is ready to start rendering.
@@ -17,13 +14,13 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
       const gl = this.context;
       const device = WebGLDevice.attach(gl);
 
-      initializeResources.call(this, device);
+      this.resources = initializeResources.call(this, device);
 
       // Update deck props
-      this.layer.deck.on('change', props => this.deckInstance.setProps(props));
+      this.layer.deck.on('change', props => this.resources.deck.setProps(props));
 
       // We need to start drawing the deck.gl layer immediately.
-      this.deckInstance.setProps(this.layer.deck.toJSON());
+      this.resources.deck.setProps(this.layer.deck.toJSON());
     },
 
     redraw() {
@@ -32,7 +29,8 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
 
     // Called when the layer must be destroyed.
     detach() {
-      finalizeResources.call(this);
+      finalizeResources(this.resources);
+      this.resources = null;
     },
 
     // Called every time that the layer view must be rendered.
@@ -41,17 +39,14 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
       // 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,65 @@
+/* eslint-disable no-invalid-this */
+import {WebGLDevice} from '@luma.gl/webgl';
+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;
+
+    constructor(view: SceneView, props: DeckProps) {
+      this.view = view;
+      this.deck = new DeckProps(props);
+    }
+
+    setup(context) {
+      const gl = context.gl;
+      const device = WebGLDevice.attach(gl);
+      const resources = initializeResources.call(this, device);
+
+      this.deck.on('change', props => resources.deck.setProps(props));
+
+      resources.deck.setProps(this.deck.toJSON());
+      this.resources = resources;
+    }
+
+    dispose() {
+      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/src/deck-renderer.js

@@ -1,56 +0,0 @@
-/* eslint-disable no-invalid-this */
-
-import {initializeResources, render, finalizeResources} from './commons';
-
-// ArcGIS fov is corner-to-corner
-function arcgisFOVToDeckAltitude(fov, aspectRatio) {
-  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 {
-    constructor(view, props) {
-      this.view = view;
-      this.deck = new DeckProps(props);
-    }
-
-    setup(context) {
-      const gl = context.gl;
-      initializeResources.call(this, gl);
-
-      this.deck.on('change', props => this.deckInstance.setProps(props));
-
-      this.deckInstance.setProps(this.deck.toJSON());
-    }
-
-    dispose() {
-      finalizeResources.call(this);
-    }
-
-    redraw() {
-      externalRenderers.requestRender(this.view);
-    }
-
-    render(context) {
-      const [width, height] = this.view.size;
-
-      render.call(this, {
-        gl: context.gl,
-        width,
-        height,
-        viewState: {
-          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;
-}