@luma.gl/webgl 9.2.0-alpha.1 → 9.2.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.2.0-alpha.1",
+  "version": "9.2.0-alpha.3",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -40,12 +40,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "9.2.0-alpha.0"
+    "@luma.gl/core": "9.2.0-alpha.1"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.2.0-alpha.1",
+    "@luma.gl/constants": "9.2.0-alpha.3",
     "@math.gl/types": "^4.1.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "d6d2f791f2ce96f4b5acb68e05faea62c35440fb"
+  "gitHead": "16fcea2620b1fd45cb744de730c2622a724cc15b"
 }

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

@@ -99,8 +99,19 @@ function convertMinFilterMode(
     case 'none':
       return convertMaxFilterMode(minFilter);
     case 'nearest':
-      return minFilter === 'nearest' ? GL.NEAREST_MIPMAP_NEAREST : GL.NEAREST_MIPMAP_LINEAR;
+      switch (minFilter) {
+        case 'nearest':
+          return GL.NEAREST_MIPMAP_NEAREST;
+        case 'linear':
+          return GL.LINEAR_MIPMAP_NEAREST;
+      }
+      break;
     case 'linear':
-      return minFilter === 'nearest' ? GL.LINEAR_MIPMAP_NEAREST : GL.LINEAR_MIPMAP_LINEAR;
+      switch (minFilter) {
+        case 'nearest':
+          return GL.NEAREST_MIPMAP_LINEAR;
+        case 'linear':
+          return GL.LINEAR_MIPMAP_LINEAR;
+      }
   }
 }

package/src/adapter/converters/webgl-shadertypes.ts

@@ -48,10 +48,9 @@ export function getVertexFormatFromGL(type: GLDataType, components: 1 | 2 | 3 |
   const base = getVertexTypeFromGL(type);
   // prettier-ignore
   switch (components) {
-    // @ts-expect-error TODO deal with lack of formats
     case 1: return base;
     case 2: return `${base}x2`;
-    // @ts-expect-error TODO deal with lack of formats
+    // @ts-expect-error - deal with lack of "unaligned" formats
     case 3: return `${base}x3`;
     case 4: return `${base}x4`;
   }

package/src/adapter/converters/webgl-texture-table.ts

@@ -8,7 +8,7 @@ import type {
   TextureFormatCapabilities,
   DeviceTextureFormatCapabilities
 } from '@luma.gl/core';
-import {getTextureFormatInfo} from '@luma.gl/core';
+import {textureFormatDecoder} from '@luma.gl/core';
 import {GL, GLPixelType, GLExtensions, GLTexelDataFormat} from '@luma.gl/constants';
 import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
 import {getGLFromVertexType} from './webgl-vertex-formats';
@@ -112,8 +112,8 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'r16uint': {gl: GL.R16UI, rb: true},
   'r16sint': {gl: GL.R16I, rb: true},
   'r16float': {gl: GL.R16F, rb: true},
-  'r16unorm-webgl': {gl: GL.R16_EXT, rb: true},
-  'r16snorm-webgl': {gl: GL.R16_SNORM_EXT},
+  'r16unorm': {gl: GL.R16_EXT, rb: true},
+  'r16snorm': {gl: GL.R16_SNORM_EXT},
 
   // Packed 16-bit formats
   'rgba4unorm-webgl': {gl: GL.RGBA4, rb: true},
@@ -124,7 +124,7 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'rgb8unorm-webgl': {gl: GL.RGB8},
   'rgb8snorm-webgl': {gl: GL.RGB8_SNORM},
 
-  // 32-bit formats  
+  // 32-bit formats
   'rgba8unorm': {gl: GL.RGBA8},
   'rgba8unorm-srgb': {gl: GL.SRGB8_ALPHA8},
   'rgba8snorm': {gl: GL.RGBA8_SNORM},
@@ -137,8 +137,8 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'rg16uint': {gl: GL.RG16UI},
   'rg16sint': {gl: GL.RG16I},
   'rg16float': {gl: GL.RG16F, rb: true},
-  'rg16unorm-webgl': {gl: GL.RG16_EXT},
-  'rg16snorm-webgl': {gl: GL.RG16_SNORM_EXT},
+  'rg16unorm': {gl: GL.RG16_EXT},
+  'rg16snorm': {gl: GL.RG16_SNORM_EXT},
 
   'r32uint': {gl: GL.R32UI, rb: true},
   'r32sint': {gl: GL.R32I, rb: true},
@@ -149,7 +149,7 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, rb: true},
   'rgb10a2unorm': {gl: GL.RGB10_A2, rb: true},
   'rgb10a2uint': {gl: GL.RGB10_A2UI, rb: true},
