@deck.gl/aggregation-layers 9.0.0-beta.1 → 9.0.0-beta.3

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/aggregation-layers",
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -16,13 +17,19 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -32,17 +39,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-alpha.54",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/shadertools": "9.0.0-alpha.54",
+    "@luma.gl/constants": "9.0.0-beta.4",
+    "@luma.gl/core": "9.0.0-beta.4",
+    "@luma.gl/shadertools": "9.0.0-beta.4",
     "@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.54",
-    "@luma.gl/engine": "9.0.0-alpha.54"
+    "@luma.gl/core": "9.0.0-beta.4",
+    "@luma.gl/engine": "9.0.0-beta.4"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "643d1009268bbf92b5bc0941d00aa59d5e3a582b"
 }

package/src/heatmap-layer/heatmap-layer-utils.ts

@@ -1,6 +1,3 @@
-import {Device} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
-
 export function getBounds(points: number[][]): number[] {
   // Now build bounding box in world space (aligned to world coordiante system)
   const x = points.map(p => p[0]);
@@ -77,23 +74,3 @@ export function getTextureCoordinates(point: number[], bounds: number[]) {
   const [xMin, yMin, xMax, yMax] = bounds;
   return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
 }
-
-// Returns format and type for creating texture objects
-export function getTextureParams({
-  device,
-  floatTargetSupport
-}: {
-  device: Device;
-  floatTargetSupport?: boolean;
-}) {
-  return floatTargetSupport
-    ? {
-        // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
-        format: device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,
-        type: GL.FLOAT
-      }
-    : {
-        format: GL.RGBA,
-        type: GL.UNSIGNED_BYTE
-      };
-}

package/src/heatmap-layer/heatmap-layer.ts

@@ -24,13 +24,11 @@ import {
   boundsContain,
   packVertices,
   scaleToAspectRatio,
-  getTextureCoordinates,
-  getTextureParams
+  getTextureCoordinates
 } from './heatmap-layer-utils';
 import {Buffer, DeviceFeature, Texture, TextureProps, TextureFormat} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {TextureTransform, TextureTransformProps} from '@luma.gl/engine';
-import {withGLParameters} from '@luma.gl/webgl';
 import {
   Accessor,
   AccessorFunction,
@@ -51,16 +49,16 @@ import AggregationLayer, {AggregationLayerProps} from '../aggregation-layer';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
 import weightsVs from './weights-vs.glsl';
 import weightsFs from './weights-fs.glsl';
-import vsMax from './max-vs.glsl';
-import fsMax from './max-fs.glsl';
+import maxVs from './max-vs.glsl';
+import maxFs from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
 const TEXTURE_PROPS: TextureProps = {
   format: 'rgba8unorm',
   mipmaps: false,
   sampler: {
-    minFilter: 'nearest',
-    magFilter: 'nearest',
+    minFilter: 'linear',
+    magFilter: 'linear',
     addressModeU: 'clamp-to-edge',
     addressModeV: 'clamp-to-edge'
   }
@@ -205,7 +203,6 @@ export default class HeatmapLayer<
     maxWeightTransform?: TextureTransform;
     textureSize: number;
     format: TextureFormat;
-    type: GL;
     weightsScale: number;
     visibleWorldBounds: number[];
     viewportCorners: number[][];
@@ -303,7 +300,7 @@ export default class HeatmapLayer<
         maxTexture: maxWeightsTexture,
         colorTexture,
         aggregationMode: AGGREGATION_MODE[aggregation] || 0,
-        texture: weightsTexture,
+        weightsTexture,
         intensity,
         threshold,
         colorDomain
@@ -369,17 +366,21 @@ export default class HeatmapLayer<
   }
 
   _createTextures() {
-    const {textureSize, format, type} = this.state;
+    const {textureSize, format} = this.state;
 
     this.setState({
       weightsTexture: this.context.device.createTexture({
+        ...TEXTURE_PROPS,
         width: textureSize,
         height: textureSize,
-        format,
-        type,
-        ...TEXTURE_PROPS
+        format
       }),
-      maxWeightsTexture: this.context.device.createTexture({format, type, ...TEXTURE_PROPS}) // 1 X 1 texture,
+      maxWeightsTexture: this.context.device.createTexture({
+        ...TEXTURE_PROPS,
+        width: 1,
+        height: 1,
+        format
+      })
     });
   }
 
@@ -398,61 +399,71 @@ export default class HeatmapLayer<
 
     const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D as number);
     const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
-    const {format, type} = getTextureParams({device, floatTargetSupport});
+    const format: TextureFormat = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
-    this.setState({textureSize, format, type, weightsScale});
+    this.setState({textureSize, format, weightsScale});
     if (!floatTargetSupport) {
       log.warn(
-        `HeatmapLayer: ${this.id} rendering to float texture not supported, fallingback to low precession format`
+        `HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`
       )();
     }
   }
 
