chore: Use WebGLDevice when using webgl-only APIs

visgl · Sep 25, 2024 · aa2537b · aa2537b
1 parent 9067f45
commit aa2537b
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 46 deletions.
diff --git a/modules/arcgis/src/commons.ts b/modules/arcgis/src/commons.ts
@@ -1,9 +1,10 @@
 /* eslint-disable no-invalid-this */
 
 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 {Deck} from '@deck.gl/core';
+import {Model, Geometry} from '@luma.gl/engine';
+import {WebGLDevice} from '@luma.gl/webgl';
 
 interface Renderer {
   redraw: () => void;
@@ -146,33 +147,35 @@ export function render(
 ) {
   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;
+  if (device instanceof WebGLDevice) {
+    // @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;
-  const pixelWidth = Math.round(width * dpr);
-  const pixelHeight = Math.round(height * dpr);
+    /* global window */
+    const dpr = window.devicePixelRatio;
+    const pixelWidth = Math.round(width * dpr);
+    const pixelHeight = Math.round(height * dpr);
 
-  fbo.resize({width: pixelWidth, height: pixelHeight});
+    fbo.resize({width: pixelWidth, height: pixelHeight});
 
-  deck.setProps({viewState});
-  // redraw deck immediately into deckFbo
-  deck.redraw('arcgis');
+    deck.setProps({viewState});
+    // redraw deck immediately into deckFbo
+    deck.redraw('arcgis');
 
-  // We overlay the texture on top of the map using the full-screen quad.
+    // We overlay the texture on top of the map using the full-screen quad.
 
-  const textureToScreenPass = device.beginRenderPass({
-    framebuffer: screenFbo,
-    parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
-    clearColor: false,
-    clearDepth: false
-  });
-  try {
-    model.draw(textureToScreenPass);
-  } finally {
-    textureToScreenPass.end();
+    const textureToScreenPass = device.beginRenderPass({
+      framebuffer: screenFbo,
+      parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
+      clearColor: false,
+      clearDepth: false
+    });
+    try {
+      model.draw(textureToScreenPass);
+    } finally {
+      textureToScreenPass.end();
+    }
   }
 }
 

diff --git a/modules/core/src/lib/deck-picker.ts b/modules/core/src/lib/deck-picker.ts
@@ -159,7 +159,7 @@ export default class DeckPicker {
     }
 
     // Resize it to current canvas size (this is a noop if size hasn't changed)
-    const {canvas} = this.device.getCanvasContext();
+    const {canvas} = this.device.getDefaultCanvasContext();
     this.pickingFBO?.resize({width: canvas.width, height: canvas.height});
     this.depthFBO?.resize({width: canvas.width, height: canvas.height});
   }

diff --git a/modules/core/src/lib/deck.ts b/modules/core/src/lib/deck.ts
@@ -948,13 +948,15 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
       // instrumentGLContext(this.device.gl, {enable: true, copyState: true});
     }
 
-    this.device.setParametersWebGL({
-      blend: true,
-      blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
-      polygonOffsetFill: true,
-      depthTest: true,
-      depthFunc: GL.LEQUAL
-    });
+    if (this.device instanceof WebGLDevice) {
+      this.device.setParametersWebGL({
+        blend: true,
+        blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
+        polygonOffsetFill: true,
+        depthTest: true,
+        depthFunc: GL.LEQUAL
+      });
+    }
 
     this.props.onDeviceInitialized(this.device);
     if (this.device instanceof WebGLDevice) {

diff --git a/modules/core/src/lib/layer.ts b/modules/core/src/lib/layer.ts
@@ -20,6 +20,7 @@
 
 /* eslint-disable react/no-direct-mutation-state */
 import {Buffer, TypedArray} from '@luma.gl/core';
+import {WebGLDevice} from '@luma.gl/webgl';
 import {COORDINATE_SYSTEM} from './constants';
 import AttributeManager from './attribute/attribute-manager';
 import UniformTransitionManager from './uniform-transition-manager';
@@ -1153,14 +1154,27 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
       const {getPolygonOffset} = this.props;
       const offsets = (getPolygonOffset && getPolygonOffset(uniforms)) || [0, 0];
 
-      context.device.setParametersWebGL({polygonOffset: offsets});
+      if (context.device instanceof WebGLDevice) {
+        context.device.setParametersWebGL({polygonOffset: offsets});
+      }
 
       for (const model of this.getModels()) {
         model.setParameters(parameters);
       }
 
       // Call subclass lifecycle method
-      context.device.withParametersWebGL(parameters, () => {
+      if (context.device instanceof WebGLDevice) {
+        context.device.withParametersWebGL(parameters, () => {
+          const opts = {renderPass, moduleParameters, uniforms, parameters, context};
+
+          // extensions
+          for (const extension of this.props.extensions) {
+            extension.draw.call(this, opts, extension);
+          }
+
+          this.draw(opts);
+        });
+      } else {
         const opts = {renderPass, moduleParameters, uniforms, parameters, context};
 
         // extensions
@@ -1169,7 +1183,7 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
         }
 
         this.draw(opts);
-      });
+      }
     } finally {
       this.props = currentProps;
     }

diff --git a/modules/google-maps/src/google-maps-overlay.ts b/modules/google-maps/src/google-maps-overlay.ts
@@ -1,5 +1,6 @@
 /* global google */
 import {GL, GLParameters} from '@luma.gl/constants';
+import {WebGLDevice} from '@luma.gl/webgl';
 import {
   createDeckInstance,
   destroyDeckInstance,
@@ -257,14 +258,16 @@ export default class GoogleMapsOverlay {
 
       // As an optimization, some renders are to an separate framebuffer
       // which we need to pass onto deck
-      const _framebuffer = device.getParametersWebGL(GL.FRAMEBUFFER_BINDING);
+      if (device instanceof WebGLDevice) {
+        const _framebuffer = device.getParametersWebGL(GL.FRAMEBUFFER_BINDING);
+      }
 
       // @ts-expect-error
       deck.setProps({_framebuffer});
 
       // With external gl context, animation loop doesn't resize webgl-canvas and thus fails to
       // calculate corrext pixel ratio. Force this manually.
-      device.getCanvasContext().resize();
+      device.getDefaultCanvasContext().resize();
 
       // Camera changed, will trigger a map repaint right after this
       // Clear any change flag triggered by setting viewState so that deck does not request
@@ -273,17 +276,19 @@ export default class GoogleMapsOverlay {
 
       // Workaround for bug in Google maps where viewport state is wrong
       // TODO remove once fixed
-      device.setParametersWebGL({
-        viewport: [0, 0, gl.canvas.width, gl.canvas.height],
-        scissor: [0, 0, gl.canvas.width, gl.canvas.height],
-        stencilFunc: [gl.ALWAYS, 0, 255, gl.ALWAYS, 0, 255]
-      });
+      if (device instanceof WebGLDevice) {
+        device.setParametersWebGL({
+          viewport: [0, 0, gl.canvas.width, gl.canvas.height],
+          scissor: [0, 0, gl.canvas.width, gl.canvas.height],
+          stencilFunc: [gl.ALWAYS, 0, 255, gl.ALWAYS, 0, 255]
+        });
 
-      device.withParametersWebGL(GL_STATE, () => {
-        deck._drawLayers('google-vector', {
-          clearCanvas: false
+        device.withParametersWebGL(GL_STATE, () => {
+          deck._drawLayers('google-vector', {
+            clearCanvas: false
+          });
         });
-      });
+      }
     }
   }