chore(luma): Upgrade to luma.gl v9 alpha-50 (#8379)

---------

Co-authored-by: Felix Palmer <felixpalmer@gmail.com>

Author: donmccurdy

modules/aggregation-layers/package.json

@@ -32,17 +32,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-alpha.42",
-    "@luma.gl/core": "9.0.0-alpha.42",
-    "@luma.gl/shadertools": "9.0.0-alpha.42",
+    "@luma.gl/constants": "9.0.0-alpha.50",
+    "@luma.gl/core": "9.0.0-alpha.50",
+    "@luma.gl/shadertools": "9.0.0-alpha.50",
     "@math.gl/web-mercator": "^4.0.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-alpha",
     "@deck.gl/layers": "^9.0.0-alpha",
-    "@luma.gl/core": "9.0.0-alpha.42",
-    "@luma.gl/engine": "9.0.0-alpha.42"
+    "@luma.gl/core": "9.0.0-alpha.50",
+    "@luma.gl/engine": "9.0.0-alpha.50"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/aggregation-layers/src/heatmap-layer/heatmap-layer.ts

@@ -29,7 +29,7 @@ import {
 } from './heatmap-layer-utils';
 import {Buffer, DeviceFeature, Texture, TextureProps, TextureFormat} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
-import {Transform} from '@luma.gl/engine';
+import {TextureTransform, TextureTransformProps} from '@luma.gl/engine';
 import {withGLParameters} from '@luma.gl/webgl';
 import {
   Accessor,
@@ -201,8 +201,8 @@ export default class HeatmapLayer<
     updateTimer?: any;
     triPositionBuffer?: Buffer;
     triTexCoordBuffer?: Buffer;
-    weightsTransform?: Transform;
-    maxWeightTransform?: Transform;
+    weightsTransform?: TextureTransform;
+    maxWeightTransform?: TextureTransform;
     textureSize: number;
     format: TextureFormat;
     type: GL;
@@ -424,16 +424,15 @@ export default class HeatmapLayer<
 
   _createWeightsTransform(shaders = {}) {
     let {weightsTransform} = this.state;
-    const {weightsTexture} = this.state;
     weightsTransform?.delete();
 
-    weightsTransform = new Transform(this.context.device, {
+    weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
-      elementCount: 1,
-      _targetTexture: weightsTexture,
-      _targetTextureVarying: 'weightsTexture',
+      vertexCount: 1,
+      targetTexture: this.state.weightsTexture!,
+      targetTextureVarying: 'weightsTexture',
       ...shaders
-    });
+    } as TextureTransformProps);
     this.setState({weightsTransform});
   }
 
