@luma.gl/webgl 8.6.0-alpha.4 → 9.0.0-alpha.10

package/src/adapter/objects/webgl-renderbuffer.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-inline-comments */
+import {assert, ResourceProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import WebGLDevice from '../webgl-device';
+import WebGLResource from './webgl-resource';
+import {
+  isRenderbufferFormatSupported, getRenderbufferFormatBytesPerPixel
+} from '../converters/renderbuffer-formats';
+
+export type RenderbufferProps = ResourceProps & {
+  format: number;
+  width?: number;
+  height?: number;
+  samples?: number;
+};
+
+const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
+  id: undefined,
+  handle: undefined,
+  userData: undefined,
+  format: 0,
+  width: 1, 
+  height: 1, 
+  samples: 0
+};
+
+/**
+ * Renderbuffers are GPU objects that contain images.
+ * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
+ * while Textures may not be, and are the logical choice when
+ * you do not need to sample (i.e. in a post-pass shader)
+ * from the produced image. If you need to resample
+ * (such as when reading depth back in a second shader pass),
+ * use Textures instead.
+ * Renderbuffer objects also natively accommodate Multisampling (MSAA).
+ */
+export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
+  get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
+
+  get width(): number { return this.props.width; }
+  get height(): number { return this.props.height; }
+  get format(): number  { return this.props.format; }
+  get samples(): number { return this.props.samples; }
+
+  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
+    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+  }
+
+  constructor(device: WebGLDevice, props: RenderbufferProps) {
+    super(device, props, DEFAULT_RENDERBUFFER_PROPS);
+    this._initialize(this.props);
+  }
+
+  resize(size: {width: number, height: number}): this {
+    // Don't resize if width/height haven't changed
+    if (size.width !== this.width || size.height !== this.height) {
+      Object.assign(this.props, {...size, format: this.format, samples: this.samples});
+      this._initialize(this.props);
+    }
+    return this;
+  }
+
+  // PRIVATE METHODS
+
+  /** Creates and initializes a renderbuffer object's data store */
+  protected _initialize(props: Required<RenderbufferProps>) {
+    const {format, width, height, samples} = props;
+    assert(format, 'Needs format');
+
+    this.trackDeallocatedMemory();
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+
+    if (samples !== 0 && this.device.isWebGL2) {
+      // @ts-expect-error
+      this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
+    } else {
+      this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);
+    }
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
+
+    this.trackAllocatedMemory(
+      width * height * (samples || 1) * getRenderbufferFormatBytesPerPixel(format)
+    );
+
+    return this;
+  }
+
+  // RESOURCE IMPLEMENTATION
+
+  _createHandle() {
+    return this.gl.createRenderbuffer();
+  }
+
+  _deleteHandle(): void {
+    this.gl.deleteRenderbuffer(this.handle);
+    this.trackDeallocatedMemory();
+  }
+
+  _bindHandle(handle: WEBGLRenderbuffer): void {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
+  }
+}

package/src/{classes → adapter/objects}/webgl-resource.ts

@@ -1,17 +1,19 @@
 // luma.gl, MIT license
 import {Resource, assert, uid, stubRemovedMethods} from '@luma.gl/api';