-  getShaders(type) {
-    return super.getShaders(
-      type === 'max-weights-transform'
-        ? {
-            vs: vsMax,
-            _fs: fsMax
-          }
-        : {
-            vs: weightsVs,
-            _fs: weightsFs
-          }
-    );
-  }
-
-  _createWeightsTransform(shaders = {}) {
+  _createWeightsTransform(shaders: {vs: string; fs?: string}) {
     let {weightsTransform} = this.state;
-    weightsTransform?.delete();
+    const {weightsTexture} = this.state;
+    const attributeManager = this.getAttributeManager()!;
 
+    weightsTransform?.destroy();
     weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
+      bufferLayout: attributeManager.getBufferLayouts(),
       vertexCount: 1,
-      targetTexture: this.state.weightsTexture!,
-      targetTextureVarying: 'weightsTexture',
+      targetTexture: weightsTexture!,
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'add',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      },
+      topology: 'point-list',
       ...shaders
     } as TextureTransformProps);
+
     this.setState({weightsTransform});
   }
 
   _setupResources() {
     this._createTextures();
+    const {device} = this.context;
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
 
-    const weightsTransformShaders = this.getShaders('weights-transform');
+    const weightsTransformShaders = this.getShaders({
+      vs: weightsVs,
+      fs: weightsFs
+    });
     this._createWeightsTransform(weightsTransformShaders);
 
-    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new TextureTransform(this.context.device, {
+    const maxWeightsTransformShaders = this.getShaders({vs: maxVs, fs: maxFs});
+    const maxWeightTransform = new TextureTransform(device, {
       id: `${this.id}-max-weights-transform`,
-      _sourceTextures: {
-        inTexture: weightsTexture
-      },
-      _targetTexture: maxWeightsTexture,
-      _targetTextureVarying: 'outTexture',
+      bindings: {inTexture: weightsTexture},
+      uniforms: {textureSize},
+      targetTexture: maxWeightsTexture,
       ...maxWeightsTransformShaders,
-      elementCount: textureSize * textureSize
+      vertexCount: textureSize * textureSize,
+      topology: 'point-list',
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'max',
+        blendAlphaOperation: 'max',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      }
     });
 
     this.setState({
@@ -460,35 +471,27 @@ export default class HeatmapLayer<
       maxWeightsTexture,
       maxWeightTransform,
       zoom: null,
-      triPositionBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        // @ts-expect-error
-        accessor: {size: 3}
-      }),
-      triTexCoordBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        // @ts-expect-error
-        accessor: {size: 2}
-      })
+      triPositionBuffer: device.createBuffer({byteLength: 48}),
+      triTexCoordBuffer: device.createBuffer({byteLength: 48})
     });
   }
 
   // overwrite super class method to update transform model
   updateShaders(shaderOptions) {
-    // sahder params (modules, injects) changed, update model object
-    this._createWeightsTransform(shaderOptions);
+    // shader params (modules, injects) changed, update model object
+    this._createWeightsTransform({
+      vs: weightsVs,
+      fs: weightsFs,
+      ...shaderOptions
+    });
   }
 
   _updateMaxWeightValue() {
-    const {maxWeightTransform} = this.state;
+    const {maxWeightTransform, textureSize} = this.state;
+
     maxWeightTransform!.run({
-      parameters: {
-        // @ts-expect-error TODO(v9): Resolve errors.
-        blend: true,
-        depthTest: false,
-        blendFunc: [GL.ONE, GL.ONE],
-        blendEquation: GL.MAX
-      }
+      parameters: {viewport: [0, 0, 1, 1]},
+      clearColor: [0, 0, 0, 0]
     });
   }
 
