@deck.gl/arcgis 9.3.4 → 9.3.6

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.3.4",
+  "version": "9.3.6",
   "publishConfig": {
     "access": "public"
   },
@@ -48,5 +48,5 @@
   "devDependencies": {
     "@arcgis/core": "^4.21.0"
   },
-  "gitHead": "c489a387f9c314a3d381111176a5d65c9fd74e87"
+  "gitHead": "9e8e923e9408824d3537cee6d071777fd299074b"
 }

package/src/commons.ts

@@ -19,7 +19,6 @@ export type RenderResources = {
   texture: Texture;
   model: Model;
   fbo: Framebuffer;
-  _externalFramebuffer?: {handle: WebGLFramebuffer; wrapper: Framebuffer};
 };
 
 async function createDeckInstance(gl: WebGL2RenderingContext): Promise<{
@@ -87,7 +86,9 @@ out vec4 fragColor;
 
 void main(void) {
     vec4 imageColor = texture(deckglTexture, v_texcoord);
-    imageColor.rgb *= imageColor.a;
+    // FBO stores premultiplied RGBA (rgb already multiplied by alpha).
+    // The composite blend (ONE, ONE_MINUS_SRC_ALPHA) handles premultiplied
+    // input correctly; multiplying again here would darken overlays.
     fragColor = imageColor;
 }
     `,
@@ -95,8 +96,8 @@ void main(void) {
       deckglTexture: texture
     },
     parameters: {
-      depthWriteEnabled: true,
-      depthCompare: 'less-equal',
+      depthWriteEnabled: false,
+      depthCompare: 'always',
       blendColorSrcFactor: 'one',
       blendColorDstFactor: 'one-minus-src-alpha',
       blendAlphaSrcFactor: 'one',
@@ -128,6 +129,18 @@ void main(void) {
 
     _customRender: redrawReason => {
       if (redrawReason === 'arcgis') {
+        // ArcGIS renders with alphaSrc=ZERO (preserves destination alpha for its
+        // own compositing pipeline). Without resetting this, deck layers inherit
+        // that blend state and write alpha=0 into the FBO, making the composite
+        // shader output (0,0,0,0) everywhere. Reset to standard premultiplied-alpha
+        // blend so the FBO stores correct RGBA for the composite pass.
+        const glCtx = (device as WebGLDevice).gl;
+        glCtx.blendFuncSeparate(
+          glCtx.ONE,
+          glCtx.ONE_MINUS_SRC_ALPHA,
+          glCtx.ONE,
+          glCtx.ONE_MINUS_SRC_ALPHA
+        );
         deckInstance._drawLayers(redrawReason);
       } else {
         this.redraw();
@@ -149,44 +162,81 @@ export function render(
     altitude?: number;
     pitch: number;
     bearing: number;
+    views?: unknown;
+    viewState?: unknown;
   }
 ) {
   const {model, deck, fbo} = resources;
   const device = model.device;
   if (device instanceof WebGLDevice) {
-    const {width, height, ...viewState} = viewport;
+    // @ts-ignore device.getParametersWebGL should return `any` not `void`?
+    const rawScreenFbo: WebGLFramebuffer | null = device.getParametersWebGL(GL.FRAMEBUFFER_BINDING);
+    const {width, height, views, viewState, ...defaultViewState} = viewport;
 
     /* global window */
     const dpr = window.devicePixelRatio;
     const pixelWidth = Math.round(width * dpr);
     const pixelHeight = Math.round(height * dpr);
 
-    // Wrap the external framebuffer handle so luma.gl treats it as a proper Framebuffer resource.
-    const externalFbo = device.getParametersWebGL(GL.FRAMEBUFFER_BINDING);
-    let screenFbo: Framebuffer | null = null;
-    if (externalFbo) {
-      if (resources._externalFramebuffer?.handle !== externalFbo) {
-        resources._externalFramebuffer?.wrapper.destroy();
-        const wrapper = device.createFramebuffer({
-          handle: externalFbo,
-          width: pixelWidth,
-          height: pixelHeight
-        });
-        resources._externalFramebuffer = {handle: externalFbo, wrapper};
-      }
-      screenFbo = resources._externalFramebuffer!.wrapper;
-    }
-
     fbo.resize({width: pixelWidth, height: pixelHeight});
 
-    deck.setProps({viewState});
+    // luma's Framebuffer.resize() clones and destroys the color attachment texture when
+    // dimensions change, leaving the cached texture reference and the model sampler binding
+    // pointing at a destroyed GPU handle. Re-sync if the attachment was replaced.
+    const currentTexture =
+      (fbo.colorAttachments[0] as any).texture ?? (fbo.colorAttachments[0] as unknown as Texture);
+    if (currentTexture !== resources.texture) {
+      resources.texture = currentTexture;
+      (model as any).setBindings({deckglTexture: currentTexture});
+    }
+
+    // Pass CSS pixel dimensions — deck handles DPR internally. Passing physical
+    // pixels would double-apply DPR and project layer geometry off-screen.
+    // Without width/height, deck's viewport aspect diverges from ArcGIS's,
+    // causing the overlay to drift off the ground plane under tilt/rotation.
+    const deckProps: any = {
+      width,
+      height,
+      viewState: viewState || defaultViewState
+    };
+    if (views) {
+      deckProps.views = views;
+    }
+    deck.setProps(deckProps);
     // redraw deck immediately into deckFbo
     deck.redraw('arcgis');
 
     // We overlay the texture on top of the map using the full-screen quad.
+    const {gl} = device;
+
+    // drawBuffers is per-FBO state not tracked by luma's state cache;
+    // restore it for the screen FBO after rendering to the offscreen FBO.
+    if (rawScreenFbo) {
+      gl.bindFramebuffer(GL.FRAMEBUFFER, rawScreenFbo);
+      gl.drawBuffers([GL.COLOR_ATTACHMENT0]);
+    } else {
+      gl.drawBuffers([GL.BACK]);
+    }
+
+    // The model sets blend factors but not blend:true, so
+    // setDeviceParameters won't enable blending on its own.
+    gl.enable(GL.BLEND);
+    gl.blendFuncSeparate(GL.ONE, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA);
+    gl.blendEquationSeparate(GL.FUNC_ADD, GL.FUNC_ADD);
+
+    // luma's WEBGLRenderPass duck-types the framebuffer prop, reading `.handle`, `.width`,
+    // `.height`, and `.colorAttachments`. A raw WebGLFramebuffer has none of those, which
+    // breaks viewport auto-setup and draw-buffer selection. Build a minimal adapter that
+    // luma's state tracker accepts; `'handle' in obj` is true, so the raw FBO is bound.
+    const screenFboAdapter = {
+      handle: rawScreenFbo,
+      width: pixelWidth,
+      height: pixelHeight,
+      colorAttachments: [null]
+    };
 
     const textureToScreenPass = device.beginRenderPass({
-      framebuffer: screenFbo,
+      framebuffer: screenFboAdapter as any,
       parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
       clearColor: false,
       clearDepth: false
@@ -204,5 +254,4 @@ export function finalizeResources(resources: RenderResources) {
   resources.model.destroy();
   resources.fbo.destroy();
   resources.texture.destroy();
-  resources._externalFramebuffer?.wrapper.destroy();
 }

package/src/deck-renderer.ts

@@ -7,69 +7,262 @@ import {initializeResources, render, finalizeResources, RenderResources} from '.
 
 import SceneView from '@arcgis/core/views/SceneView';
 import type {DeckProps} from '@deck.gl/core';
+import MapView from '../../core/src/views/map-view';
 
-/** 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);
+// Web Mercator scale at zoom 0 for 256 px tiles; deck.gl uses 512 px tiles,
+// so the final zoom is shifted by -1.
+const ARCGIS_WEB_MERCATOR_SCALE_AT_ZOOM_0 = 591657550.5;
+const DECK_GROUND_MPP_AT_ZOOM_0 = 78271.484;
+const METERS_PER_DEG_LAT = 111320;
+const ARCGIS_DIAGONAL_FOV_RADIANS = (55 * Math.PI) / 180;
+const ALTITUDE_BLEND_START_TILT = 65;
+const ALTITUDE_BLEND_END_TILT = 80;
+
+function getDistanceMeters(a, b) {
+  const midLatRad = (((a.latitude + b.latitude) / 2) * Math.PI) / 180;
+  const dLatM = (a.latitude - b.latitude) * METERS_PER_DEG_LAT;
+  const dLngM = (a.longitude - b.longitude) * METERS_PER_DEG_LAT * Math.cos(midLatRad);
+
+  return Math.sqrt(dLatM * dLatM + dLngM * dLngM);
+}
+
+function getZoom(
+  view: SceneView,
+  longitude: number,
+  latitude: number,
+  width: number,
+  height: number
+) {
+  const focalPoint = view.toMap({x: width / 2, y: height / 2} as any);
+  const focalPointRight = view.toMap({x: width / 2 + 1, y: height / 2} as any);
+
+  if (focalPoint && focalPointRight) {
+    const horizontalMetersPerPixel = getDistanceMeters(focalPoint, focalPointRight);
+
+    if (horizontalMetersPerPixel > 0) {
+      const latitudeRad = (latitude * Math.PI) / 180;
+      return Math.log2(
+        (DECK_GROUND_MPP_AT_ZOOM_0 * Math.cos(latitudeRad)) / horizontalMetersPerPixel
+      );
+    }
+  }
+
+  return Math.log2(ARCGIS_WEB_MERCATOR_SCALE_AT_ZOOM_0 / view.scale) - 1;
 }
 
-export default function createDeckRenderer(DeckProps, externalRenderers) {
+function smoothstep(edge0: number, edge1: number, value: number) {
+  const t = Math.max(0, Math.min(1, (value - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+
+function getFovMatchedAltitude(width: number, height: number) {
+  const aspect = width / height;
+  const verticalTan = Math.tan(ARCGIS_DIAGONAL_FOV_RADIANS / 2) / Math.sqrt(1 + aspect * aspect);
+
+  return 0.5 / verticalTan;
+}
+
+function getAltitude(tilt: number, slantAltitude: number, width: number, height: number) {
+  const fovAltitude = getFovMatchedAltitude(width, height);
+  const blend = smoothstep(ALTITUDE_BLEND_START_TILT, ALTITUDE_BLEND_END_TILT, tilt);
+
+  return slantAltitude * (1 - blend) + fovAltitude * blend;
+}
+
+function getArcGISMatrixViewState(
+  view: SceneView,
+  longitude: number,
+  latitude: number,
+  zoom: number,
+  resolution: number,
+  altitude: number
+) {
+  return {
+    views: new MapView({id: 'arcgis-scene'}),
+    viewState: {
+      'arcgis-scene': {
+        id: 'arcgis-scene',
+        longitude,
+        latitude,
+        zoom,
+        pitch: view.camera.tilt,
+        bearing: view.camera.heading,
+        altitude,
+        position: [0, 0, 0],
+        resolution
+      }
+    }
+  };
+}
+
+export default function createDeckRenderer(DeckProps, RenderNode) {
   class DeckRenderer {
     view: SceneView;
     deck: any;
     resources: RenderResources | null = null;
     cancelInitialization: (() => void) | null = null;
+    renderNode: any = null;
 
-    constructor(view: SceneView, props: DeckProps) {
-      this.view = view;
-      this.deck = new DeckProps(props);
-    }
+    constructor(viewOrProps: SceneView | ({view: SceneView} & DeckProps), props?: DeckProps) {
+      if (viewOrProps && typeof viewOrProps === 'object' && 'view' in viewOrProps) {
+        const {view, ...deckProps} = viewOrProps;
+        this.view = view;
+        this.deck = new DeckProps(deckProps);
+      } else {
+        this.view = viewOrProps;
+        this.deck = new DeckProps(props);
+      }
 
-    async setup(context) {
-      const gl = context.gl;
+      let isInitializing = false;
 
-      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;
-      }
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      const DeckRenderNode = RenderNode.createSubclass({
+        consumes: {required: ['composite-color']},
+        produces: 'composite-color',
+
+        initialize() {},
+
+        render(inputs: Array<{name: string}>) {
+          // biome-ignore lint/complexity/noThisInStatic: RenderNode render is an instance method
+          // eslint-disable-next-line @typescript-eslint/no-this-alias, consistent-this
+          const renderNode: any = this;
+          const passthrough = inputs.find(i => i.name === 'composite-color');
+
+          if (!self.resources && !isInitializing) {
+            const gl = renderNode.gl;
+            if (gl) {
+              isInitializing = true;
+              let cancelled = false;
+              self.cancelInitialization = () => {
+                cancelled = true;
+              };
+              initializeResources
+                .call(self, gl)
+                .then(resources => {
+                  isInitializing = false;
+                  if (cancelled) {
+                    finalizeResources(resources);
+                    return;
+                  }
+                  self.deck.on('change', deckProps => resources.deck.setProps(deckProps));
+                  resources.deck.setProps(self.deck.toJSON());
+                  self.resources = resources;
+                  renderNode.requestRender();
+                })
+                .catch(err => {
+                  isInitializing = false;
+                  // eslint-disable-next-line no-console
+                  console.error('DeckRenderer: failed to initialize resources', err);
+                });
+            }
+            return passthrough;
+          }
+          if (!self.resources) {
+            return passthrough;
+          }
+
+          const output = renderNode.bindRenderTarget();
+          const gl = renderNode.gl as WebGL2RenderingContext;
 
-      this.deck.on('change', props => resources.deck.setProps(props));
+          const dpr = window.devicePixelRatio || 1;
+          const width = gl.drawingBufferWidth / dpr;
+          const height = gl.drawingBufferHeight / dpr;
 
-      resources.deck.setProps(this.deck.toJSON());
-      this.resources = resources;
+          // Keep deck.gl's SceneView approximation anchored at the ArcGIS
+          // focal point every frame. Zoom comes from the actual horizontal
+          // ground meters-per-pixel at screen center (`toMap(center)` and
+          // `toMap(center + 1px)`), which stays stable under tilt in local
+          // SceneView. We keep the older `view.scale` formula only as a
+          // fallback when focal-point sampling is unavailable.
+          //
+          // deck.gl's `altitude` still couples camera distance and FOV, while
+          // ArcGIS keeps them separate. We therefore compute a slant-distance
+          // altitude from the live camera position and focal point, then only
+          // at high tilt blend toward the ArcGIS fixed-FOV altitude. That
+          // preserves the better mid-tilt camera match while reducing the
+          // remaining extreme-angle drift.
+          const cameraPos = self.view.camera.position;
+          const focalPoint = self.view.toMap({x: width / 2, y: height / 2} as any);
+          const latitude = focalPoint ? focalPoint.latitude : self.view.center.latitude;
+          const longitude = focalPoint ? focalPoint.longitude : self.view.center.longitude;
+
+          const midLatRad = (((latitude + cameraPos.latitude) / 2) * Math.PI) / 180;
+          const dLatM = (cameraPos.latitude - latitude) * METERS_PER_DEG_LAT;
+          const dLngM =
+            (cameraPos.longitude - longitude) * METERS_PER_DEG_LAT * Math.cos(midLatRad);
+          const horizM = Math.sqrt(dLatM * dLatM + dLngM * dLngM);
+          const slantM = Math.sqrt(horizM * horizM + cameraPos.z * cameraPos.z);
+
+          const zoom = getZoom(self.view, longitude, latitude, width, height);
+
+          const viewportHeightM = height * self.view.resolution;
+          const slantAltitude = slantM / viewportHeightM;
+          const altitude = getAltitude(self.view.camera.tilt, slantAltitude, width, height);
+          const arcgisMatrixView = getArcGISMatrixViewState(
+            self.view,
+            longitude,
+            latitude,
+            zoom,
+            self.view.resolution,
+            altitude
+          );
+
+          try {
+            if (arcgisMatrixView) {
+              render(self.resources, {
+                width,
+                height,
+                latitude,
+                longitude,
+                altitude,
+                zoom,
+                bearing: self.view.camera.heading,
+                pitch: self.view.camera.tilt,
+                ...arcgisMatrixView
+              });
+            } else {
+              render(self.resources, {
+                width,
+                height,
+                latitude,
+                longitude,
+                altitude,
+                zoom,
+                bearing: self.view.camera.heading,
+                pitch: self.view.camera.tilt
+              });
+            }
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('DeckRenderer: render error', e);
+          }
+
+          return output;
+        }
+      });
+
+      this.renderNode = new DeckRenderNode({view: this.view});
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async setup(_context?: unknown) {}
+
     dispose() {
       this.cancelInitialization?.();
       if (this.resources) {
         finalizeResources(this.resources);
+        this.resources = null;
       }
+      this.renderNode = null;
     }
 
     redraw() {
-      externalRenderers.requestRender(this.view);
+      this.renderNode?.requestRender();
     }
 
     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
-      });
+      this.renderNode?.requestRender();
     }
   }
 

package/src/index.ts

@@ -10,7 +10,7 @@ import createDeckRenderer from './deck-renderer';
 import Accessor from '@arcgis/core/core/Accessor';
 import Layer from '@arcgis/core/layers/Layer';
 import BaseLayerViewGL2D from '@arcgis/core/views/2d/layers/BaseLayerViewGL2D';
-import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';
+import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode';
 
 // require-style loader
 export {loadArcGISModules} from './load-modules';
@@ -19,4 +19,4 @@ export {loadArcGISModules} from './load-modules';
 const DeckProps = createDeckProps(Accessor);
 const DeckLayerView2D = createDeckLayerView2D(BaseLayerViewGL2D);
 export const DeckLayer = createDeckLayer(DeckProps, Layer, DeckLayerView2D);
-export const DeckRenderer = createDeckRenderer(DeckProps, externalRenderers);
+export const DeckRenderer = createDeckRenderer(DeckProps, RenderNode);

package/src/load-modules.ts

@@ -45,28 +45,28 @@ async function loadArcGISModule(
     const Layer = esri.layers.Layer;
     const Accessor = esri.core.Accessor;
     const BaseLayerViewGL2D = esri.views['2d'].layers.BaseLayerViewGL2D;
-    const externalRenderers = esri.views['3d'].externalRenderers;
+    const RenderNode = esri.views['3d'].webgl.RenderNode;
 
-    return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
+    return initialize(Layer, Accessor, BaseLayerViewGL2D, RenderNode);
   }
 
-  const [Layer, Accessor, BaseLayerViewGL2D, externalRenderers] = await esriLoaderLoadModules(
+  const [Layer, Accessor, BaseLayerViewGL2D, RenderNode] = await esriLoaderLoadModules(
     [
       'esri/layers/Layer',
       'esri/core/Accessor',
       'esri/views/2d/layers/BaseLayerViewGL2D',
-      'esri/views/3d/externalRenderers'
+      'esri/views/3d/webgl/RenderNode'
     ],
     loadScriptOptions
   );
-  return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
+  return initialize(Layer, Accessor, BaseLayerViewGL2D, RenderNode);
 }
 
-function initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers): LoadedModules {
+function initialize(Layer, Accessor, BaseLayerViewGL2D, RenderNode): LoadedModules {
   const DeckProps = createDeckProps(Accessor);
   const DeckLayerView2D = createDeckLayerView2D(BaseLayerViewGL2D);
   const DeckLayer = createDeckLayer(DeckProps, Layer, DeckLayerView2D);
-  const DeckRenderer = createDeckRenderer(DeckProps, externalRenderers);
+  const DeckRenderer = createDeckRenderer(DeckProps, RenderNode);
 
   arcGIS = {DeckLayer, DeckRenderer};
   return arcGIS;