@luma.gl/webgl 9.0.0-alpha.23 → 9.0.0-alpha.25

package/package.json

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

package/src/adapter/converters/device-parameters.ts

@@ -6,7 +6,7 @@ import {
   log,
   isObjectEmpty
 } from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import type {GLParameters} from '@luma.gl/constants';
 import {pushContextState, popContextState} from '../../context/state-tracker/track-context-state';
 import {setParameters} from '../../context/parameters/unified-parameter-api';

package/src/adapter/converters/texture-formats.ts

@@ -1,6 +1,6 @@
 import type {TextureFormat, DeviceFeature} from '@luma.gl/api';
 import {decodeTextureFormat} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 
 /* eslint-disable camelcase */

package/src/adapter/converters/vertex-formats.ts

@@ -1,4 +1,4 @@
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {VertexFormat} from '@luma.gl/api';
 
 export function getVertexFormat(type: GL, components: number): VertexFormat {

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

@@ -1,6 +1,6 @@
 // luma.gl, MIT license
 import type {DeviceLimits} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {getWebGL2Context} from '../../context/context/webgl-checks';
 
 /** Populate a WebGPU style device limits */

package/src/adapter/device-helpers/get-device-info.ts

@@ -1,5 +1,5 @@
 import {DeviceInfo} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 
 /** @returns strings identifying the GPU vendor and driver. */

package/src/adapter/helpers/get-shader-layout.ts

@@ -11,7 +11,7 @@ import {
   // AttributeLayout,
   AccessorObject
 } from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 import {Accessor} from '../../classic/accessor'; // TODO - should NOT depend on classic API
 import {decodeUniformType, decodeAttributeType} from './uniforms';

package/src/adapter/helpers/set-uniform.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 // Uniforms
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 
 /** Set a raw uniform (without type conversion and caching) */
 /* eslint-disable max-len */

package/src/adapter/objects/constants-to-keys.ts

@@ -1,5 +1,5 @@
 import {assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 
 // Resolve a WebGL enumeration name (returns itself if already a number)
 export function getKeyValue(gl: WebGLRenderingContext, name: string | GL): GL {

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

@@ -1,5 +1,5 @@
 import {assert, ResourceProps, TextureFormat} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WebGLResource} from './webgl-resource';
 import {isRenderbufferFormatSupported} from '../converters/texture-formats';

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

@@ -1,7 +1,7 @@
 // luma.gl, MIT license
 import {Resource, assert, uid, stubRemovedMethods} from '@luma.gl/api';
 import type {Device, ResourceProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {isWebGL2, assertWebGLContext} from '../../context/context/webgl-checks';
 import {WebGLDevice} from '../webgl-device';
 

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

@@ -1,5 +1,5 @@
 import {assert, ResourceProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
 import {WebGLDevice} from '../webgl-device';

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

@@ -1,6 +1,6 @@
 import type {BufferProps} from '@luma.gl/api';
 import {Buffer, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 
 const DEBUG_DATA_LENGTH = 10;

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

@@ -12,7 +12,7 @@ import {
   // Buffer,
   Framebuffer
 } from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 
 // import {getTypedArrayFromGLType, getGLTypeFromTypedArray} from '../../classic/typed-array-utils';
 import {WebGLDevice} from '../webgl-device';

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

@@ -2,7 +2,7 @@
 
 import type {FramebufferProps, TextureFormat} from '@luma.gl/api';
 import {Framebuffer, Texture, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';

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

@@ -9,7 +9,7 @@ import type {
   AttributeLayout
 } from '@luma.gl/api';
 import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 
 import {getWebGLDataType} from '../converters/texture-formats';
 import {getShaderLayout} from '../helpers/get-shader-layout';
@@ -359,7 +359,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   _applyUniforms() {
     for (const uniformLayout of this.layout.uniforms || []) {
       const {name, location, type, textureUnit} = uniformLayout;
-      const value = this.uniforms[name] || textureUnit;
+      const value = this.uniforms[name] ?? textureUnit;
       if (value !== undefined) {
         setUniform(this.device.gl, location, type, value);
       }

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

@@ -1,6 +1,6 @@
 // luma.gl, MIT license
 import {log, uid, Shader, ShaderProps, CompilerMessage, formatCompilerLog} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {getShaderInfo} from '../helpers/get-shader-info';
 import {parseShaderCompilerLog} from '../helpers/parse-shader-compiler-log';
 import {WebGLDevice} from '../webgl-device';

package/src/adapter/webgl-device.ts

@@ -50,7 +50,7 @@ import type {
   CommandEncoderProps
 } from '@luma.gl/api';
 
-import {ClassicBuffer} from '../classic/buffer';
+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';
@@ -284,7 +284,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 ClassicBuffer(this, newProps);
+    return new BufferWithAccessor(this, newProps);
   }
 
   _createTexture(props: TextureProps): WEBGLTexture {

package/src/classic/accessor.ts

@@ -1,5 +1,5 @@
 import {assert, checkProps, Buffer, AccessorObject} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {getTypedArrayFromGLType} from './typed-array-utils';
 
 const DEFAULT_ACCESSOR_VALUES = {

package/src/classic/{buffer.ts → buffer-with-accessor.ts}

@@ -2,7 +2,7 @@
 
 import type {Device, BufferProps, TypedArray} from '@luma.gl/api';
 import {assert, checkProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {assertWebGL2Context} from '../context/context/webgl-checks';
 import {AccessorObject} from '../types';
 import {Accessor} from './accessor';
@@ -42,7 +42,7 @@ const PROP_CHECKS_SET_PROPS = {
   removedProps: DEPRECATED_PROPS
 };
 
-function getWEBGLBufferProps(props: ClassicBufferProps | ArrayBufferView | number): BufferProps {
+function getWEBGLBufferProps(props: BufferWithAccessorProps | ArrayBufferView | number): BufferProps {
   // Signature `new Buffer(gl, new Float32Array(...)`
   if (ArrayBuffer.isView(props)) {
     return {data: props};
@@ -62,7 +62,7 @@ function getWEBGLBufferProps(props: ClassicBufferProps | ArrayBufferView | numbe
 }
 
 /** WebGL Buffer interface */
-export type ClassicBufferProps = BufferProps & {
+export type BufferWithAccessorProps = BufferProps & {
   handle?: WebGLBuffer;
 
   target?: number;
@@ -81,11 +81,11 @@ export type ClassicBufferProps = BufferProps & {
 }
 
 /** WebGL Buffer interface */
-export class ClassicBuffer extends WEBGLBuffer {
+export class BufferWithAccessor extends WEBGLBuffer {
   usage: number;
   accessor: Accessor;
 
-  constructor(device: Device | WebGLRenderingContext, props?: ClassicBufferProps);
+  constructor(device: Device | WebGLRenderingContext, props?: BufferWithAccessorProps);
   constructor(device: Device | WebGLRenderingContext, data: ArrayBufferView | number[]);
   constructor(device: Device | WebGLRenderingContext, byteLength: number);
 
@@ -96,7 +96,7 @@ export class ClassicBuffer extends WEBGLBuffer {
     // this.initialize(props);
 
     // Deprecated: Merge main props and accessor
-    this.setAccessor(Object.assign({}, props, (props as ClassicBufferProps).accessor));
+    this.setAccessor(Object.assign({}, props, (props as BufferWithAccessorProps).accessor));
 
     // infer GL type from supplied typed array
     if (this.props.data) {
@@ -126,7 +126,7 @@ export class ClassicBuffer extends WEBGLBuffer {
   // Signature: `new Buffer(gl, {data: new Float32Array(...)})`
   // Signature: `new Buffer(gl, new Float32Array(...))`
   // Signature: `new Buffer(gl, 100)`
-  initialize(props: ClassicBufferProps = {}): this {
+  initialize(props: BufferWithAccessorProps = {}): this {
     // Signature `new Buffer(gl, new Float32Array(...)`
     if (ArrayBuffer.isView(props)) {
       props = {data: props};
@@ -157,7 +157,7 @@ export class ClassicBuffer extends WEBGLBuffer {
     return this;
   }
 
-  setProps(props: ClassicBufferProps): this {
+  setProps(props: BufferWithAccessorProps): this {
     props = checkProps('Buffer', props, PROP_CHECKS_SET_PROPS);
 
     if ('accessor' in props) {
@@ -197,7 +197,7 @@ export class ClassicBuffer extends WEBGLBuffer {
   }
 
   // Update with new data. Reinitializes the buffer
-  setData(props: ClassicBufferProps) {
+  setData(props: BufferWithAccessorProps) {
     return this.initialize(props);
   }
 

package/src/classic/clear.ts

@@ -0,0 +1,110 @@
+import {Device, Framebuffer, assert} from '@luma.gl/api';
+import {WebGLDevice} from '../adapter/webgl-device';
+import {withParameters} from '../context/state-tracker/with-parameters';
+
+// Should collapse during minification
+const GL_DEPTH_BUFFER_BIT = 0x00000100;
+const GL_STENCIL_BUFFER_BIT = 0x00000400;
+const GL_COLOR_BUFFER_BIT = 0x00004000;
+
+const GL_COLOR = 0x1800;
+const GL_DEPTH = 0x1801;
+const GL_STENCIL = 0x1802;
+const GL_DEPTH_STENCIL = 0x84f9;
+
+// Should disappear if asserts are removed
+const ERR_ARGUMENTS = 'clear: bad arguments';
+
+/** 
+ * Optionally clears depth, color and stencil buffers 
+ * @deprecated Set clear color when creating a RenderPass.
+ */
+export function clear(
+  gl: Device | WebGLRenderingContext,
+  options?: {framebuffer?: Framebuffer; color?: any; depth?: any; stencil?: any}
+): void {
+  const device = WebGLDevice.attach(gl);
+  const {framebuffer = null, color = null, depth = null, stencil = null} = options || {};
+  const parameters: any = {};
+
+  if (framebuffer) {
+    parameters.framebuffer = framebuffer;
+  }
+
+  let clearFlags = 0;
+
+  if (color) {
+    clearFlags |= GL_COLOR_BUFFER_BIT;
+    if (color !== true) {
+      parameters.clearColor = color;
+    }
+  }
+
+  if (depth) {
+    clearFlags |= GL_DEPTH_BUFFER_BIT;
+    if (depth !== true) {
+      parameters.clearDepth = depth;
+    }
+  }
+
+  if (stencil) {
+    clearFlags |= GL_STENCIL_BUFFER_BIT;
+    if (depth !== true) {
+      parameters.clearStencil = depth;
+    }
+  }
+
+  assert(clearFlags !== 0, ERR_ARGUMENTS);
+
+  // Temporarily set any clear "colors" and call clear
+  withParameters(device.gl, parameters, () => {
+    device.gl.clear(clearFlags);
+  });
+}
+
+/** 
+ * WebGL2 - clear a specific drawing buffer 
+ * @deprecated Set clear color when creating a RenderPass
+ */
+export function clearBuffer(
+  gl: Device | WebGLRenderingContext,
+  options?: {framebuffer?: Framebuffer; buffer?: any; drawBuffer?: any; value?: any}
+) {
+  const device = WebGLDevice.attach(gl);
+
+  const {framebuffer = null, buffer = GL_COLOR, drawBuffer = 0, value = [0, 0, 0, 0]} = options || {};
+  withParameters(device.gl2, {framebuffer}, () => {
+    // Method selection per OpenGL ES 3 docs
+    switch (buffer) {
+      case GL_COLOR:
+        switch (value.constructor) {
+          case Int32Array:
+            device.gl2.clearBufferiv(buffer, drawBuffer, value);
+            break;
+          case Uint32Array:
+            device.gl2.clearBufferuiv(buffer, drawBuffer, value);
+            break;
+          case Float32Array:
+          default:
+            device.gl2.clearBufferfv(buffer, drawBuffer, value);
+        }
+        break;
+
+      case GL_DEPTH:
+        device.gl2.clearBufferfv(GL_DEPTH, 0, [value]);
+        break;
+
+      case GL_STENCIL:
+        device.gl2.clearBufferiv(GL_STENCIL, 0, [value]);
+        break;
+
+      case GL_DEPTH_STENCIL:
+        const [depth, stencil] = value;
+        device.gl2.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
+        break;
+
+      default:
+        assert(false, ERR_ARGUMENTS);
+    }
+  });
+}

package/src/classic/copy-and-blit.ts

@@ -0,0 +1,189 @@
+// luma.gl, MIT license
+import {assert, Texture, Framebuffer, FramebufferProps} from '@luma.gl/api';
+import {GL} from '@luma.gl/constants';
+
+import {BufferWithAccessor as Buffer} from './buffer-with-accessor';
+import {WEBGLTexture}  from  '../adapter/resources/webgl-texture';
+import {WEBGLFramebuffer} from '../adapter/resources/webgl-framebuffer';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from './typed-array-utils';
+import {glFormatToComponents, glTypeToBytes} from './format-utils';
+
+/**
+ * Copies data from a type  or a Texture object into ArrayBuffer object.
+ * App can provide targetPixelArray or have it auto allocated by this method
+ *  newly allocated by this method unless provided by app.
+ * @deprecated Use CommandEncoder.copyTextureToBuffer and Buffer.read
+ * @note Slow requires roundtrip to GPU
+ *
+ * @param source
+ * @param options
+ * @returns pixel array,
+ */
+export function readPixelsToArray(
+  source: Framebuffer | Texture,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    sourceAttachment?: number;
+    target?: Uint8Array | Uint16Array | Float32Array;
+    // following parameters are auto deduced if not provided
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceType?: number;
+  }
+): Uint8Array | Uint16Array | Float32Array {
+  const {sourceX = 0, sourceY = 0, sourceFormat = GL.RGBA} = options || {};
+  let {
+    sourceAttachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
+    target = null,
+    // following parameters are auto deduced if not provided
+    sourceWidth,
+    sourceHeight,
+    sourceType
+  } = options || {};
+
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  assert(framebuffer);
+  const {gl, handle} = framebuffer as WEBGLFramebuffer;
+  sourceWidth = sourceWidth || framebuffer.width;
+  sourceHeight = sourceHeight || framebuffer.height;
+
+  // TODO - Set and unset gl.readBuffer
+  if (sourceAttachment === GL.COLOR_ATTACHMENT0 && handle === null) {
+    sourceAttachment = GL.FRONT;
+  }
+
+  const attachment = sourceAttachment - GL.COLOR_ATTACHMENT0;
+  // assert(attachments[sourceAttachment]);
+
+  // Deduce the type from color attachment if not provided.
+  sourceType = sourceType || (framebuffer.colorAttachments[attachment] as WEBGLTexture).type;
+
+  // Deduce type and allocated pixelArray if needed
+  target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight);
+
+  // Pixel array available, if necessary, deduce type from it.
+  sourceType = sourceType || getGLTypeFromTypedArray(target);
+
+  const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
+  // @ts-expect-error
+  gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+  return target;
+}
+
+/**
+ * Copies data from a Framebuffer or a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
+ * @param source
+ * @param options
+ */
+export function readPixelsToBuffer(
+  source: Framebuffer | Texture,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    target?: Buffer; // A new Buffer object is created when not provided.
+    targetByteOffset?: number; // byte offset in buffer object
+    // following parameters are auto deduced if not provided
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceType?: number;
+  }
+): Buffer {
+  const {sourceX = 0, sourceY = 0, sourceFormat = GL.RGBA, targetByteOffset = 0} = options || {};
+  // following parameters are auto deduced if not provided
+  let {target, sourceWidth, sourceHeight, sourceType} = options || {};
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  assert(framebuffer);
+  sourceWidth = sourceWidth || framebuffer.width;
+  sourceHeight = sourceHeight || framebuffer.height;
+
+  // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
+  const webglFramebuffer = framebuffer as WEBGLFramebuffer;
+  const gl2 = webglFramebuffer.device.assertWebGL2();
+
+  // deduce type if not available.
+  sourceType = sourceType || (target ? target.type : GL.UNSIGNED_BYTE);
+
+  if (!target) {
+    // Create new buffer with enough size
+    const components = glFormatToComponents(sourceFormat);
+    const byteCount = glTypeToBytes(sourceType);
+    const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
+    target = new Buffer(gl2, {byteLength, accessor: {type: sourceType, size: components}});
+  }
+
+  // @ts-expect-error
+  target.bind({target: GL.PIXEL_PACK_BUFFER});
+  withParameters(gl2, {framebuffer}, () => {
+    gl2.readPixels(
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      sourceFormat,
+      sourceType,
+      targetByteOffset
+    );
+  });
+  target.unbind({target: GL.PIXEL_PACK_BUFFER});
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+
+  return target;
+}
+
+function getFramebuffer(source: Texture | Framebuffer): {
+  framebuffer: Framebuffer;
+  deleteFramebuffer: boolean;
+} {
+  if (!(source instanceof Framebuffer)) {
+    return {framebuffer: toFramebuffer(source), deleteFramebuffer: true};
+  }
+  return {framebuffer: source, deleteFramebuffer: false};
+}
+
+/**
+ * Wraps a given texture into a framebuffer object, that can be further used
+ * to read data from the texture object.
+ */
+export function toFramebuffer(texture: Texture, props?: FramebufferProps): Framebuffer {
+  const {device, width, height, id} = texture;
+  const framebuffer = device.createFramebuffer({
+    ...props,
+    id: `framebuffer-for-${id}`,
+    width,
+    height,
+    colorAttachments: [
+      texture
+    ]
+  }
+  );
+  return framebuffer;
+}
+
+function getPixelArray(
+  pixelArray,
+  type,
+  format,
+  width: number,
+  height: number
+): Uint8Array | Uint16Array | Float32Array {
+  if (pixelArray) {
+    return pixelArray;
+  }
+  // Allocate pixel array if not already available, using supplied type
+  type = type || GL.UNSIGNED_BYTE;
+  const ArrayType = getTypedArrayFromGLType(type, {clamped: false});
+  const components = glFormatToComponents(format);
+  // TODO - check for composite type (components = 1).
+  return new ArrayType(width * height * components) as Uint8Array | Uint16Array | Float32Array;
+}

package/src/classic/format-utils.ts

@@ -0,0 +1,43 @@
+import {assert} from '@luma.gl/api';
+import {GL} from '@luma.gl/constants';
+
+// Returns number of components in a specific readPixels WebGL format
+export function glFormatToComponents(format) {
+  switch (format) {
+    case GL.ALPHA:
+    case GL.R32F:
+    case GL.RED:
+      return 1;
+    case GL.RG32F:
+    case GL.RG:
+      return 2;
+    case GL.RGB:
+    case GL.RGB32F:
+      return 3;
+    case GL.RGBA:
+    case GL.RGBA32F:
+      return 4;
+    // TODO: Add support for additional WebGL2 formats
+    default:
+      assert(false);
+      return 0;
+  }
+}
+
+// Return byte count for given readPixels WebGL type
+export function glTypeToBytes(type) {
+  switch (type) {
+    case GL.UNSIGNED_BYTE:
+      return 1;
+    case GL.UNSIGNED_SHORT_5_6_5:
+    case GL.UNSIGNED_SHORT_4_4_4_4:
+    case GL.UNSIGNED_SHORT_5_5_5_1:
+      return 2;
+    case GL.FLOAT:
+      return 4;
+    // TODO: Add support for additional WebGL2 types
+    default:
+      assert(false);
+      return 0;
+  }
+}