(feat): Upgrade deck.gl and luma.gl

.meta-updater/main.mjs

@@ -1,6 +1,9 @@
-const DECK_VERSION = '~8.8.27';
-const LUMAGL_VERSION = '~8.5.21';
-const MATHGL_VERSION = '^3.5.7';
+// const DECK_VERSION = '~8.8.27';
+// const LUMAGL_VERSION = '~8.5.21';
+// const MATHGL_VERSION = '^3.5.7';
+const DECK_VERSION = '~9.0.17';
+const LUMAGL_VERSION = '~9.0.14';
+const MATHGL_VERSION = '^4.0.1';
 const REACT_VERSION = '^16.8.0 || ^17.0.0';
 
 /** @typedef {import('@pnpm/types').PackageManifest} PackageManifest */

package.json

@@ -21,24 +21,24 @@
     "publish": "pnpm build && pnpm changeset publish"
   },
   "dependencies": {
-    "@deck.gl/core": "~8.8.27",
-    "@deck.gl/geo-layers": "~8.8.27",
-    "@deck.gl/layers": "~8.8.27",
-    "@deck.gl/react": "~8.8.27",
-    "@luma.gl/constants": "~8.5.21",
-    "@luma.gl/core": "~8.5.21",
-    "@luma.gl/shadertools": "~8.5.21",
-    "@luma.gl/webgl": "~8.5.21"
+    "@deck.gl/core": "~9.0.17",
+    "@deck.gl/geo-layers": "~9.0.17",
+    "@deck.gl/layers": "~9.0.17",
+    "@deck.gl/react": "~9.0.17",
+    "@luma.gl/constants": "~9.0.14",
+    "@luma.gl/core": "~9.0.14",
+    "@luma.gl/shadertools": "~9.0.14",
+    "@luma.gl/webgl": "~9.0.14"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.3",
     "@changesets/cli": "^2.27.1",
-    "@deck.gl/extensions": "~8.8.27",
-    "@deck.gl/mesh-layers": "~8.8.27",
-    "@deck.gl/test-utils": "~8.8.27",
+    "@deck.gl/extensions": "~9.0.17",
+    "@deck.gl/mesh-layers": "~9.0.17",
+    "@deck.gl/test-utils": "~9.0.17",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@luma.gl/test-utils": "~8.5.21",
+    "@luma.gl/test-utils": "~9.0.14",
     "@pnpm/meta-updater": "^1.0.0",
     "@pnpm/types": "^10.0.0",
     "@probe.gl/test-utils": "^3.5.0",

packages/constants/package.json

@@ -23,7 +23,7 @@
     "build": "unbuild"
   },
   "dependencies": {
-    "@luma.gl/constants": "~8.5.21"
+    "@luma.gl/constants": "~9.0.14"
   },
   "unbuild": {
     "entries": [

packages/constants/src/index.ts

@@ -1,4 +1,4 @@
-import GL from '@luma.gl/constants';
+import { GL } from '@luma.gl/constants';
 
 export const MAX_COLOR_INTENSITY = 255;
 
@@ -18,28 +18,28 @@ export const DEFAULT_FONT_FAMILY =
  */
 export const DTYPE_VALUES = {
   Uint8: {
-    format: GL.R8UI,
+    format: 'r8uint',
     dataFormat: GL.RED_INTEGER,
     type: GL.UNSIGNED_BYTE,
     max: 2 ** 8 - 1,
     sampler: 'usampler2D'
   },
   Uint16: {
-    format: GL.R16UI,
+    format: 'r16uint',
     dataFormat: GL.RED_INTEGER,
     type: GL.UNSIGNED_SHORT,
     max: 2 ** 16 - 1,
     sampler: 'usampler2D'
   },
   Uint32: {
-    format: GL.R32UI,
+    format: 'r32uint',
     dataFormat: GL.RED_INTEGER,
     type: GL.UNSIGNED_INT,
     max: 2 ** 32 - 1,
     sampler: 'usampler2D'
   },
   Float32: {
-    format: GL.R32F,
+    format: 'r32float',
     dataFormat: GL.RED,
     type: GL.FLOAT,
     // Not sure what to do about this one - a good use case for channel stats, I suppose:
@@ -48,29 +48,29 @@ export const DTYPE_VALUES = {
     sampler: 'sampler2D'
   },
   Int8: {
-    format: GL.R8I,
+    format: 'r8int',
     dataFormat: GL.RED_INTEGER,
     type: GL.BYTE,
     max: 2 ** (8 - 1) - 1,
     sampler: 'isampler2D'
   },
   Int16: {
-    format: GL.R16I,
+    format: 'r16int',
     dataFormat: GL.RED_INTEGER,
     type: GL.SHORT,
     max: 2 ** (16 - 1) - 1,
     sampler: 'isampler2D'
   },
   Int32: {
-    format: GL.R32I,
+    format: 'r32int',
     dataFormat: GL.RED_INTEGER,
     type: GL.INT,
     max: 2 ** (32 - 1) - 1,
     sampler: 'isampler2D'
   },
   // Cast Float64 as 32 bit float point so it can be rendered.
   Float64: {
-    format: GL.R32F,
+    format: 'r32float',
     dataFormat: GL.RED,
     type: GL.FLOAT,
     // Not sure what to do about this one - a good use case for channel stats, I suppose:

packages/extensions/package.json

@@ -23,7 +23,7 @@
     "prepare": "node prepare.mjs"
   },
   "peerDependencies": {
-    "@deck.gl/core": "~8.8.27"
+    "@deck.gl/core": "~9.0.17"
   },
   "dependencies": {
     "@vivjs/constants": "workspace:*"

packages/extensions/src/additive-colormap-3d-extensions/base-extension.js

@@ -58,10 +58,10 @@ const BaseExtension = class extends LayerExtension {
   updateState({ props, oldProps, changeFlags, ...rest }) {
     super.updateState({ props, oldProps, changeFlags, ...rest });
     if (props.colormap !== oldProps.colormap) {
-      const { gl } = this.context;
+      const { device } = this.context;
       if (this.state.model) {
         this.state.model.delete();
-        this.setState({ model: this._getModel(gl) });
+        this.setState({ model: this._getModel(device) });
       }
     }
   }

packages/extensions/src/additive-colormap-extension/additive-colormap-extension.js

@@ -73,10 +73,10 @@ const AdditiveColormapExtension = class extends LayerExtension {
   updateState({ props, oldProps, changeFlags, ...rest }) {
     super.updateState({ props, oldProps, changeFlags, ...rest });
     if (props.colormap !== oldProps.colormap) {
-      const { gl } = this.context;
+      const { device } = this.context;
       if (this.state.model) {
         this.state.model.delete();
-        this.setState({ model: this._getModel(gl) });
+        this.setState({ model: this._getModel(device) });
       }
     }
   }

packages/layers/package.json

@@ -23,17 +23,17 @@
     "test": "node ../../scripts/bundle-test.mjs tests/index.spec.js | tape-run | tap-spec"
   },
   "peerDependencies": {
-    "@deck.gl/core": "~8.8.27",
-    "@deck.gl/geo-layers": "~8.8.27",
-    "@deck.gl/layers": "~8.8.27",
-    "@luma.gl/constants": "~8.5.21",
-    "@luma.gl/core": "~8.5.21",
-    "@luma.gl/engine": "~8.5.21",
-    "@luma.gl/webgl": "~8.5.21"
+    "@deck.gl/core": "~9.0.17",
+    "@deck.gl/geo-layers": "~9.0.17",
+    "@deck.gl/layers": "~9.0.17",
+    "@luma.gl/constants": "~9.0.14",
+    "@luma.gl/core": "~9.0.14",
+    "@luma.gl/engine": "~9.0.14",
+    "@luma.gl/webgl": "~9.0.14"
   },
   "dependencies": {
-    "@math.gl/core": "^3.5.7",
-    "@math.gl/culling": "^3.5.7",
+    "@math.gl/core": "^4.0.1",
+    "@math.gl/culling": "^4.0.1",
     "@vivjs/constants": "workspace:*",
     "@vivjs/extensions": "workspace:*",
     "@vivjs/loaders": "workspace:*",

packages/layers/src/bitmap-layer.js

@@ -1,7 +1,7 @@
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
 import { BitmapLayer as BaseBitmapLayer } from '@deck.gl/layers';
-import GL from '@luma.gl/constants';
-import { Geometry, Model } from '@luma.gl/core';
+import { GL } from '@luma.gl/constants';
+import { Geometry, Model } from '@luma.gl/engine';
 
 const PHOTOMETRIC_INTERPRETATIONS = {
   WhiteIsZero: 0,
@@ -101,7 +101,7 @@ class BitmapLayerWrapper extends BaseBitmapLayer {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new Geometry({
-        drawMode: GL.TRIANGLES,
+        topology: 'triangle-list',
         vertexCount: 6
       }),
       isInstanced: false,
@@ -131,15 +131,15 @@ class BitmapLayerWrapper extends BaseBitmapLayer {
  */
 const BitmapLayer = class extends CompositeLayer {
   initializeState(args) {
-    const { gl } = this.context;
+    const { device } = this.context;
     // This tells WebGL how to read row data from the texture.  For example, the default here is 4 (i.e for RGBA, one byte per channel) so
     // each row of data is expected to be a multiple of 4.  This setting (i.e 1) allows us to have non-multiple-of-4 row sizes.  For example, for 2 byte (16 bit data),
     // we could use 2 as the value and it would still work, but 1 also works fine (and is more flexible for 8 bit - 1 byte - textures as well).
     // https://stackoverflow.com/questions/42789896/webgl-error-arraybuffer-not-big-enough-for-request-in-case-of-gl-luminance
     // This needs to be called here and not in the BitmapLayerWrapper because the `image` prop is converted to a texture outside of the layer, as controlled by the `image` type.
     // See: https://github.com/visgl/deck.gl/pull/5197
-    gl.pixelStorei(GL.UNPACK_ALIGNMENT, 1);
-    gl.pixelStorei(GL.PACK_ALIGNMENT, 1);
+    device.setParametersWebGL(GL.UNPACK_ALIGNMENT, 1);
+    device.setParametersWebGL(GL.PACK_ALIGNMENT, 1);
     super.initializeState(args);
   }
 

packages/layers/src/image-layer.js

@@ -1,5 +1,5 @@
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
-import GL from '@luma.gl/constants';
+import { GL } from '@luma.gl/constants';
 
 import { ColorPaletteExtension } from '@vivjs/extensions';
 import { SIGNAL_ABORTED, isInterleaved } from '@vivjs/loaders';
@@ -27,7 +27,7 @@ const defaultProps = {
   onViewportLoad: { type: 'function', value: null, compare: true },
   interpolation: {
     type: 'number',
-    value: GL.NEAREST,
+    value: 'nearest',
     compare: true
   },
   extensions: {

packages/layers/src/multiscale-image-layer/multiscale-image-layer.js

@@ -1,5 +1,5 @@
 import { CompositeLayer } from '@deck.gl/core';
-import GL from '@luma.gl/constants';
+import { GL } from '@luma.gl/constants';
 import { Matrix4 } from '@math.gl/core';
 
 import { ColorPaletteExtension } from '@vivjs/extensions';
@@ -179,7 +179,7 @@ const MultiscaleImageLayer = class extends CompositeLayer {
         onHover,
         onClick,
         // Background image is nicest when LINEAR in my opinion.
-        interpolation: GL.LINEAR,
+        interpolation: 'linear',
         onViewportLoad: null
       });
     const layers = [baseLayer, tiledLayer];

packages/layers/src/multiscale-image-layer/utils.js

@@ -1,4 +1,3 @@
-import GL from '@luma.gl/constants';
 import { getImageSize, isInterleaved } from '@vivjs/loaders';
 
 import BitmapLayer from '../bitmap-layer';
@@ -50,6 +49,6 @@ export function renderSubLayers(props) {
     id: `tile-sub-layer-${bounds}-${id}`,
     tileId: { x, y, z },
     // The auto setting is NEAREST at the highest resolution but LINEAR otherwise.
-    interpolation: z === maxZoom ? GL.NEAREST : GL.LINEAR
+    interpolation: z === maxZoom ? 'nearest' : 'linear'
   });
 }

packages/layers/src/volume-layer/volume-layer.js

@@ -1,6 +1,6 @@
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import { isWebGL2 } from '@luma.gl/core';
+import { GL } from '@luma.gl/constants';
+// import { isWebGL2 } from '@luma.gl/core';
 import { Matrix4 } from '@math.gl/core';
 import { ColorPalette3DExtensions } from '@vivjs/extensions';
 
@@ -150,8 +150,7 @@ const VolumeLayer = class extends CompositeLayer {
   }
 
   renderLayers() {
-    const { loader, id, resolution, useProgressIndicator, useWebGL1Warning } =
-      this.props;
+    const { loader, id, resolution, useProgressIndicator } = this.props;
     const { dtype } = loader[resolution];
     const {
       data,
@@ -162,20 +161,6 @@ const VolumeLayer = class extends CompositeLayer {
       physicalSizeScalingMatrix,
       resolutionMatrix
     } = this.state;
-    const { gl } = this.context;
-    if (!isWebGL2(gl) && useWebGL1Warning) {
-      const { viewport } = this.context;
-      return getTextLayer(
-        [
-          'Volume rendering is only available on browsers that support WebGL2. If you',
-          'are using Safari, you can turn on WebGL2 by navigating in the top menubar',
-          'to check Develop > Experimental Features > WebGL 2.0 and then refreshing',
-          'the page.'
-        ].join('\n'),
-        viewport,
-        id
-      );
-    }
     if (!(width && height) && useProgressIndicator) {
       const { viewport } = this.context;
       return getTextLayer(