-  
+
   // 48-bit formats
   'rgb16unorm-webgl': {gl: GL.RGB16_EXT}, // rgb not renderable
   'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT}, // rgb not renderable
@@ -161,12 +161,12 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'rgba16uint': {gl: GL.RGBA16UI, rb: true},
   'rgba16sint': {gl: GL.RGBA16I, rb: true},
   'rgba16float': {gl: GL.RGBA16F},
-  'rgba16unorm-webgl': {gl: GL.RGBA16_EXT, rb: true},
-  'rgba16snorm-webgl': {gl: GL.RGBA16_SNORM_EXT},
+  'rgba16unorm': {gl: GL.RGBA16_EXT, rb: true},
+  'rgba16snorm': {gl: GL.RGBA16_SNORM_EXT},
 
   // 96-bit formats (deprecated!)
   'rgb32float-webgl': {gl: GL.RGB32F, x: EXT_color_buffer_float, dataFormat: GL.RGB, types: [GL.FLOAT]},
-  
+
   // 128-bit formats
   'rgba32uint': {gl: GL.RGBA32UI, rb: true},
   'rgba32sint': {gl: GL.RGBA32I, rb: true},
@@ -332,7 +332,13 @@ export function getTextureFormatWebGL(format: TextureFormat): {
 } {
   const formatData = WEBGL_TEXTURE_FORMATS[format];
   const webglFormat = convertTextureFormatToGL(format);
-  const decoded = getTextureFormatInfo(format);
+  const decoded = textureFormatDecoder.getInfo(format);
+
+  if (decoded.compressed) {
+    // TODO: Unclear whether this is always valid, this may be why ETC2 RGBA8 fails.
+    formatData.dataFormat = webglFormat as GLTexelDataFormat;
+  }
+
   return {
     internalFormat: webglFormat,
     format:
@@ -349,7 +355,7 @@ export function getTextureFormatWebGL(format: TextureFormat): {
 export function getDepthStencilAttachmentWebGL(
   format: TextureFormat
 ): GL.DEPTH_ATTACHMENT | GL.STENCIL_ATTACHMENT | GL.DEPTH_STENCIL_ATTACHMENT {
-  const formatInfo = getTextureFormatInfo(format);
+  const formatInfo = textureFormatDecoder.getInfo(format);
   switch (formatInfo.attachment) {
     case 'depth':
       return GL.DEPTH_ATTACHMENT;
@@ -364,8 +370,8 @@ export function getDepthStencilAttachmentWebGL(
 
 /** TODO - VERY roundabout legacy way of calculating bytes per pixel */
 export function getTextureFormatBytesPerPixel(format: TextureFormat): number {
-  const formatInfo = getTextureFormatInfo(format);
-  return formatInfo.bytesPerPixel as number;
+  const formatInfo = textureFormatDecoder.getInfo(format);
+  return formatInfo.bytesPerPixel;
 }
 
 // DATA TYPE HELPERS

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

@@ -20,10 +20,9 @@ export function getVertexFormatFromGL(type: GLDataType, components: 1 | 2 | 3 |
   const base = getVertexTypeFromGL(type);
   // prettier-ignore
   switch (components) {
-    // @ts-expect-error TODO deal with lack of formats
     case 1: return base;
     case 2: return `${base}x2`;
-    // @ts-expect-error TODO deal with lack of formats
+    // @ts-expect-error TODO deal with lack of "unaligned" formats
     case 3: return `${base}x3`;
     case 4: return `${base}x4`;
   }

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

@@ -5,7 +5,7 @@
 // @ts-nocheck This file will be deleted in upcoming refactor
 
 import type {Buffer, Texture, FramebufferProps} from '@luma.gl/core';
-import {Framebuffer, getTypedArrayFromDataType, getDataTypeFromTypedArray} from '@luma.gl/core';
+import {Framebuffer, getTypedArrayConstructor, getDataType} from '@luma.gl/core';
 import {
   GL,
   GLTextureTarget,
@@ -156,227 +156,6 @@ export function getWebGLCubeFaceTarget(
 ): GLTextureTarget | GLTextureCubeMapTarget {
   return dimension === 'cube' ? GL.TEXTURE_CUBE_MAP_POSITIVE_X + level : glTarget;
 }
-
-// texImage methods
-
-/**
- * Clear a texture mip level.
- * Wrapper for the messy WebGL texture API
- *
-export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextureOptions): void {
-  const {dimension, width, height, depth = 0, mipLevel = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage3D(glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, null);
-      } else {
-        // prettier-ignore
-        gl.texImage3D( glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, glFormat, glType, null);
-      }
-      break;
-
-    case '2d':
-    case 'cube':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, null);
-      } else {
-        // prettier-ignore
-        gl.texImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, glFormat, glType, null);
-      }
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-}
-  */
-
-/**
- * Set a texture mip level to the contents of an external image.
- * Wrapper for the messy WebGL texture API
- * @note Corresponds to WebGPU device.queue.copyExternalImageToTexture()
- *
-export function setMipLevelFromExternalImage(
-  gl: WebGL2RenderingContext,
-  image: ExternalImage,
-  options: WebGLSetTextureOptions
-): void {
-  const {dimension, width, height, depth = 0, level = 0} = options;
-  const {glInternalFormat, glType} = options;
-
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  // TODO - we can't change texture width (due to WebGPU limitations) -
-  // and the width/heigh of an external image is implicit, so why do we need to extract it?
-  // So what width height do we supply? The image size or the texture size?
-  // const {width, height} = Texture.getExternalImageSize(image);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      // prettier-ignore
-      gl.texImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, glInternalFormat, glType, image);
-      break;
-
-    case '2d':
-    case 'cube':
-      // prettier-ignore
-      gl.texImage2D(glTarget, level, glInternalFormat, width, height, BORDER, glInternalFormat, glType, image);
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-}
-
-/**
- * Set a texture mip level from CPU memory
- * Wrapper for the messy WebGL texture API
- * @note Not available (directly) in WebGPU
- *
-export function setMipLevelFromTypedArray(
-  gl: WebGL2RenderingContext,
-  data: TypedArray,
-  parameters: {},
-  options: {
-    dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-    height: number;
-    width: number;
-    depth?: number;
-    level?: number;
-    offset?: number;
-    glTarget: GLTextureTarget;
-    glInternalFormat: GL;
-    glFormat: GL;
-    glType: GL;
-    compressed?: boolean;
-  }
-): void {
-  const {dimension, width, height, depth = 0, level = 0, offset = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  withGLParameters(gl, parameters, () => {
-    switch (dimension) {
-      case '2d-array':
-      case '3d':
-        if (compressed) {
-          // prettier-ignore
-          gl.compressedTexImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, data);
-        } else {
-          // prettier-ignore
-          gl.texImage3D( glTarget, level, glInternalFormat, width, height, depth, BORDER, glFormat, glType, data);
-        }
-        break;
-
-      case '2d':
-        if (compressed) {
-          // prettier-ignore
-          gl.compressedTexImage2D(glTarget, level, glInternalFormat, width, height, BORDER, data);
-        } else {
-          // prettier-ignore
-          gl.texImage2D( glTarget, level, glInternalFormat, width, height, BORDER, glFormat, glType, data, offset);
-        }
-        break;
-
-      default:
-        throw new Error(dimension);
-    }
-  });
-}
-
-/**
-   * Set a texture level from CPU memory
-   * @note Not available (directly) in WebGPU
-  _setMipLevelFromTypedArray(
-    depth: number,
-    level: number,
-    data: TextureLevelData,
-    offset = 0,
-    parameters
-  ): void {
-    withGLParameters(this.gl, parameters, () => {
-      switch (this.props.dimension) {
-        case '2d-array':
-        case '3d':
-          if (this.compressed) {
-            // prettier-ignore
-            this.device.gl.compressedTexImage3D(this.glTarget, level, this.glInternalFormat, data.width, data.height, depth, BORDER, data.data);
-          } else {
-            // prettier-ignore
-            this.gl.texImage3D( this.glTarget, level, this.glInternalFormat, this.width, this.height, depth, BORDER, this.glFormat, this.glType, data.data);
-          }
-          break;
-
-        case '2d':
-          if (this.compressed) {
-            // prettier-ignore
-            this.device.gl.compressedTexImage2D(this.glTarget, level, this.glInternalFormat, data.width, data.height, BORDER, data.data);
-          } else {
-            // prettier-ignore
-            this.device.gl.texImage2D( this.glTarget, level, this.glInternalFormat, this.width, this.height, BORDER, this.glFormat, this.glType, data.data, offset);
-          }
-          break;
-
-        default:
-          throw new Error(this.props.dimension);
-      }
-    });
-  }
-
- * Set a texture level from a GPU buffer
- *
-export function setMipLevelFromGPUBuffer(
-  gl: WebGL2RenderingContext,
-  buffer: Buffer,
-  options: WebGLSetTextureOptions
-): void {
-  const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  const webglBuffer = buffer as WEBGLBuffer;
-  const imageSize = buffer.byteLength;
-
-  // In WebGL the source buffer is not a parameter. Instead it needs to be bound to a special bind point
-  gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, webglBuffer.handle);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, imageSize, byteOffset);
-      } else {
-        // prettier-ignore
-        gl.texImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, glFormat, glType, byteOffset);
-      }
-      break;
-
-    case '2d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage2D(glTarget, level, glInternalFormat, width, height, BORDER, imageSize, byteOffset);
-      } else {
-        // prettier-ignore
-        gl.texImage2D(glTarget, level, glInternalFormat, width, height, BORDER, glFormat, glType, byteOffset);
-      }
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-
-  gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
-}
-*/
 export type ReadPixelsToArrayOptions = {
   sourceX?: number;
   sourceY?: number;
@@ -453,7 +232,7 @@ export function readPixelsToArray(
   target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
 
   // Pixel array available, if necessary, deduce type from it.
-  const signedType = getDataTypeFromTypedArray(target);
+  const signedType = getDataType(target);
   sourceType = sourceType || convertDataTypeToGLDataType(signedType);
 
   // Note: luma.gl overrides bindFramebuffer so that we can reliably restore the previous framebuffer (this is the only function for which we do that)
@@ -705,7 +484,7 @@ function getPixelArray(
   // Allocate pixel array if not already available, using supplied type
   glType ||= GL.UNSIGNED_BYTE;
   const shaderType = convertGLDataTypeToDataType(glType);
-  const ArrayType = getTypedArrayFromDataType(shaderType);
+  const ArrayType = getTypedArrayConstructor(shaderType);
   const components = glFormatToComponents(glFormat);
   // TODO - check for composite type (components = 1).
   return new ArrayType(width * height * components) as Uint8Array | Uint16Array | Float32Array;

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {BufferProps} from '@luma.gl/core';
+import type {BufferMapCallback, BufferProps} from '@luma.gl/core';
 import {Buffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
@@ -52,7 +52,16 @@ export class WEBGLBuffer extends Buffer {
     }
   }
 
-  // PRIVATE METHODS
+  override destroy(): void {
+    if (!this.destroyed && this.handle) {
+      this.removeStats();
+      this.trackDeallocatedMemory();
+      this.gl.deleteBuffer(this.handle);
+      this.destroyed = true;
+      // @ts-expect-error
+      this.handle = null;
+    }
+  }
 
   /** Allocate a new buffer and initialize to contents of typed array */
   _initWithData(
@@ -102,18 +111,8 @@ export class WEBGLBuffer extends Buffer {
     return this;
   }
 
-  override destroy(): void {
-    if (!this.destroyed && this.handle) {
-      this.removeStats();
-      this.trackDeallocatedMemory();
-      this.gl.deleteBuffer(this.handle);
-      this.destroyed = true;
-      // @ts-expect-error
-      this.handle = null;
-    }
-  }
-
-  override write(data: ArrayBufferView, byteOffset: number = 0): void {
+  write(data: ArrayBufferLike | ArrayBufferView, byteOffset: number = 0): void {
+    const dataView = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
     const srcOffset = 0;
     const byteLength = undefined; // data.byteLength;
 
@@ -123,22 +122,41 @@ export class WEBGLBuffer extends Buffer {
     this.gl.bindBuffer(glTarget, this.handle);
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
-      this.gl.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
+      this.gl.bufferSubData(glTarget, byteOffset, dataView, srcOffset, byteLength);
     } else {
-      this.gl.bufferSubData(glTarget, byteOffset, data);
+      this.gl.bufferSubData(glTarget, byteOffset, dataView);
     }
     this.gl.bindBuffer(glTarget, null);
 
     this._setDebugData(data, byteOffset, data.byteLength);
   }
 
-  /** Asynchronously read data from the buffer */
-  override async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array> {
+  async mapAndWriteAsync(
+    callback: BufferMapCallback<void>,
+    byteOffset: number = 0,
+    byteLength: number = this.byteLength - byteOffset
+  ): Promise<void> {
+    const arrayBuffer = new ArrayBuffer(byteLength);
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await callback(arrayBuffer, 'copied');
+    this.write(arrayBuffer, byteOffset);
+  }
+
+  async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array<ArrayBuffer>> {
     return this.readSyncWebGL(byteOffset, byteLength);
   }
 
-  /** Synchronously read data from the buffer. WebGL only. */
-  override readSyncWebGL(byteOffset = 0, byteLength?: number): Uint8Array {
+  async mapAndReadAsync<T>(
+    callback: BufferMapCallback<T>,
+    byteOffset = 0,
+    byteLength?: number
+  ): Promise<T> {
+    const data = await this.readAsync(byteOffset, byteLength);
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    return await callback(data.buffer, 'copied');
+  }
+
+  readSyncWebGL(byteOffset = 0, byteLength?: number): Uint8Array<ArrayBuffer> {
     byteLength = byteLength ?? this.byteLength - byteOffset;
     const data = new Uint8Array(byteLength);
     const dstOffset = 0;

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

@@ -8,7 +8,7 @@ import type {
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
   // ClearTextureOptions,
-  // ReadTextureOptions
+  // TextureReadOptions
 } from '@luma.gl/core';
 import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
 import {
@@ -53,7 +53,7 @@ type ClearTextureCommand = {
 
 type ReadTextureCommand = {
   name: 'read-texture';
-  options: {}; // ReadTextureOptions;
+  options: {}; // TextureReadOptions;
 };
 
 type Command =
@@ -65,7 +65,8 @@ type Command =
   | ReadTextureCommand;
 
 export class WEBGLCommandBuffer extends CommandBuffer {
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
+  readonly handle = null;
   commands: Command[] = [];
 
   constructor(device: WebGLDevice) {

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

@@ -14,7 +14,7 @@ import type {
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
   // ClearTextureOptions,
-  // ReadTextureOptions,
+  // TextureReadOptions,
 } from '@luma.gl/core';
 
 import {WEBGLCommandBuffer} from './webgl-command-buffer';

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

@@ -14,9 +14,9 @@ export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer
 
 /** luma.gl Framebuffer, WebGL implementation  */
 export class WEBGLFramebuffer extends Framebuffer {
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
   gl: WebGL2RenderingContext;
-  handle: WebGLFramebuffer;
+  readonly handle: WebGLFramebuffer;
 
   colorAttachments: WEBGLTextureView[] = [];
   depthStencilAttachment: WEBGLTextureView | null = null;

package/src/adapter/resources/webgl-query-set.ts

@@ -7,8 +7,8 @@ import {WebGLDevice} from '../webgl-device';
  * Asynchronous queries for different kinds of information
  */
 export class WEBGLQuerySet extends QuerySet {
-  device: WebGLDevice;
-  handle: WebGLQuery;
+  readonly device: WebGLDevice;
+  readonly handle: WebGLQuery;
 
   target: number | null = null;
   _queryPending = false;

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

@@ -15,6 +15,7 @@ const COLOR_CHANNELS: NumberArray4 = [0x1, 0x2, 0x4, 0x8]; // GPUColorWrite RED,
 
 export class WEBGLRenderPass extends RenderPass {
   readonly device: WebGLDevice;
+  readonly handle = null;
 
   /** Parameters that should be applied before each draw call */
   glParameters: GLParameters = {};

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

@@ -36,9 +36,9 @@ const LOG_PROGRAM_PERF_PRIORITY = 4;
 /** Creates a new render pipeline */
 export class WEBGLRenderPipeline extends RenderPipeline {
   /** The WebGL device that created this render pipeline */
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
   /** Handle to underlying WebGL program */
-  handle: WebGLProgram;
+  readonly handle: WebGLProgram;
   /** vertex shader */
   vs: WEBGLShader;
   /** fragment shader */
@@ -344,7 +344,11 @@ export class WEBGLRenderPipeline extends RenderPipeline {
         }
 
         const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
-        this.device.reportError(new Error(`${errorType} during ${status}: ${linkErrorLog}`));
+        this.device.reportError(
+          new Error(`${errorType} during ${status}: ${linkErrorLog}`),
+          this
+        )();
+        this.device.debug();
     }
   }
 

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

@@ -147,10 +147,13 @@ export class WEBGLTexture extends Texture {
     const {glFormat, glType, compressed} = this;
     const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
 
-    const glParameters: GLValueParameters = {
-      [GL.UNPACK_ROW_LENGTH]: options.bytesPerRow,
-      [GL.UNPACK_IMAGE_HEIGHT]: options.rowsPerImage
-    };
+    // WebGL automatically ignores these for compressed textures, but we are careful
+    const glParameters: GLValueParameters = !this.compressed
+      ? {
+          [GL.UNPACK_ROW_LENGTH]: options.bytesPerRow,
+          [GL.UNPACK_IMAGE_HEIGHT]: options.rowsPerImage
+        }
+      : {};
 
     this.gl.bindTexture(glTarget, this.handle);
 
@@ -252,7 +255,7 @@ export class WEBGLTexture extends Texture {
    * Sets sampler parameters on texture
    */
   _setSamplerParameters(parameters: GLSamplerParameters): void {
-    log.log(1, `${this.id} sampler parameters`, this.device.getGLKeys(parameters))();
+    log.log(2, `${this.id} sampler parameters`, this.device.getGLKeys(parameters))();
 
     this.gl.bindTexture(this.glTarget, this.handle);