-import type {Device} from '@luma.gl/api';
-export type {ResourceProps} from '@luma.gl/api';
-import {isWebGL2, assertWebGLContext} from '../context/context/webgl-checks';
-import {getKey, getKeyValue} from '../webgl-utils/constants-to-keys';
-import WebGLDevice from '../adapter/webgl-device';
+import type {Device, ResourceProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {isWebGL2, assertWebGLContext} from '../../context/context/webgl-checks';
+import WebGLDevice from '../webgl-device';
+
+// Requires full GL enum to be bundled... Make these bindings dependent on dynamic import (debug)?
+import {getKey, getKeyValue} from './constants-to-keys';
 
 const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual methods';
 
 /**
  * Base class for WebGL object wrappers
  */
- export default class WebGLResource<Props> extends Resource<Props> {
+ export default abstract class WebGLResource<Props> extends Resource<Props> {
   id: string;
   userData: any;
   readonly device: WebGLDevice;
@@ -72,6 +74,10 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     return this._handle;
   }
 
+  destroy(): void {
+    this.delete();
+  }
+
   delete({deleteChildren = false} = {}) {
     // Delete this object, and get refs to any children
     // @ts-expect-error
@@ -166,7 +172,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
 
     const isWebgl2 = isWebGL2(this.gl);
 
-    const values = {};
+    const values: Record<string, any> = {};
 
     // Query all parameters if no list provided
     const parameterKeys = parameters || Object.keys(PARAMETERS);
@@ -198,11 +204,11 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
    *
    * @todo - cache parameter to avoid issuing WebGL calls?
    *
-   * @param {string} pname - parameter (GL constant, value or key)
-   * @param {GLint|GLfloat|GLenum} value
-   * @return {Resource} returns self to enable chaining
+   * @param pname - parameter (GL constant, value or key)
+   * @param value {GLint|GLfloat|GLenum} 
+   * @return returns self to enable chaining
    */
-  setParameter(pname, value) {
+  setParameter(pname: GL | string, value: any): this {
     pname = getKeyValue(this.gl, pname);
     assert(pname);
 
@@ -239,7 +245,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
    * Batch update resource parameters
    * Assumes the subclass supports a setParameter call
    */
-  setParameters(parameters) {
+  setParameters(parameters: Record<GL, any>) {
     for (const pname in parameters) {
       this.setParameter(pname, parameters[pname]);
     }
@@ -247,12 +253,12 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
   }
 
   // Install stubs for removed methods
-  stubRemovedMethods(className, version, methodNames) {
+  stubRemovedMethods(className: string, version: string, methodNames: string[]) {
     return stubRemovedMethods(this, className, version, methodNames);
   }
 
   // PUBLIC VIRTUAL METHODS
-  initialize(props) {}
+  initialize(props: ResourceProps) {}
 
   // PROTECTED METHODS - These must be overridden by subclass
   _createHandle() {
@@ -263,7 +269,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 
-  _bindHandle(handle) {
+  _bindHandle(handle: any) {
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 
@@ -271,11 +277,11 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 
-  _getParameter(pname, props): number {
+  _getParameter(pname: GL, props: Record<string, any>): number {
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 
-  _setParameter(pname, value) {
+  _setParameter(pname: GL | string, value: any) {
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -0,0 +1,111 @@
+import {assert, ResourceProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {getBrowser} from '@probe.gl/env';
+
+import WebGLDevice from '../webgl-device';
+import WebGLResource from './webgl-resource';
+
+import Buffer from '../resources/webgl-buffer';
+
+const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
+
+/**
+ * VertexArrayObject properties
+ */
+export type VertexArrayObjectProps = ResourceProps & {
+};
+
+/** VertexArrayObject wrapper */
+export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
+  get [Symbol.toStringTag](): string {
+    return 'BaseVertexArrayObject';
+  }
+
+  constructor(device: WebGLDevice, props?: VertexArrayObjectProps) {
+    // @ts-expect-error
+    super(device, props, {});
+  }
+
+  _createHandle() {
+    return this.gl2.createVertexArray();
+  }
+
+  _deleteHandle(): void {
+    this.gl2.deleteVertexArray(this.handle);
+    // @ts-expect-error
+    return [this.elements];
+    // return [this.elements, ...this.buffers];
+  }
+
+  _bindHandle(handle: WEBGLVertexArrayObject): void {
+    this.gl2.bindVertexArray(handle);
+  }
+
+  // Set (bind) an elements buffer, for indexed rendering.
+  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
+  setElementBuffer(elementBuffer: Buffer | null = null, opts = {}) {
+    assert(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+
+    // The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject...
+    this.bind(() => {
+      this.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, elementBuffer ? elementBuffer.handle : null);
+    });
+
+    return this;
+  }
+
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location: number, buffer: Buffer, accessor: any): this {
+    // Check target
+    if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
+      return this.setElementBuffer(buffer, accessor);
+    }
+
+    const {size, type, stride, offset, normalized, integer, divisor} = accessor;
+
+    const {gl, gl2} = this;
+    location = Number(location);
+
+    this.bind(() => {
+      // A non-zero buffer object must be bound to the GL_ARRAY_BUFFER target
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer.handle);
+
+      // WebGL2 supports *integer* data formats, i.e. GPU will see integer values
+      if (integer) {
+        this.device.assertWebGL2();
+        gl2.vertexAttribIPointer(location, size, type, stride, offset);
+      } else {
+        // Attaches ARRAY_BUFFER with specified buffer format to location
+        gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
+      }
+      gl.enableVertexAttribArray(location);
+      gl2.vertexAttribDivisor(location, divisor || 0);
+
+      // NOTE We don't unbind buffer here, typically another buffer will be bound just after
+    });
+
+    return this;
+  }
+
+  /**
+   * Enabling an attribute location makes it reference the currently bound buffer
+   *  Disabling an attribute location makes it reference the global constant value
+   * TODO - handle single values for size 1 attributes?
+   * TODO - convert classic arrays based on known type?
+   */
+  enable(location: number, enable = true): this {
+    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
+    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
+    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+
+    if (enable || canDisableAttribute) {
+      location = Number(location);
+      this.bind(() =>
+        enable
+          ? this.gl.enableVertexAttribArray(location)
+          : this.gl.disableVertexAttribArray(location)
+      );
+    }
+    return this;
+  }
+}

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

@@ -0,0 +1,219 @@
+import type {BufferProps} from '@luma.gl/api';
+import {Buffer, assert} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import WebGLDevice from '../webgl-device';
+
+const DEBUG_DATA_LENGTH = 10;
+
+/** WebGL Buffer interface */
+export default class WEBGLBuffer extends Buffer {
+  readonly device: WebGLDevice;
+  readonly gl: WebGLRenderingContext;
+  readonly gl2: WebGL2RenderingContext | null;
+  readonly handle: WebGLBuffer;
+  readonly target: number;
+
+  byteLength: number;
+  bytesUsed: number;
+  debugData: ArrayBuffer | null = null;
+
+  webglUsage: number;
+
+  accessor: {};
+
+  constructor(device: WebGLDevice, props: BufferProps = {}) {
+    super(device, props);
+
+    this.device = device;
+    this.gl = this.device.gl;
+    this.gl2 = this.device.gl2;
+
+    const handle = typeof props === 'object' ? (props as BufferProps).handle : undefined;
+    this.handle = handle || this.gl.createBuffer();
+    // @ts-expect-error Add metadata for spector
+    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
+
+    // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
+    // otherwise buffer type will lock to generic (non-element) buffer
+    // In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
+    // @ts-expect-error Hack - Checking for subclass prop
+    this.target = this.props.target || getWebGLTarget(this.props.usage);
+    // @ts-expect-error Hack - Checking for subclass prop
+    this.webglUsage = this.props.webglUsage || getWebGLUsage(this.props.usage);
+    this.debugData = null;
+
+    // Set data: (re)initializes the buffer
+    if (props.data) {
+      this._initWithData(props.data, props.byteOffset, props.byteLength);
+    } else {
+      this._initWithByteLength(props.byteLength || 0);
+    }
+
+    // Deprecated: Merge main props and accessor
+    // this.accessor = {...props.accessor};
+
+    // Object.seal(this);
+  }
+
+   // PRIVATE METHODS
+
+  // Allocate a new buffer and initialize to contents of typed array
+  _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
+    assert(ArrayBuffer.isView(data));
+
+    const target = this._getWriteTarget();
+
+    this.gl.bindBuffer(target, this.handle);
+    this.gl.bufferData(target, byteLength, this.webglUsage);
+    this.gl.bufferSubData(target, byteOffset, data);
+    this.gl.bindBuffer(target, null);
+
+    this.debugData = data.slice(0, DEBUG_DATA_LENGTH);
+    this.bytesUsed = byteLength;
+    this.byteLength = byteLength;
+    this.trackAllocatedMemory(byteLength);
+
+    return this;
+  }
+
+  // Allocate a GPU buffer of specified size.
+  _initWithByteLength(byteLength: number): this {
+    assert(byteLength >= 0);
+
+    // Workaround needed for Safari (#291):
+    // gl.bufferData with size equal to 0 crashes. Instead create zero sized array.
+    let data = byteLength;
+    if (byteLength === 0) {
+      // @ts-expect-error
+      data = new Float32Array(0);
+    }
+
+    const target = this._getWriteTarget();
+
+    this.gl.bindBuffer(target, this.handle);
+    this.gl.bufferData(target, data, this.webglUsage);
+    this.gl.bindBuffer(target, null);
+
+    this.debugData = null;
+    this.bytesUsed = byteLength;
+    this.byteLength = byteLength;
+
+    return this;
+  }
+
+  destroy(): void {
+    if (this.handle) {
+      this.removeStats();
+      this.trackDeallocatedMemory();
+      this.gl.deleteBuffer(this.handle);
+      // this.handle = null;
+      this.destroyed = true;
+    }
+  }
+
+  write(data: ArrayBufferView, byteOffset: number = 0): void {
+    const srcOffset = 0;
+    const byteLength = data.byteLength;
+
+    // Create the buffer - binding it here for the first time locks the type
+    // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
+    const target = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
+    this.gl.bindBuffer(target, this.handle);
+    // WebGL2: subData supports additional srcOffset and length parameters
+    if (srcOffset !== 0 || byteLength !== undefined) {
+      this.device.assertWebGL2();
+
+      // @ts-expect-error
+      this.gl.bufferSubData(this.target, offset, data, srcOffset, byteLength);
+    } else {
+      this.gl.bufferSubData(target, byteOffset, data);
+    }
+    this.gl.bindBuffer(target, null);
+
+    // TODO - update local `data` if offsets are right
+    // this.debugData = data.slice(byteOffset, 40);
+  }
+
+  /** Read data from the buffer */
+  async readAsync(
+    byteOffset: number = 0,
+    byteLength?: number
+  ): Promise<ArrayBuffer> {
+    this.device.assertWebGL2();
+
+    const data = new Uint8Array(byteLength);
+    const dstOffset = 0;
+
+    // Use GL.COPY_READ_BUFFER to avoid disturbing other targets and locking type
+    this.gl.bindBuffer(GL.COPY_READ_BUFFER, this.handle);
+    this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, byteOffset, data, dstOffset, byteLength);
+    this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
+
+    // TODO - update local `data` if offsets are 0
+    // this.debugData = null;
+
+    return data;
+  }
+
+  // PROTECTED METHODS (INTENDED FOR USE BY OTHER FRAMEWORK CODE ONLY)
+
+  _invalidateDebugData() {
+    this.debugData = null;
+  }
+
+  _getWriteTarget() {
+    return this.target;
+    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
+  }
+
+  _getReadTarget() {
+    return this.target;
+    return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
+  }
+}
+
+// static MAP_READ = 0x01;
+// static MAP_WRITE = 0x02;
+// static COPY_SRC = 0x0004;
+// static COPY_DST = 0x0008;
+// static INDEX = 0x0010;
+// static VERTEX = 0x0020;
+// static UNIFORM = 0x0040;
+// static STORAGE = 0x0080;
+// static INDIRECT = 0x0100;
+// static QUERY_RESOLVE = 0x0200;
+
+function getWebGLTarget(usage: number): GL {
+  if (usage & Buffer.INDEX) {
+    return GL.ELEMENT_ARRAY_BUFFER;
+  }
+  if (usage & Buffer.VERTEX) {
+    return GL.ARRAY_BUFFER;
+  }
+  if (usage & Buffer.UNIFORM) {
+    return GL.UNIFORM_BUFFER;
+  }
+
+  // gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
+  // gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
+  // gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
+  // gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
+  // gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
+
+  // Binding a buffer for the first time locks the type
+  // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
+  return GL.ARRAY_BUFFER;
+}
+
+function getWebGLUsage(usage: number): GL {
+  if (usage & Buffer.INDEX) {
+    return GL.STATIC_DRAW;
+  }
+  if (usage & Buffer.VERTEX) {
+    return GL.STATIC_DRAW;
+  }
+  if (usage & Buffer.UNIFORM) {
+    return GL.DYNAMIC_DRAW;
+  }
+  return GL.DYNAMIC_DRAW;
+}

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

@@ -0,0 +1,94 @@
+import type {
+  CopyBufferToBufferOptions,
+  CopyBufferToTextureOptions,
+  CopyTextureToBufferOptions,
+  CopyTextureToTextureOptions
+} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import WebGLDevice from '../webgl-device';
+import WEBGLBuffer from './webgl-buffer';
+
+function cast<T>(value: unknown): T {
+  return value as T;
+}
+
+type CopyBufferToBufferCommand = {
+  name: 'copy-buffer-to-buffer';
+  options: CopyBufferToBufferOptions;
+};
+
+type CopyBufferToTextureCommand = {
+  name: 'copy-buffer-to-texture';
+  options: CopyBufferToTextureOptions;
+};
+
+type CopyTextureToBufferCommand = {
+  name: 'copy-texture-to-buffer';
+  options: CopyTextureToBufferOptions;
+};
+
+type CopyTextureToTextureCommand = {
+  name: 'copy-texture-to-texture';
+  options: CopyTextureToTextureOptions;
+};
+
+type Command =
+  | CopyBufferToBufferCommand
+  | CopyBufferToTextureCommand
+  | CopyTextureToBufferCommand
+  | CopyTextureToTextureCommand;
+
+export default class CommandBuffer {
+  commands: Command[] = [];
+}
+
+export function submitCommands(device: WebGLDevice, commands: Command[] = []) {
+  for (const command of commands) {
+    switch (command.name) {
+      case 'copy-buffer-to-buffer':
+        _copyBufferToBuffer(device, command.options);
+        break;
+      case 'copy-buffer-to-texture':
+        _copyBufferToTexture(device, command.options);
+        break;
+      case 'copy-texture-to-buffer':
+        _copyTextureToBuffer(device, command.options);
+        break;
+      case 'copy-texture-to-texture':
+        _copyTextureToTexture(device, command.options);
+        break;
+    }
+  }
+}
+
+function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOptions): void {
+  const source = cast<WEBGLBuffer>(options.source);
+  const destination = cast<WEBGLBuffer>(options.destination);
+
+  const {gl2} = device;
+  if (gl2) {
+    // In WebGL2 we can perform the copy on the GPU
+    // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
+    gl2.bindBuffer(GL.COPY_READ_BUFFER, source.handle);
+    gl2.bindBuffer(GL.COPY_WRITE_BUFFER, destination.handle);
+    gl2.copyBufferSubData(
+      GL.COPY_READ_BUFFER,
+      GL.COPY_WRITE_BUFFER,
+      options.sourceOffset ?? 0,
+      options.destinationOffset ?? 0,
+      options.size
+    );
+    gl2.bindBuffer(GL.COPY_READ_BUFFER, null);
+    gl2.bindBuffer(GL.COPY_WRITE_BUFFER, null);
+  } else {
+    // TODO - in WebGL1 we would have to read back to CPU
+    // read / write buffer from / to CPU
+    throw new Error('copyBufferToBuffer not implemented in WebGL1');
+  }
+}
+
+function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {}
+
+function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {}
+
+function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {}

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

@@ -0,0 +1,58 @@
+import {CommandEncoder, CommandEncoderProps} from '@luma.gl/api';
+import type {
+  CopyBufferToBufferOptions,
+  CopyBufferToTextureOptions,
+  CopyTextureToBufferOptions,
+  CopyTextureToTextureOptions
+} from '@luma.gl/api';
+
+import CommandBuffer from './webgl-command-buffer';
+import WebGLDevice from '../webgl-device';
+
+export default class WEBGLCommandEncoder extends CommandEncoder {
+  readonly device: WebGLDevice;
+
+  readonly commandBuffer = new CommandBuffer();
+
+  constructor(device: WebGLDevice, props: CommandEncoderProps) {
+    super(props);
+    this.device = device;
+  }
+
+  destroy() {}
+
+  // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+  // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+  // finish(options?: {id?: string}): GPUCommandBuffer;
+
+  copyBufferToBuffer(options: CopyBufferToBufferOptions): void {
+    this.commandBuffer.commands.push({name: 'copy-buffer-to-buffer', options});
+  }
+
+  copyBufferToTexture(options: CopyBufferToTextureOptions) {
+    this.commandBuffer.commands.push({name: 'copy-buffer-to-texture', options});
+  }
+
+  copyTextureToBuffer(options: CopyTextureToBufferOptions): void {
+    this.commandBuffer.commands.push({name: 'copy-texture-to-buffer', options});
+  }
+
+  copyTextureToTexture(options: CopyTextureToTextureOptions): void {
+    this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
+  }
+
+  pushDebugGroup(groupLabel: string): void {}
+  popDebugGroup() {}
+
+  insertDebugMarker(markerLabel: string): void {}
+
+  // writeTimestamp(querySet: Query, queryIndex: number): void {}
+
+  // resolveQuerySet(options: {
+  //   querySet: GPUQuerySet,
+  //   firstQuery: number,
+  //   queryCount: number,
+  //   destination: Buffer,
+  //   destinationOffset?: number;
+  // }): void;
+};