@@ -563,18 +566,16 @@ export default class HeatmapLayer<
     let {colorTexture} = this.state;
     const colors = colorRangeToFlatArray(colorRange, false, Uint8Array as any);
 
-    if (colorTexture) {
-      // @ts-expect-error TODO - no longer supported in v9?
-      colorTexture.setImageData({
-        data: colors,
-        width: colorRange.length
-      });
+    if (colorTexture && colorTexture?.width === colorRange.length) {
+      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+      (colorTexture as any).setSubImageData({data: colors});
     } else {
+      colorTexture?.destroy();
       colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS,
         data: colors,
         width: colorRange.length,
-        height: 1,
-        ...TEXTURE_PROPS
+        height: 1
       });
     }
     this.setState({colorTexture});
@@ -602,41 +603,22 @@ export default class HeatmapLayer<
       this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
     }
 
-    const uniforms = {
-      radiusPixels,
-      commonBounds,
-      textureWidth: textureSize,
-      weightsScale
-    };
-    // Attribute manager sets data array count as instaceCount on model
-    // we need to set that as elementCount on 'weightsTransform'
-    weightsTransform.update({
-      elementCount: this.getNumInstances()
-    });
-    // Need to explictly specify clearColor as external context may have modified it
-    withGLParameters(this.context.gl, {clearColor: [0, 0, 0, 0]}, () => {
-      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,
-        attributes: this.getAttributes(),
-        moduleSettings: this.getModuleSettings()
-      });
+    const attributeManager = this.getAttributeManager()!;
+    const attributes = attributeManager.getAttributes();
+    const moduleSettings = this.getModuleSettings();
+    const positions = attributes.positions.buffer;
+    const uniforms = {radiusPixels, commonBounds, textureWidth: textureSize, weightsScale};
+    const weights = attributes.weights.buffer;
+    weightsTransform.model.setAttributes({positions, weights});
+    weightsTransform.model.setVertexCount(this.getNumInstances());
+    weightsTransform.model.setUniforms(uniforms);
+    weightsTransform.model.updateModuleSettings(moduleSettings);
+    weightsTransform.run({
+      parameters: {viewport: [0, 0, textureSize, textureSize]},
+      clearColor: [0, 0, 0, 0]
     });
-    this._updateMaxWeightValue();
 
