fix(arcgis) reenable build

examples/vite.config.local.mjs

@@ -15,6 +15,7 @@ export default defineConfig(async () => {
         // Use root dependencies
         '@luma.gl': join(rootDir, './node_modules/@luma.gl'),
         '@math.gl': join(rootDir, './node_modules/@math.gl'),
+        '@arcgis/core': join(rootDir, './node_modules/@arcgis/core'),
         '@loaders.gl/core': join(rootDir, './node_modules/@loaders.gl/core')
       }
     },

modules/arcgis/bundle.ts

@@ -1,3 +1,4 @@
 export * from '../core/bundle/peer-dependency';
 
-export * from './src/load-modules';
+// @ts-ignore import from transpiled code to leverage TS transforms
+export * from './dist/load-modules';

modules/arcgis/package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@luma.gl/constants": "9.0.0-beta.10",
+    "@luma.gl/webgl": "9.0.0-beta.10",
     "esri-loader": "^3.3.0"
   },
   "peerDependencies": {

modules/arcgis/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,105 +53,115 @@ 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: {},
 
     // 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 as WebGLDevice).gl,
+    device,
 
     // We need depth testing in general; we don't know what layers might be added to the deck.
     parameters: {
       depthTest: true
     },
 
     // 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,
     height: null,
 
     _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
   });
 
   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();
 }

modules/arcgis/src/deck-layer-view-2d.js → modules/arcgis/src/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
       });
     }
   });