@luma.gl/webgl 9.0.0-alpha.44 → 9.0.0-alpha.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.44",
+  "version": "9.0.0-alpha.46",
   "description": "WebGL2 adapter for the luma.gl API",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-alpha.44",
-    "@luma.gl/core": "9.0.0-alpha.44",
+    "@luma.gl/constants": "9.0.0-alpha.46",
+    "@luma.gl/core": "9.0.0-alpha.46",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.44"
+    "@luma.gl/test-utils": "9.0.0-alpha.46"
   },
-  "gitHead": "195bed39c8587a68686cf28c0ae0e8dbd9c963f5"
+  "gitHead": "c1e0602fd739f8d08e6532034a02e8cf658e188a"
 }

package/src/adapter/device-helpers/device-features.ts

@@ -126,6 +126,7 @@ const WEBGL_FEATURES: Partial<Record<DeviceFeature, [boolean | string, boolean |
   'webgl2': [false, true],
 
   'timer-query-webgl': ['EXT_disjoint_timer_query', 'EXT_disjoint_timer_query_webgl2'],
+  'transform-feedback-webgl2': [false, true],
 
   // WEBGL1 SUPPORT
   'vertex-array-object-webgl1': ['OES_vertex_array_object', true],

package/src/adapter/helpers/webgl-topology-utils.ts

@@ -2,6 +2,7 @@
 // Copyright (c) vis.gl contributors
 
 import {GL, GLPrimitiveTopology, GLPrimitive} from '@luma.gl/constants';
+import {PrimitiveTopology} from '@luma.gl/core';
 
 // Counts the number of complete primitives given a number of vertices and a drawMode
 export function getPrimitiveDrawMode(drawMode: GLPrimitiveTopology): GLPrimitive {
@@ -61,3 +62,42 @@ export function getVertexCount(options: {drawMode: GLPrimitiveTopology, vertexCo
       throw new Error('drawMode');
   }
 }
+
+/** Get the primitive type for draw */
+export function getGLDrawMode(
+  topology: PrimitiveTopology
+):
+  | GL.POINTS
+  | GL.LINES
+  | GL.LINE_STRIP
+  | GL.LINE_LOOP
+  | GL.TRIANGLES
+  | GL.TRIANGLE_STRIP
+  | GL.TRIANGLE_FAN {
+  // prettier-ignore
+  switch (topology) {
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINE_STRIP;
+    case 'line-loop-webgl': return GL.LINE_LOOP;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLE_STRIP;
+    case 'triangle-fan-webgl': return GL.TRIANGLE_FAN;
+    default: throw new Error(topology);
+  }
+}
+
+/** Get the primitive type for transform feedback */
+export function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
+  // prettier-ignore
+  switch (topology) {
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINES;
+    case 'line-loop-webgl': return GL.LINES;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLES;
+    case 'triangle-fan-webgl': return GL.TRIANGLES;
+    default: throw new Error(topology);
+  }
+}

package/src/adapter/resources/webgl-buffer.ts

@@ -36,7 +36,7 @@ export class WEBGLBuffer extends Buffer {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
 
-    const handle = typeof props === 'object' ? (props ).handle : undefined;
+    const handle = typeof props === 'object' ? props.handle : undefined;
     this.handle = handle || this.gl.createBuffer();
     device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
 
@@ -45,7 +45,7 @@ export class WEBGLBuffer extends Buffer {
     // - In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
     this.glTarget = getWebGLTarget(this.props.usage);
     this.glUsage = getWebGLUsage(this.props.usage);
-    this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT :  GL.UNSIGNED_SHORT;
+    this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
 
     this.debugData = null;
 
@@ -60,7 +60,11 @@ export class WEBGLBuffer extends Buffer {
   // PRIVATE METHODS
 
   /** Allocate a new buffer and initialize to contents of typed array */
-  _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
+  _initWithData(
+    data,
+    byteOffset: number = 0,
+    byteLength: number = data.byteLength + byteOffset
+  ): this {
     assert(ArrayBuffer.isView(data));
 
     const glTarget = this._getWriteTarget();
@@ -135,12 +139,10 @@ export class WEBGLBuffer extends Buffer {
   }
 
   /** Read data from the buffer */
-  override async readAsync(
-    byteOffset: number = 0,
-    byteLength?: number
-  ): Promise<ArrayBuffer> {
+  override async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array> {
     this.device.assertWebGL2();
 
+    byteLength = byteLength ?? this.byteLength;
     const data = new Uint8Array(byteLength);
     const dstOffset = 0;
 
@@ -183,7 +185,9 @@ export class WEBGLBuffer extends Buffer {
 // static INDIRECT = 0x0100;
 // static QUERY_RESOLVE = 0x0200;
 
-function getWebGLTarget(usage: number): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
+function getWebGLTarget(
+  usage: number
+): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
   if (usage & Buffer.INDEX) {
     return GL.ELEMENT_ARRAY_BUFFER;
   }

package/src/adapter/resources/webgl-command-buffer.ts

@@ -7,19 +7,14 @@ import type {
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
 } from '@luma.gl/core';
-import {
-  CommandBuffer,
-  Texture,
-  // Buffer,
-  Framebuffer
-} from '@luma.gl/core';
+import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 
-// import {getTypedArrayFromGLType, getGLTypeFromTypedArray} from '../../classic/typed-array-utils';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLFramebuffer} from './webgl-framebuffer';
+import {getWebGLTextureParameters} from '../converters/texture-formats';
 
 function cast<T>(value: unknown): T {
   return value as T;
@@ -56,7 +51,7 @@ export class WEBGLCommandBuffer extends CommandBuffer {
   commands: Command[] = [];
 
   constructor(device: WebGLDevice) {
-    super({});
+    super(device, {});
     this.device = device;
   }
 
@@ -158,7 +153,7 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
   }
 
   // TODO - mipLevels are set when attaching texture to framebuffer
-  if (mipLevel !== 0 || depthOrArrayLayers !== undefined || bytesPerRow || rowsPerImage) {
+  if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
     throw new Error('not implemented');
   }
 
@@ -170,10 +165,9 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
     const webglBuffer = destination as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-
-    // TODO - hack - should be deduced
-    const sourceFormat = GL.RGBA;
-    const sourceType = GL.UNSIGNED_BYTE;
+    const sourceParams = getWebGLTextureParameters(framebuffer.texture.format, true);
+    const sourceFormat = sourceParams.dataFormat;
+    const sourceType = sourceParams.type;
 
     // if (!target) {
     //   // Create new buffer with enough size

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -2,7 +2,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {UniformValue, RenderPipelineProps, Binding} from '@luma.gl/core';
-import type {ShaderLayout, PrimitiveTopology} from '@luma.gl/core';
+import type {ShaderLayout} from '@luma.gl/core';
 import type {RenderPass, VertexArray} from '@luma.gl/core';
 import {RenderPipeline, cast, splitUniformsAndBindings, log} from '@luma.gl/core';
 import {mergeShaderLayout} from '@luma.gl/core';
@@ -21,6 +21,8 @@ import {WEBGLFramebuffer} from './webgl-framebuffer';
 import {WEBGLTexture} from './webgl-texture';
 // import {WEBGLVertexArray} from './webgl-vertex-array';
 import {WEBGLRenderPass} from './webgl-render-pass';
+import {WEBGLTransformFeedback} from './webgl-transform-feedback';
+import {getGLDrawMode} from '../helpers/webgl-topology-utils';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
@@ -133,7 +135,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       // This convention allows shaders to name uniform blocks as `uniform appUniforms {} app;`
       // and reference them as `app` from both GLSL and JS.
       // TODO - this is rather hacky - we could also remap the name directly in the shader layout.
-      const binding = 
+      const binding =
         this.shaderLayout.bindings.find(binding => binding.name === name) ||
         this.shaderLayout.bindings.find(binding => binding.name === `${name}Uniforms`);
 
@@ -198,6 +200,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     firstIndex?: number;
     firstInstance?: number;
     baseVertex?: number;
+    transformFeedback?: WEBGLTransformFeedback;
   }): boolean {
     const {
       renderPass,
@@ -205,10 +208,11 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       vertexCount,
       // indexCount,
       instanceCount,
-      firstVertex = 0
+      firstVertex = 0,
       // firstIndex,
       // firstInstance,
-      // baseVertex
+      // baseVertex,
+      transformFeedback
     } = options;
 
     const glDrawMode = getGLDrawMode(this.props.topology);
@@ -230,10 +234,8 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     // Note: Rebinds constant attributes before each draw call
     vertexArray.bindBeforeRender(renderPass);
 
-    const primitiveMode = getGLPrimitive(this.props.topology);
-    const transformFeedback: any = null;
     if (transformFeedback) {
-      transformFeedback.begin(primitiveMode);
+      transformFeedback.begin(this.props.topology);
     }
 
     // We have to apply bindings before every draw call since other draw calls will overwrite
@@ -391,7 +393,8 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     let uniformBufferIndex = 0;
     for (const binding of this.shaderLayout.bindings) {
       // Accept both `xyz` and `xyzUniforms` as valid names for `xyzUniforms` uniform block
-      const value = this.bindings[binding.name] || this.bindings[binding.name.replace(/Uniforms$/, '')];
+      const value =
+        this.bindings[binding.name] || this.bindings[binding.name.replace(/Uniforms$/, '')];
       if (!value) {
         throw new Error(`No value for binding ${binding.name} in ${this.id}`);
       }
@@ -472,42 +475,3 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 }
-
-/** Get the primitive type for draw */
-function getGLDrawMode(
-  topology: PrimitiveTopology
-):
-  | GL.POINTS
-  | GL.LINES
-  | GL.LINE_STRIP
-  | GL.LINE_LOOP
-  | GL.TRIANGLES
-  | GL.TRIANGLE_STRIP
-  | GL.TRIANGLE_FAN {
-  // prettier-ignore
-  switch (topology) {
-    case 'point-list': return GL.POINTS;
-    case 'line-list': return GL.LINES;
-    case 'line-strip': return GL.LINE_STRIP;
-    case 'line-loop-webgl': return GL.LINE_LOOP;
-    case 'triangle-list': return GL.TRIANGLES;
-    case 'triangle-strip': return GL.TRIANGLE_STRIP;
-    case 'triangle-fan-webgl': return GL.TRIANGLE_FAN;
-    default: throw new Error(topology);
-  }
-}
-
-/** Get the primitive type for transform feedback */
-function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
-  // prettier-ignore
-  switch (topology) {
-    case 'point-list': return GL.POINTS;
-    case 'line-list': return GL.LINES;
-    case 'line-strip': return GL.LINES;
-    case 'line-loop-webgl': return GL.LINES;
-    case 'triangle-list': return GL.TRIANGLES;
-    case 'triangle-strip': return GL.TRIANGLES;
-    case 'triangle-fan-webgl': return GL.TRIANGLES;
-    default: throw new Error(topology);
-  }
-}

package/src/adapter/resources/webgl-transform-feedback.ts

@@ -0,0 +1,205 @@
+import type {PrimitiveTopology, ShaderLayout, TransformFeedbackProps} from '@luma.gl/core';
+import {log, TransformFeedback, Buffer} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from '../..';
+import {getGLPrimitive} from '../helpers/webgl-topology-utils';
+
+/** For bindRange */
+type BufferRange = {
+  buffer: Buffer;
+  byteOffset?: number;
+  byteLength?: number;
+};
+
+export class WEBGLTransformFeedback extends TransformFeedback {
+  readonly device: WebGLDevice;
+  readonly gl2: WebGL2RenderingContext;
+  readonly handle: WebGLTransformFeedback;
+
+  /**
+   * NOTE: The Model already has this information while drawing, but
+   * TransformFeedback currently needs it internally, to look up
+   * varying information outside of a draw() call.
+   */
+  readonly layout: ShaderLayout;
+  buffers: Record<string, BufferRange> = {};
+  unusedBuffers: Record<string, Buffer> = {};
+  /**
+   * Allows us to avoid a Chrome bug where a buffer that is already bound to a
+   * different target cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+   * This a major workaround, see: https://github.com/KhronosGroup/WebGL/issues/2346
+   */
+  bindOnUse = true;
+  private _bound: boolean = false;
+
+  constructor(device: WebGLDevice, props: TransformFeedbackProps) {
+    super(device, props);
+
+    device.assertWebGL2();
+    this.device = device;
+    this.gl2 = device.gl2;
+    this.handle = this.props.handle || this.gl2.createTransformFeedback();
+    this.layout = this.props.layout;
+
+    if (props.buffers) {
+      this.setBuffers(props.buffers);
+    }
+
+    Object.seal(this);
+  }
+
+  override destroy(): void {
+    this.gl2.deleteTransformFeedback(this.handle);
+    super.destroy();
+  }
+
+  begin(topology: PrimitiveTopology = 'point-list'): void {
+    this.gl2.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
+    if (this.bindOnUse) {
+      this._bindBuffers();
+    }
+    this.gl2.beginTransformFeedback(getGLPrimitive(topology));
+  }
+
+  end(): void {
+    this.gl2.endTransformFeedback();
+    if (!this.bindOnUse) {
+      this._unbindBuffers();
+    }
+    this.gl2.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);
+  }
+
+  // SUBCLASS
+
+  setBuffers(buffers: Record<string, Buffer | BufferRange>) {
+    this.buffers = {};
+    this.unusedBuffers = {};
+
+    this.bind(() => {
+      for (const bufferName in buffers) {
+        this.setBuffer(bufferName, buffers[bufferName]);
+      }
+    });
+    return this;
+  }
+
+  setBuffer(locationOrName: string | number, bufferOrRange: Buffer | BufferRange) {
+    const location = this._getVaryingIndex(locationOrName);
+    const {buffer, byteLength, byteOffset} = this._getBufferRange(bufferOrRange);
+
+    if (location < 0) {
+      this.unusedBuffers[locationOrName] = buffer;
+      log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
+      return this;
+    }
+
+    this.buffers[location] = {buffer, byteLength, byteOffset};
+
+    // Need to avoid chrome bug where buffer that is already bound to a different target
+    // cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+    if (!this.bindOnUse) {
+      this._bindBuffer(location, buffer, byteOffset, byteLength);
+    }
+
+    return this;
+  }
+
+  bind(funcOrHandle = this.handle) {
+    if (typeof funcOrHandle !== 'function') {
+      this.gl2.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, funcOrHandle);
+      return this;
+    }
+
+    let value: unknown;
+
+    if (!this._bound) {
+      this.gl2.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, this.handle);
+      this._bound = true;
+      value = funcOrHandle();
+      this._bound = false;
+      this.gl2.bindTransformFeedback(GL.TRANSFORM_FEEDBACK, null);
+    } else {
+      value = funcOrHandle();
+    }
+
+    return value;
+  }
+
+  unbind() {
+    this.bind(null);
+  }
+
+  // PRIVATE METHODS
+
+  /** Extract offsets for bindBufferRange */
+  protected _getBufferRange(
+    bufferOrRange: Buffer | {buffer: Buffer; byteOffset?: number; byteLength?: number}
+  ): Required<BufferRange> {
+    if (bufferOrRange instanceof WEBGLBuffer) {
+      return {buffer: bufferOrRange, byteOffset: 0, byteLength: bufferOrRange.byteLength};
+    }
+
+    // To use bindBufferRange either offset or size must be specified.
+    // @ts-expect-error Must be a BufferRange.
+    const {buffer, byteOffset = 0, byteLength = bufferOrRange.buffer.byteLength} = bufferOrRange;
+    return {buffer, byteOffset, byteLength};
+  }
+
+  protected _getVaryingIndex(locationOrName: string | number) {
+    if (isIndex(locationOrName)) {
+      return Number(locationOrName);
+    }
+
+    for (const varying of this.layout.varyings) {
+      if (locationOrName === varying.name) {
+        return varying.location;
+      }
+    }
+
+    return -1;
+  }
+
+  /**
+   * Need to avoid chrome bug where buffer that is already bound to a different target
+   * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+   */
+  protected _bindBuffers(): void {
+    for (const bufferIndex in this.buffers) {
+      const {buffer, byteLength, byteOffset} = this._getBufferRange(this.buffers[bufferIndex]);
+      this._bindBuffer(Number(bufferIndex), buffer, byteOffset, byteLength);
+    }
+  }
+
+  protected _unbindBuffers(): void {
+    for (const bufferIndex in this.buffers) {
+      this.gl2.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, Number(bufferIndex), null);
+    }
+  }
+
+  protected _bindBuffer(
+    index: number,
+    buffer: Buffer,
+    byteOffset = 0,
+    byteLength?: number
+  ): this {
+    const handle = buffer && (buffer as WEBGLBuffer).handle;
+    if (!handle || byteLength === undefined) {
+      this.gl2.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle);
+    } else {
+      this.gl2.bindBufferRange(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle, byteOffset, byteLength);
+    }
+    return this;
+  }
+}
+
+/**
+ * Returns true if the given value is an integer, or a string that
+ * trivially converts to an integer (only numeric characters).
+ */
+function isIndex(value: string | number): boolean {
+  if (typeof value === 'number') {
+    return Number.isInteger(value);
+  }
+  return /^\d+$/.test(value);
+}

package/src/adapter/resources/webgl-vertex-array.ts

@@ -9,7 +9,6 @@ import {getBrowser} from '@probe.gl/env';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 
-import {BufferWithAccessor} from '../../classic/buffer-with-accessor';
 import {getGLFromVertexType} from '../converters/vertex-formats';
 // import {AccessorObject} from '../..';
 // import {getGLFromVertexType} from '../converters/vertex-formats';
@@ -24,7 +23,7 @@ export class WEBGLVertexArray extends VertexArray {
   readonly handle: WebGLVertexArrayObject;
 
   /** Attribute 0 buffer constant */
-  private buffer: BufferWithAccessor | null = null;
+  private buffer: WEBGLBuffer | null = null;
   private bufferValue = null;
 
   /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
@@ -62,7 +61,7 @@ export class WEBGLVertexArray extends VertexArray {
    */
   setIndexBuffer(indexBuffer: Buffer | null): void {
     const buffer = indexBuffer as WEBGLBuffer;
-    if (buffer && (buffer.glTarget !== GL.ELEMENT_ARRAY_BUFFER)) {
+    if (buffer?.glTarget !== GL.ELEMENT_ARRAY_BUFFER) {
       throw new Error('Use .setBuffer()');
     }
     // In WebGL The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject
@@ -116,7 +115,7 @@ export class WEBGLVertexArray extends VertexArray {
 
   override bindBeforeRender(): void {
     this.device.gl2.bindVertexArray(this.handle);
-    // TODO - the initial bind does not seem to take effect. 
+    // TODO - the initial bind does not seem to take effect.
     if (!this.init) {
       // log.log(1, `Binding vertex array ${this.id}`, this.indexBuffer?.id)();
       const webglBuffer = this.indexBuffer as WEBGLBuffer;
@@ -128,7 +127,7 @@ export class WEBGLVertexArray extends VertexArray {
 
   override unbindAfterRender(): void {
     // log.log(1, `Unbinding vertex array ${this.id}`)();
-    // TODO technically this is not necessary, but we might be interfacing 
+    // TODO technically this is not necessary, but we might be interfacing
     // with code that does not use vertex array objects
     this.device.gl2.bindVertexArray(null);
     // this.device.gl2.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
@@ -230,10 +229,14 @@ export class WEBGLVertexArray extends VertexArray {
     const byteLength = constantValue.byteLength * elementCount;
     const length = constantValue.length * elementCount;
 
+    if (this.buffer && byteLength !== this.buffer.byteLength) {
+      throw new Error(
+        `Buffer size is immutable, byte length ${byteLength} !== ${this.buffer.byteLength}.`
+      );
+    }
     let updateNeeded = !this.buffer;
 
-    this.buffer = this.buffer || (this.device.createBuffer({byteLength}) as BufferWithAccessor);
-    updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
+    this.buffer = this.buffer || this.device.createBuffer({byteLength});
 
     // Reallocate and update contents if needed
     updateNeeded = updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
@@ -242,7 +245,7 @@ export class WEBGLVertexArray extends VertexArray {
       // Create a typed array that is big enough, and fill it with the required data
       const typedArray = getScratchArray(value.constructor, length);
       fillArray({target: typedArray, source: constantValue, start: 0, count: length});
-      this.buffer.subData(typedArray);
+      this.buffer.write(typedArray);
       this.bufferValue = value;
     }
 

package/src/adapter/webgl-device.ts

@@ -56,10 +56,10 @@ import type {
   ComputePass,
   ComputePassProps,
   // CommandEncoder,
-  CommandEncoderProps
+  CommandEncoderProps,
+  TransformFeedbackProps
 } from '@luma.gl/core';
 
-import {BufferWithAccessor} from '../classic/buffer-with-accessor';
 import {WEBGLBuffer} from './resources/webgl-buffer';
 import {WEBGLShader} from './resources/webgl-shader';
 import {WEBGLSampler} from './resources/webgl-sampler';
@@ -69,6 +69,7 @@ import {WEBGLRenderPass} from './resources/webgl-render-pass';
 import {WEBGLRenderPipeline} from './resources/webgl-render-pipeline';
 import {WEBGLCommandEncoder} from './resources/webgl-command-encoder';
 import {WEBGLVertexArray} from './resources/webgl-vertex-array';
+import {WEBGLTransformFeedback} from './resources/webgl-transform-feedback';
 
 const LOG_LEVEL = 1;
 
@@ -298,7 +299,7 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
 
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WEBGLBuffer {
     const newProps = this._getBufferProps(props);
-    return new BufferWithAccessor(this, newProps);
+    return new WEBGLBuffer(this, newProps);
   }
 
   _createTexture(props: TextureProps): WEBGLTexture {
@@ -338,7 +339,11 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
   }
 
   beginComputePass(props: ComputePassProps): ComputePass {
-    throw new Error('compute shaders not supported in WebGL');
+    throw new Error('ComputePass not supported in WebGL');
+  }
+
+  createTransformFeedback(props: TransformFeedbackProps): WEBGLTransformFeedback {
+    return new WEBGLTransformFeedback(this, props);
   }
 
   private renderPass: WEBGLRenderPass | null = null;
@@ -352,7 +357,7 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     return this.renderPass;
   }
 
-  override createCommandEncoder(props: CommandEncoderProps): WEBGLCommandEncoder {
+  override createCommandEncoder(props?: CommandEncoderProps): WEBGLCommandEncoder {
     return new WEBGLCommandEncoder(this, props);
   }