@@ -445,7 +444,7 @@ export default class HeatmapLayer<
     this._createWeightsTransform(weightsTransformShaders);
 
     const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new Transform(this.context.device, {
+    const maxWeightTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-max-weights-transform`,
       _sourceTextures: {
         inTexture: weightsTexture
@@ -484,6 +483,7 @@ export default class HeatmapLayer<
     const {maxWeightTransform} = this.state;
     maxWeightTransform!.run({
       parameters: {
+        // @ts-expect-error TODO(v9): Resolve errors.
         blend: true,
         depthTest: false,
         blendFunc: [GL.ONE, GL.ONE],
@@ -618,13 +618,13 @@ export default class HeatmapLayer<
       weightsTransform.run({
         uniforms,
         parameters: {
+          // @ts-expect-error TODO(v9): Resolve errors.
           blend: true,
           depthTest: false,
           blendFunc: [GL.ONE, GL.ONE],
           blendEquation: GL.FUNC_ADD
         },
         clearRenderTarget: true,
-        // @ts-expect-error TODO - no longer supported in v9?
         attributes: this.getAttributes(),
         moduleSettings: this.getModuleSettings()
       });

modules/aggregation-layers/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.ts

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import type {Device, DeviceFeature} from '@luma.gl/core';
-import {Model, Transform} from '@luma.gl/engine';
+import {Model, TextureTransform} from '@luma.gl/engine';
 import {fp64arithmetic} from '@luma.gl/shadertools';
 import {readPixelsToBuffer, withGLParameters, clear} from '@luma.gl/webgl';
 import {GL} from '@luma.gl/constants';
@@ -696,7 +696,7 @@ function getAllAggregationModel(device: Device, instanceCount: number): Model {
 }
 
 function getMeanTransform(device: Device, opts) {
-  return new Transform(device, {
+  return new TextureTransform(device, {
     vs: TRANSFORM_MEAN_VS,
     _targetTextureVarying: 'meanValues',
     ...opts

modules/arcgis/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@arcgis/core": "^4.0.0",
     "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/core": "9.0.0-alpha.42",
-    "@luma.gl/engine": "9.0.0-alpha.42"
+    "@luma.gl/core": "9.0.0-alpha.50",
+    "@luma.gl/engine": "9.0.0-alpha.50"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",

modules/carto/package.json

@@ -40,8 +40,8 @@
     "@loaders.gl/loader-utils": "4.0.3",
     "@loaders.gl/mvt": "4.0.3",
     "@loaders.gl/tiles": "4.0.3",
-    "@luma.gl/constants": "9.0.0-alpha.42",
-    "@luma.gl/core": "9.0.0-alpha.42",
+    "@luma.gl/constants": "9.0.0-alpha.50",
+    "@luma.gl/core": "9.0.0-alpha.50",
     "@math.gl/web-mercator": "^4.0.0",
     "cartocolor": "^4.0.2",
     "d3-array": "^3.2.0",

modules/carto/src/layers/utils.ts

@@ -20,7 +20,7 @@ export function mergeBoundaryData(geometry: VectorTile, properties: PropertiesTi
   const mapping = {};
   for (const {geoid, ...rest} of properties.properties) {
     if (geoid in mapping) {
-      log.warn(`Duplicate geoid key in boundary mapping, using first occurance`)();
+      log.warn('Duplicate geoid key in boundary mapping, using first occurance')();
     } else {
       mapping[geoid] = rest;
     }

modules/core/package.json

@@ -36,11 +36,11 @@
     "@babel/runtime": "^7.0.0",
     "@loaders.gl/core": "4.0.3",
     "@loaders.gl/images": "4.0.3",
-    "@luma.gl/constants": "9.0.0-alpha.42",
-    "@luma.gl/core": "9.0.0-alpha.42",
-    "@luma.gl/engine": "9.0.0-alpha.42",
-    "@luma.gl/shadertools": "9.0.0-alpha.42",
-    "@luma.gl/webgl": "9.0.0-alpha.42",
+    "@luma.gl/constants": "9.0.0-alpha.50",
+    "@luma.gl/core": "9.0.0-alpha.50",
+    "@luma.gl/engine": "9.0.0-alpha.50",
+    "@luma.gl/shadertools": "9.0.0-alpha.50",
+    "@luma.gl/webgl": "9.0.0-alpha.50",
     "@math.gl/core": "^4.0.0",
     "@math.gl/sun": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0",

modules/core/src/lib/attribute/attribute-transition-manager.ts

@@ -1,7 +1,6 @@
 // deck.gl, MIT license
 
 import type {Device} from '@luma.gl/core';
-import {Transform} from '@luma.gl/engine';
 import GPUInterpolationTransition from '../../transitions/gpu-interpolation-transition';
 import GPUSpringTransition from '../../transitions/gpu-spring-transition';
 import log from '../../utils/log';
@@ -38,14 +37,15 @@ export default class AttributeTransitionManager {
       timeline?: Timeline;
     }
   ) {
+    if (!device) throw new Error('AttributeTransitionManager is constructed without device');
     this.id = id;
     this.device = device;
     this.timeline = timeline;
 
     this.transitions = {};
     this.needsRedraw = false;
     this.numInstances = 1;
-    this.isSupported = Transform.isSupported(device);
+    this.isSupported = device.features.has('transform-feedback-webgl2');
   }
 
   finalize(): void {
@@ -148,8 +148,11 @@ export default class AttributeTransitionManager {
     // TODO: when switching transition types, make sure to carry over the attribute's
     // previous buffers, currentLength, startIndices, etc, to be used as the starting point
     // for the next transition
-    let isNew = !transition || transition.type !== settings.type;
-    if (isNew) {
+    let needsUpdate = !transition || transition.type !== settings.type;
+    needsUpdate ||=
+      attribute.buffer.byteLength > transition?.attributeInTransition.buffer.byteLength;
+
+    if (needsUpdate) {
       if (!this.isSupported) {
         log.warn(
           `WebGL2 not supported by this browser. Transition for ${attributeName} is disabled.`
@@ -170,11 +173,11 @@ export default class AttributeTransitionManager {
         });
       } else {
         log.error(`unsupported transition type '${settings.type}'`)();
-        isNew = false;
+        needsUpdate = false;
       }
     }
 
-    if (isNew || attribute.needsRedraw()) {
+    if (needsUpdate || attribute.needsRedraw()) {
       this.needsRedraw = true;
       this.transitions[attributeName].start(settings, this.numInstances);
     }

modules/core/src/lib/attribute/data-column.ts

@@ -184,7 +184,9 @@ export default class DataColumn<Options, State> {
       bounds: null,
       constant: false
     };
-    this._buffer = null;
+
+    // TODO(v9): Can we pre-allocate the correct size, instead?
+    this._buffer = this._createBuffer(0);
   }
   /* eslint-enable max-statements */
 
@@ -193,10 +195,6 @@ export default class DataColumn<Options, State> {
   }
 
   get buffer(): Buffer {
-    if (!this._buffer) {
-      // TODO(v9): No point in allocating an empty buffer, try to avoid this.
-      this._createBuffer(4);
-    }
     return this._buffer!;
   }
 
@@ -418,8 +416,7 @@ export default class DataColumn<Options, State> {
       // Shader attributes may try to access this buffer with bigger offsets
       const requiredBufferSize = value.byteLength + byteOffset + stride * 2;
       if (buffer.byteLength < requiredBufferSize) {
-        this._createBuffer(requiredBufferSize);
-        buffer = this.buffer;
+        buffer = this._createBuffer(requiredBufferSize);
       }
 
       buffer.write(value, byteOffset);
@@ -469,8 +466,7 @@ export default class DataColumn<Options, State> {
     let {buffer} = this;
 
     if (buffer.byteLength < value.byteLength + byteOffset) {
-      this._createBuffer(value.byteLength + byteOffset);
-      buffer = this.buffer;
+      buffer = this._createBuffer(value.byteLength + byteOffset);
       if (copy && oldValue) {
         // Upload the full existing attribute value to the GPU, so that updateBuffer
         // can choose to only update a partial range.
@@ -590,11 +586,12 @@ export default class DataColumn<Options, State> {
     return true;
   }
 
-  protected _createBuffer(byteLength: number) {
+  protected _createBuffer(byteLength: number): Buffer {
     if (this._buffer) {
+      // console.log(`DataColumn#destroyBuffer: id = ${this.id}, byteLength = ${this._buffer.byteLength}`);
       this._buffer.destroy();
     }
-
+    // console.log(`DataColumn#createBuffer: id = ${this.id}, byteLength = ${byteLength}`);
     const {isIndexed, type} = this.settings;
     this._buffer = this.device.createBuffer({
       ...this._buffer?.props,
@@ -603,5 +600,7 @@ export default class DataColumn<Options, State> {
       indexType: isIndexed ? (type === GL.UNSIGNED_SHORT ? 'uint16' : 'uint32') : undefined,
       byteLength
     });
+
+    return this._buffer;
   }
 }

modules/core/src/passes/screen-pass.ts

@@ -62,6 +62,7 @@ export default class ScreenPass extends Pass {
   protected _renderPass(device: Device, options: ScreenPassRenderOptions) {
     const {inputBuffer} = options;
     clear(this.device, {color: true});
+    // @ts-expect-error TODO(v9): Resolve errors.
     this.model.setShaderModuleProps(options.moduleSettings);
     this.model.setBindings({
       texture: inputBuffer.colorAttachments[0]