@deck.gl/arcgis 9.0.0-beta.7 → 9.0.0-beta.9

package/src/commons.ts

@@ -1,48 +1,82 @@
 /* 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 type {Device, Texture, Framebuffer} from '@luma.gl/core';
+import type {WebGLDevice} from '@luma.gl/webgl';
+
+interface Renderer {
+  redraw: () => void;
+}
 
-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 type RenderResources = {
+  deck: Deck;
+  texture: Texture;
+  model: Model;
+  fbo: Framebuffer;
+};
+
+export function initializeResources(this: Renderer, device: Device): RenderResources {
+  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
+    },
+    parameters: {
+      depthWriteEnabled: true,
+      depthCompare: 'less-equal'
     },
-    vertexCount: 4,
-    drawMode: GL.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({width: 1, height: 1});
+  const fbo = device.createFramebuffer({
+    id: 'deckfbo',
+    width: 1,
+    height: 1,
+    colorAttachments: [texture]
+  });
 
-  this.deckInstance = new Deck({
+  const deckInstance = new Deck({
     // The view state will be set dynamically to track the MapView current extent.
     viewState: {},
 
@@ -50,7 +84,7 @@ void main(void) {
     controller: false,
 
     // We use the same WebGL context as the ArcGIS API for JavaScript.
-    gl: device.gl,
+    device,
 
     // We need depth testing in general; we don't know what layers might be added to the deck.
     parameters: {
@@ -58,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,
@@ -66,49 +100,68 @@ 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: Device = this.deckInstance.deck.device;
+
+  const textureToScreenPass = device.beginRenderPass({
+    framebuffer: screenFbo,
+    parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
+    clearColor: [0, 0, 0, 0],
+    clearDepth: 1
+  });
+
   device.withParametersWebGL(
     {
       blend: true,
-      blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
-      framebuffer: screenFbo,
-      viewport: [0, 0, width, height]
+      blendFunc: [GL.ONE, GL.ONE_MINUS_SRC_ALPHA]
     },
     () => {
-      // eslint-disable-next-line camelcase
-      this.model.setUniforms({u_texture: this.deckFbo}).draw(this.context.renderPass);
+      model.draw(textureToScreenPass);
     }
   );
 }
 
-export function finalizeResources() {
-  this.deckInstance?.finalize();
-  this.deckInstance = null;
-
-  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}

@@ -1,12 +1,10 @@
+import {WebGLDevice} from '@luma.gl/webgl';
 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.
@@ -14,13 +12,15 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
       // 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);
+      const device = WebGLDevice.attach(gl);
+
+      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() {
@@ -29,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.
@@ -38,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;
-}