-    // reset filtering parameters (TODO: remove once luma issue#1193 is fixed)
-    // TODO v9 sampler support in luma.gl needs to improve
-    // weightsTexture.setSampler({
-    //   magFilter: 'linear',
-    //   minFilter: 'linear'
-    // });
+    this._updateMaxWeightValue();
   }
 
   _debouncedUpdateWeightmap(fromTimer = false) {

package/src/heatmap-layer/max-vs.glsl.ts

@@ -1,13 +1,19 @@
 export default `\
 #version 300 es
-in vec4 inTexture;
+uniform sampler2D inTexture;
+uniform float textureSize;
 out vec4 outTexture;
 
 void main()
 {
-outTexture = inTexture;
-gl_Position = vec4(0, 0, 0, 1.);
-// Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)
-gl_PointSize = 1.0;
+  // Sample every pixel in texture
+  int yIndex = gl_VertexID / int(textureSize);
+  int xIndex = gl_VertexID - (yIndex * int(textureSize));
+  vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / textureSize;
+  outTexture = texture(inTexture, uv);
+
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  // Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)
+  gl_PointSize = 1.0;
 }
 `;

package/src/heatmap-layer/triangle-layer-fragment.glsl.ts

@@ -25,7 +25,7 @@ export default `\
 precision highp float;
 
 uniform float opacity;
-uniform sampler2D texture;
+uniform sampler2D weightsTexture;
 uniform sampler2D colorTexture;
 uniform float aggregationMode;
 
@@ -43,7 +43,7 @@ vec4 getLinearColor(float value) {
 }
 
 void main(void) {
-  vec4 weights = texture(texture, vTexCoords);
+  vec4 weights = texture(weightsTexture, vTexCoords);
   float weight = weights.r;
 
   if (aggregationMode > 0.5) {

package/src/heatmap-layer/triangle-layer.ts

@@ -18,13 +18,14 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import type {Device, Texture} from '@luma.gl/core';
-import {Model, Geometry} from '@luma.gl/engine';
+import type {Buffer, Device, Texture} from '@luma.gl/core';
+import {Model} from '@luma.gl/engine';
 import {Layer, LayerContext, project32} from '@deck.gl/core';
 import vs from './triangle-layer-vertex.glsl';
 import fs from './triangle-layer-fragment.glsl';
 
 type _TriangleLayerProps = {
+  data: {attributes: {positions: Buffer; texCoords: Buffer}};
   colorDomain: number[];
   aggregationMode: string;
   threshold: number;
@@ -32,7 +33,7 @@ type _TriangleLayerProps = {
   vertexCount: number;
   colorTexture: Texture;
   maxTexture: Texture;
-  texture: Texture;
+  weightsTexture: Texture;
 };
 
 export default class TriangleLayer extends Layer<_TriangleLayerProps> {
@@ -40,6 +41,8 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
 
   state!: {
     model: Model;
+    positions: Buffer;
+    texCoords: Buffer;
   };
 
   getShaders() {
@@ -47,40 +50,31 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   }
 
   initializeState({device}: LayerContext): void {
-    const attributeManager = this.getAttributeManager()!;
-    attributeManager.add({
-      positions: {size: 3, noAlloc: true},
-      texCoords: {size: 2, noAlloc: true}
-    });
-    this.setState({
-      model: this._getModel(device)
-    });
+    this.setState({model: this._getModel(device)});
   }
 
   _getModel(device: Device): Model {
-    const {vertexCount} = this.props;
+    const {vertexCount, data, weightsTexture, maxTexture, colorTexture} = this.props;
 
     return new Model(device, {
       ...this.getShaders(),
       id: this.props.id,
-      geometry: new Geometry({
-        topology: 'triangle-fan-webgl',
-        vertexCount
-      })
+      bindings: {weightsTexture, maxTexture, colorTexture},
+      attributes: data.attributes,
+      bufferLayout: [
+        {name: 'positions', format: 'float32x3'},
+        {name: 'texCoords', format: 'float32x2'}
+      ],
+      topology: 'triangle-fan-webgl',
+      vertexCount
     });
   }
 
   draw({uniforms}): void {
     const {model} = this.state;
-
-    const {texture, maxTexture, colorTexture, intensity, threshold, aggregationMode, colorDomain} =
-      this.props;
-
+    const {intensity, threshold, aggregationMode, colorDomain} = this.props;
     model.setUniforms({
       ...uniforms,
-      texture,
-      maxTexture,
-      colorTexture,
       intensity,
       threshold,
       aggregationMode,

package/src/heatmap-layer/weights-vs.glsl.ts

@@ -8,17 +8,19 @@ uniform float radiusPixels;
 uniform float textureWidth;
 uniform vec4 commonBounds;
 uniform float weightsScale;
+
 void main()
 {
   weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);
 
-  float radiusTexels  = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);
+  float radiusTexels = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);
   gl_PointSize = radiusTexels * 2.;
 
   vec3 commonPosition = project_position(positions, positions64Low);
 
-  // map xy from commonBounds to [-1, 1]
+  // // map xy from commonBounds to [-1, 1]
   gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;
   gl_Position.xy = (gl_Position.xy * 2.) - (1.);
+  gl_Position.w = 1.0;
 }
 `;

package/src/utils/gpu-grid-aggregation/gpu-grid-aggregator.ts

@@ -21,7 +21,6 @@
 import type {Device, DeviceFeature} from '@luma.gl/core';
 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';
 import {log, project32, _mergeShaders as mergeShaders, getShaderAssembler} from '@deck.gl/core';
 
@@ -302,26 +301,26 @@ export default class GPUGridAggregator {
       results[id] = {};
       const {needMin, needMax, combineMaxMin} = weights[id];
       results[id].aggregationTexture = textures[id];
-      results[id].aggregationBuffer = readPixelsToBuffer(framebuffers[id], {
+      results[id].aggregationBuffer = this.device.readPixelsToBufferWebGL(framebuffers[id], {
         target: weights[id].aggregationBuffer, // update if a buffer is provided
         sourceType: GL.FLOAT
       });
       if (needMin && needMax && combineMaxMin) {
-        results[id].maxMinBuffer = readPixelsToBuffer(maxMinFramebuffers[id], {
+        results[id].maxMinBuffer = this.device.readPixelsToBufferWebGL(maxMinFramebuffers[id], {
           target: weights[id].maxMinBuffer, // update if a buffer is provided
           sourceType: GL.FLOAT
         });
         results[id].maxMinTexture = resources[`${id}-maxMinTexture`];
       } else {
         if (needMin) {
-          results[id].minBuffer = readPixelsToBuffer(minFramebuffers[id], {
+          results[id].minBuffer = this.device.readPixelsToBufferWebGL(minFramebuffers[id], {
             target: weights[id].minBuffer, // update if a buffer is provided
             sourceType: GL.FLOAT
           });
           results[id].minTexture = resources[`${id}-minTexture`];
         }
         if (needMax) {
-          results[id].maxBuffer = readPixelsToBuffer(maxFramebuffers[id], {
+          results[id].maxBuffer = this.device.readPixelsToBufferWebGL(maxFramebuffers[id], {
             target: weights[id].maxBuffer, // update if a buffer is provided
             sourceType: GL.FLOAT
           });
@@ -413,15 +412,14 @@ export default class GPUGridAggregator {
     const {framebuffers} = this.state;
     const {allAggregationModel} = this;
 
-    withGLParameters(
-      this.device,
+    this.device.withParametersWebGL(
       {
         ...clearParams,
         framebuffer: minOrMaxFb,
         viewport: [0, 0, gridSize[0], gridSize[1]]
       },
       () => {
-        clear(this.device, {color: true});
+        this.device.clearWebGL({color: true});
 
         // allAggregationModel.setParameters(parameters);
         allAggregationModel.setUniforms({gridSize, combineMaxMin});
@@ -444,15 +442,14 @@ export default class GPUGridAggregator {
       operation === AGGREGATION_OPERATION.MIN
         ? [MAX_32_BIT_FLOAT, MAX_32_BIT_FLOAT, MAX_32_BIT_FLOAT, 0]
         : [0, 0, 0, 0];
-    withGLParameters(
-      this.device,
+    this.device.withParametersWebGL(
       {
         framebuffer: framebuffers[id],
         viewport: [0, 0, gridSize[0], gridSize[1]],
         clearColor
       },
       () => {
-        clear(this.device, {color: true});
+        this.device.clearWebGL({color: true});
 
         const attributes = {weights: weightAttributes[id]};
         gridAggregationModel.draw({
@@ -483,7 +480,7 @@ export default class GPUGridAggregator {
         }
       });
 
-      // update framebuffer with mean results so readPixelsToBuffer returns mean values
+      // update framebuffer with mean results so device.readPixelsToBufferWebGL returns mean values
       framebuffers[id].attach({[GL.COLOR_ATTACHMENT0]: textures[id]});
     }
   }
@@ -607,7 +604,7 @@ export default class GPUGridAggregator {
       if (results[id]) {
         for (const bufferName of BUFFER_NAMES) {
           if (results[id][bufferName] && weights[id][bufferName] !== results[id][bufferName]) {
-            // No result buffer is provided in weights object, `readPixelsToBuffer` has created a new Buffer object
+            // No result buffer is provided in weights object, `device.readPixelsToBufferWebGL` has created a new Buffer object
             // collect the new buffer for garabge collection
             const name = `gpu-result-${id}-${bufferName}`;
             if (resources[name]) {