@luma.gl/webgl 9.3.0-alpha.4 → 9.3.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.3.0-alpha.4",
+  "version": "9.3.0-alpha.6",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/core": "9.2.0-alpha.6"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.3.0-alpha.4",
+    "@luma.gl/constants": "9.3.0-alpha.6",
     "@math.gl/types": "^4.1.0",
     "@probe.gl/env": "^4.1.1"
   },
-  "gitHead": "7486e7b0377fb6ab961b4499828681bede60f3b1"
+  "gitHead": "59fda5480c4d0bb3d64545d4621175221f2b6c7c"
 }

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

@@ -32,32 +32,44 @@ const X_ATC = 'WEBGL_compressed_texture_atc';
 const EXT_texture_norm16 = 'EXT_texture_norm16';
 const EXT_render_snorm = 'EXT_render_snorm';
 const EXT_color_buffer_float = 'EXT_color_buffer_float';
+const SNORM8_COLOR_RENDERABLE: DeviceFeature = 'snorm8-renderable-webgl';
+const NORM16_COLOR_RENDERABLE: DeviceFeature = 'norm16-renderable-webgl';
+const SNORM16_COLOR_RENDERABLE: DeviceFeature = 'snorm16-renderable-webgl';
+const FLOAT16_COLOR_RENDERABLE: DeviceFeature = 'float16-renderable-webgl';
+const FLOAT32_COLOR_RENDERABLE: DeviceFeature = 'float32-renderable-webgl';
+const RGB9E5UFLOAT_COLOR_RENDERABLE: DeviceFeature = 'rgb9e5ufloat-renderable-webgl';
+
+type TextureFeatureDefinition = {
+  extensions?: string[];
+  features?: DeviceFeature[];
+};
 
 // prettier-ignore
-export const TEXTURE_FEATURES: Partial<Record<DeviceFeature, string[]>> = {
-  'float32-renderable-webgl': ['EXT_color_buffer_float'],
-  'float16-renderable-webgl': ['EXT_color_buffer_half_float'],
-  'rgb9e5ufloat-renderable-webgl': ['WEBGL_render_shared_exponent'],
-  'snorm8-renderable-webgl': [EXT_render_snorm],
-  'norm16-renderable-webgl': [EXT_texture_norm16],
-  'snorm16-renderable-webgl': [EXT_texture_norm16, EXT_render_snorm],
-
-  'float32-filterable': ['OES_texture_float_linear'],
-  'float16-filterable-webgl': ['OES_texture_half_float_linear'],
-  'texture-filterable-anisotropic-webgl': ['EXT_texture_filter_anisotropic'],
-
-  'texture-blend-float-webgl': ['EXT_float_blend'],
-
-  'texture-compression-bc': [X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC],
+export const TEXTURE_FEATURES: Partial<Record<DeviceFeature, TextureFeatureDefinition>> = {
+  'float32-renderable-webgl': {extensions: [EXT_color_buffer_float]},
+  'float16-renderable-webgl': {extensions: ['EXT_color_buffer_half_float']},
+  'rgb9e5ufloat-renderable-webgl': {extensions: ['WEBGL_render_shared_exponent']},
+  'snorm8-renderable-webgl': {extensions: [EXT_render_snorm]},
+  'norm16-webgl': {extensions: [EXT_texture_norm16]},
+  'norm16-renderable-webgl': {features: ['norm16-webgl']},
+  'snorm16-renderable-webgl': {features: ['norm16-webgl'], extensions: [EXT_render_snorm]},
+
+  'float32-filterable': {extensions: ['OES_texture_float_linear']},
+  'float16-filterable-webgl': {extensions: ['OES_texture_half_float_linear']},
+  'texture-filterable-anisotropic-webgl': {extensions: ['EXT_texture_filter_anisotropic']},
+
+  'texture-blend-float-webgl': {extensions: ['EXT_float_blend']},
+
+  'texture-compression-bc': {extensions: [X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC]},
   // 'texture-compression-bc3-srgb-webgl': [X_S3TC_SRGB],
   // 'texture-compression-bc3-webgl': [X_S3TC],
-  'texture-compression-bc5-webgl': [X_RGTC],
-  'texture-compression-bc7-webgl': [X_BPTC],
-  'texture-compression-etc2': [X_ETC2],
-  'texture-compression-astc': [X_ASTC],
-  'texture-compression-etc1-webgl': [X_ETC1],
-  'texture-compression-pvrtc-webgl': [X_PVRTC],
-  'texture-compression-atc-webgl': [X_ATC]
+  'texture-compression-bc5-webgl': {extensions: [X_RGTC]},
+  'texture-compression-bc7-webgl': {extensions: [X_BPTC]},
+  'texture-compression-etc2': {extensions: [X_ETC2]},
+  'texture-compression-astc': {extensions: [X_ASTC]},
+  'texture-compression-etc1-webgl': {extensions: [X_ETC1]},
+  'texture-compression-pvrtc-webgl': {extensions: [X_PVRTC]},
+  'texture-compression-atc-webgl': {extensions: [X_ATC]}
 };
 
 export function isTextureFeature(feature: DeviceFeature): boolean {
@@ -70,8 +82,36 @@ export function checkTextureFeature(
   feature: DeviceFeature,
   extensions: GLExtensions
 ): boolean {
-  const textureExtensions = TEXTURE_FEATURES[feature] || [];
-  return textureExtensions.every(extension => getWebGLExtension(gl, extension, extensions));
+  return hasTextureFeature(gl, feature, extensions, new Set<DeviceFeature>());
+}
+
+function hasTextureFeature(
+  gl: WebGL2RenderingContext,
+  feature: DeviceFeature,
+  extensions: GLExtensions,
+  seenFeatures: Set<DeviceFeature>
+): boolean {
+  const definition = TEXTURE_FEATURES[feature];
+  if (!definition) {
+    return false;
+  }
+
+  if (seenFeatures.has(feature)) {
+    return false;
+  }
+
+  seenFeatures.add(feature);
+  const hasDependentFeatures = (definition.features || []).every(dependentFeature =>
+    hasTextureFeature(gl, dependentFeature, extensions, seenFeatures)
+  );
+  seenFeatures.delete(feature);
+  if (!hasDependentFeatures) {
+    return false;
+  }
+
+  return (definition.extensions || []).every(extension =>
+    Boolean(getWebGLExtension(gl, extension, extensions))
+  );
 }
 
 // TEXTURE FORMATS
@@ -81,6 +121,8 @@ type WebGLFormatInfo = {
   gl?: GL;
   /** compressed */
   x?: string;
+  /** color-renderable capability gate. false means never color-renderable on WebGL. */
+  r?: DeviceFeature | false;
   types?: GLPixelType[];
   dataFormat?: GLTexelDataFormat;
   /** if depthTexture is set this is a depth/stencil format that can be set to a texture  */
@@ -99,21 +141,21 @@ type WebGLFormatInfo = {
 export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   // 8-bit formats
   'r8unorm': {gl: GL.R8, rb: true},
-  'r8snorm': {gl: GL.R8_SNORM},
+  'r8snorm': {gl: GL.R8_SNORM, r: SNORM8_COLOR_RENDERABLE},
   'r8uint': {gl: GL.R8UI, rb: true},
   'r8sint': {gl: GL.R8I, rb: true},
 
   // 16-bit formats
   'rg8unorm': {gl: GL.RG8, rb: true},
-  'rg8snorm': {gl: GL.RG8_SNORM},
+  'rg8snorm': {gl: GL.RG8_SNORM, r: SNORM8_COLOR_RENDERABLE},
   'rg8uint': {gl: GL.RG8UI, rb: true},
   'rg8sint': {gl: GL.RG8I, rb: true},
 
   'r16uint': {gl: GL.R16UI, rb: true},
   'r16sint': {gl: GL.R16I, rb: true},
-  'r16float': {gl: GL.R16F, rb: true},
-  'r16unorm': {gl: GL.R16_EXT, rb: true},
-  'r16snorm': {gl: GL.R16_SNORM_EXT},
+  'r16float': {gl: GL.R16F, rb: true, r: FLOAT16_COLOR_RENDERABLE},
+  'r16unorm': {gl: GL.R16_EXT, rb: true, r: NORM16_COLOR_RENDERABLE},
+  'r16snorm': {gl: GL.R16_SNORM_EXT, r: SNORM16_COLOR_RENDERABLE},
 
   // Packed 16-bit formats
   'rgba4unorm-webgl': {gl: GL.RGBA4, rb: true},
@@ -127,7 +169,7 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   // 32-bit formats
   'rgba8unorm': {gl: GL.RGBA8},
   'rgba8unorm-srgb': {gl: GL.SRGB8_ALPHA8},
-  'rgba8snorm': {gl: GL.RGBA8_SNORM},
+  'rgba8snorm': {gl: GL.RGBA8_SNORM, r: SNORM8_COLOR_RENDERABLE},
   'rgba8uint': {gl: GL.RGBA8UI},
   'rgba8sint': {gl: GL.RGBA8I},
   // reverse colors, webgpu only
@@ -136,41 +178,41 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
 
   'rg16uint': {gl: GL.RG16UI},
   'rg16sint': {gl: GL.RG16I},
-  'rg16float': {gl: GL.RG16F, rb: true},
-  'rg16unorm': {gl: GL.RG16_EXT},
-  'rg16snorm': {gl: GL.RG16_SNORM_EXT},
+  'rg16float': {gl: GL.RG16F, rb: true, r: FLOAT16_COLOR_RENDERABLE},
+  'rg16unorm': {gl: GL.RG16_EXT, r: NORM16_COLOR_RENDERABLE},
+  'rg16snorm': {gl: GL.RG16_SNORM_EXT, r: SNORM16_COLOR_RENDERABLE},
 
   'r32uint': {gl: GL.R32UI, rb: true},
   'r32sint': {gl: GL.R32I, rb: true},
-  'r32float': {gl: GL.R32F},
+  'r32float': {gl: GL.R32F, r: FLOAT32_COLOR_RENDERABLE},
 
   // Packed 32-bit formats
-  'rgb9e5ufloat': {gl: GL.RGB9_E5}, // , filter: true},
+  'rgb9e5ufloat': {gl: GL.RGB9_E5, r: RGB9E5UFLOAT_COLOR_RENDERABLE}, // , filter: true},
   '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
+  'rgb16unorm-webgl': {gl: GL.RGB16_EXT, r: false}, // rgb not renderable
+  'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT, r: false}, // rgb not renderable
 
   // 64-bit formats
   'rg32uint': {gl: GL.RG32UI, rb: true},
   'rg32sint': {gl: GL.RG32I, rb: true},
-  'rg32float': {gl: GL.RG32F, rb: true},
+  'rg32float': {gl: GL.RG32F, rb: true, r: FLOAT32_COLOR_RENDERABLE},
   'rgba16uint': {gl: GL.RGBA16UI, rb: true},
   'rgba16sint': {gl: GL.RGBA16I, rb: true},
-  'rgba16float': {gl: GL.RGBA16F},
-  'rgba16unorm': {gl: GL.RGBA16_EXT, rb: true},
-  'rgba16snorm': {gl: GL.RGBA16_SNORM_EXT},
+  'rgba16float': {gl: GL.RGBA16F, r: FLOAT16_COLOR_RENDERABLE},
+  'rgba16unorm': {gl: GL.RGBA16_EXT, rb: true, r: NORM16_COLOR_RENDERABLE},
+  'rgba16snorm': {gl: GL.RGBA16_SNORM_EXT, r: SNORM16_COLOR_RENDERABLE},
 
   // 96-bit formats (deprecated!)
-  'rgb32float-webgl': {gl: GL.RGB32F, x: EXT_color_buffer_float, dataFormat: GL.RGB, types: [GL.FLOAT]},
+  'rgb32float-webgl': {gl: GL.RGB32F, x: EXT_color_buffer_float, r: FLOAT32_COLOR_RENDERABLE, dataFormat: GL.RGB, types: [GL.FLOAT]},
 
   // 128-bit formats
   'rgba32uint': {gl: GL.RGBA32UI, rb: true},
   'rgba32sint': {gl: GL.RGBA32I, rb: true},
-  'rgba32float': {gl: GL.RGBA32F, rb: true},
+  'rgba32float': {gl: GL.RGBA32F, rb: true, r: FLOAT32_COLOR_RENDERABLE},
 
   // Depth and stencil formats
   'stencil8': {gl: GL.STENCIL_INDEX8, rb: true}, // 8 stencil bits
@@ -237,8 +279,8 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'astc-8x6-unorm-srgb': {gl: GL.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR},
   'astc-8x8-unorm': {gl: GL.COMPRESSED_RGBA_ASTC_8x8_KHR},
   'astc-8x8-unorm-srgb': {gl: GL.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR},
-  'astc-10x5-unorm': {gl: GL.COMPRESSED_RGBA_ASTC_10x10_KHR},
-  'astc-10x5-unorm-srgb': {gl: GL.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR},
+  'astc-10x5-unorm': {gl: GL.COMPRESSED_RGBA_ASTC_10x5_KHR},
+  'astc-10x5-unorm-srgb': {gl: GL.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR},
   'astc-10x6-unorm': {gl: GL.COMPRESSED_RGBA_ASTC_10x6_KHR},
   'astc-10x6-unorm-srgb': {gl: GL.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR},
   'astc-10x8-unorm': {gl: GL.COMPRESSED_RGBA_ASTC_10x8_KHR},
@@ -254,7 +296,7 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
 
   'pvrtc-rgb4unorm-webgl': {gl: GL.COMPRESSED_RGB_PVRTC_4BPPV1_IMG},
   'pvrtc-rgba4unorm-webgl': {gl: GL.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG},
-  'pvrtc-rbg2unorm-webgl': {gl: GL.COMPRESSED_RGB_PVRTC_2BPPV1_IMG},
+  'pvrtc-rgb2unorm-webgl': {gl: GL.COMPRESSED_RGB_PVRTC_2BPPV1_IMG},
   'pvrtc-rgba2unorm-webgl': {gl: GL.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG},
 
   // WEBGL_compressed_texture_etc1
@@ -308,12 +350,29 @@ export function getTextureFormatCapabilitiesWebGL(
     supported = supported && Boolean(getWebGLExtension(gl, webglFormatInfo.x, extensions));
   }
 
+  // WebGL2 exposes STENCIL_INDEX8 for renderbuffers, but standalone stencil textures are not
+  // valid texture storage targets. Report them as unsupported texture formats to avoid invalid
+  // constructor paths and misleading capability checks.
+  if (formatSupport.format === 'stencil8') {
+    supported = false;
+  }
+
+  const renderFeatureSupported =
+    webglFormatInfo?.r === false
+      ? false
+      : webglFormatInfo?.r === undefined || checkTextureFeature(gl, webglFormatInfo.r, extensions);
+  const renderable =
+    supported &&
+    formatSupport.render &&
+    renderFeatureSupported &&
+    isColorRenderableTextureFormat(gl, formatSupport.format, extensions);
+
   return {
     format: formatSupport.format,
     // @ts-ignore
     create: supported && formatSupport.create,
     // @ts-ignore
-    render: supported && formatSupport.render,
+    render: renderable,
     // @ts-ignore
     filter: supported && formatSupport.filter,
     // @ts-ignore
@@ -323,6 +382,59 @@ export function getTextureFormatCapabilitiesWebGL(
   };
 }
 
+function isColorRenderableTextureFormat(
+  gl: WebGL2RenderingContext,
+  format: TextureFormat,
+  extensions: GLExtensions
+): boolean {
+  const webglFormatInfo = WEBGL_TEXTURE_FORMATS[format];
+  const internalFormat = webglFormatInfo?.gl;
+  if (internalFormat === undefined) {
+    return false;
+  }
+
+  if (webglFormatInfo?.x && !getWebGLExtension(gl, webglFormatInfo.x, extensions)) {
+    return false;
+  }
+
+  const previousTexture = gl.getParameter(GL.TEXTURE_BINDING_2D) as WebGLTexture | null;
+  const previousFramebuffer = gl.getParameter(GL.FRAMEBUFFER_BINDING) as WebGLFramebuffer | null;
+  const texture = gl.createTexture();
+  const framebuffer = gl.createFramebuffer();
+  if (!texture || !framebuffer) {
+    return false;
+  }
+
+  // Isolate the probe from any prior driver errors so the result reflects only this format.
+  const noError = Number(GL.NO_ERROR);
+  let error = Number(gl.getError());
+  while (error !== noError) {
+    error = gl.getError();
+  }
+
+  let renderable = false;
+  try {
+    gl.bindTexture(GL.TEXTURE_2D, texture);
+    gl.texStorage2D(GL.TEXTURE_2D, 1, internalFormat, 1, 1);
+    if (Number(gl.getError()) !== noError) {
+      return false;
+    }
+
+    gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture, 0);
+    renderable =
+      Number(gl.checkFramebufferStatus(GL.FRAMEBUFFER)) === Number(GL.FRAMEBUFFER_COMPLETE) &&
+      Number(gl.getError()) === noError;
+  } finally {
+    gl.bindFramebuffer(GL.FRAMEBUFFER, previousFramebuffer);
+    gl.deleteFramebuffer(framebuffer);
+    gl.bindTexture(GL.TEXTURE_2D, previousTexture);
+    gl.deleteTexture(texture);
+  }
+
+  return renderable;
+}
+
 /** Get parameters necessary to work with format in WebGL: internalFormat, dataFormat, type, compressed, */
 export function getTextureFormatWebGL(format: TextureFormat): {
   internalFormat: GL;

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

@@ -21,13 +21,12 @@ import {
 const WEBGL_FEATURES: Partial<Record<DeviceFeature, boolean | string>> = {
   // optional WebGPU features
   'depth-clip-control': 'EXT_depth_clamp', // TODO these seem subtly different
-  // 'timestamp-query' // GPUQueryType "timestamp-query"
+  'timestamp-query': 'EXT_disjoint_timer_query_webgl2',
   // "indirect-first-instance"
   // Textures are handled by getTextureFeatures()
   // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
 
   // optional WebGL features
-  'timer-query-webgl': 'EXT_disjoint_timer_query_webgl2',
   'compilation-status-async-webgl': 'KHR_parallel_shader_compile',
   'polygon-mode-webgl': 'WEBGL_polygon_mode',
   'provoking-vertex-webgl': 'WEBGL_provoking_vertex',

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

@@ -99,6 +99,8 @@ function identifyGPUType(
 
   const gpuVendor = identifyGPUVendor(vendor, renderer);
   switch (gpuVendor) {
+    case 'apple':
+      return isAppleSiliconGPU(vendor, renderer) ? 'integrated' : 'unknown';
     case 'intel':
       return 'integrated';
     case 'software':
@@ -109,3 +111,7 @@ function identifyGPUType(
       return 'discrete';
   }
 }
+
+function isAppleSiliconGPU(vendor: string, renderer: string): boolean {
+  return /Apple (M\d|A\d|GPU)/i.test(`${vendor} ${renderer}`);
+}

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

@@ -253,26 +253,25 @@ function readUniformBlocks(
     // const uniformRowMajor = gl.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
       const uniformIndex = uniformIndices[i];
-      if (uniformIndex === undefined) {
-        continue;
+      if (uniformIndex !== undefined) {
+        const activeInfo = gl.getActiveUniform(program, uniformIndex);
+        if (!activeInfo) {
+          throw new Error('activeInfo');
+        }
+
+        const format = convertGLUniformTypeToShaderVariableType(uniformType[i]);
+
+        blockInfo.uniforms.push({
+          name: activeInfo.name,
+          format,
+          type: uniformType[i],
+          arrayLength: uniformArrayLength[i],
+          byteOffset: uniformOffset[i],
+          byteStride: uniformStride[i]
+          // matrixStride: uniformStride[i],
+          // rowMajor: uniformRowMajor[i]
+        });
       }
-      const activeInfo = gl.getActiveUniform(program, uniformIndex);
-      if (!activeInfo) {
-        throw new Error('activeInfo');
-      }
-
-      const format = convertGLUniformTypeToShaderVariableType(uniformType[i]);
-
-      blockInfo.uniforms.push({
-        name: activeInfo.name,
-        format,
-        type: uniformType[i],
-        arrayLength: uniformArrayLength[i],
-        byteOffset: uniformOffset[i],
-        byteStride: uniformStride[i]
-        // matrixStride: uniformStride[i],
-        // rowMajor: uniformRowMajor[i]
-      });
     }
 
     uniformBlocks.push(blockInfo);

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

@@ -56,8 +56,12 @@ export class WEBGLBuffer extends Buffer {
   override destroy(): void {
     if (!this.destroyed && this.handle) {
       this.removeStats();
-      this.trackDeallocatedMemory();
-      this.gl.deleteBuffer(this.handle);
+      if (!this.props.handle) {
+        this.trackDeallocatedMemory();
+        this.gl.deleteBuffer(this.handle);
+      } else {
+        this.trackDeallocatedReferencedMemory('Buffer');
+      }
       this.destroyed = true;
       // @ts-expect-error
       this.handle = null;
@@ -81,7 +85,11 @@ export class WEBGLBuffer extends Buffer {
     this.byteLength = byteLength;
 
     this._setDebugData(data, byteOffset, byteLength);
-    this.trackAllocatedMemory(byteLength);
+    if (!this.props.handle) {
+      this.trackAllocatedMemory(byteLength);
+    } else {
+      this.trackReferencedMemory(byteLength, 'Buffer');
+    }
   }
 
   // Allocate a GPU buffer of specified size.
@@ -107,7 +115,11 @@ export class WEBGLBuffer extends Buffer {
     this.byteLength = byteLength;
 
     this._setDebugData(null, 0, byteLength);
-    this.trackAllocatedMemory(byteLength);
+    if (!this.props.handle) {
+      this.trackAllocatedMemory(byteLength);
+    } else {
+      this.trackReferencedMemory(byteLength, 'Buffer');
+    }
 
     return this;
   }

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

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {
+  type CommandBufferProps,
   type CopyBufferToBufferOptions,
   type CopyBufferToTextureOptions,
   type CopyTextureToBufferOptions,
@@ -65,8 +66,8 @@ export class WEBGLCommandBuffer extends CommandBuffer {
   readonly handle = null;
   commands: Command[] = [];
 
-  constructor(device: WebGLDevice) {
-    super(device, {});
+  constructor(device: WebGLDevice, props: CommandBufferProps = {}) {
+    super(device, props);
     this.device = device;
   }
 

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CommandEncoder, CommandEncoderProps} from '@luma.gl/core';
+import {CommandBufferProps, CommandEncoder, CommandEncoderProps} from '@luma.gl/core';
 import type {
   RenderPassProps,
   ComputePass,
@@ -20,6 +20,7 @@ import type {
 import {WEBGLCommandBuffer} from './webgl-command-buffer';
 import {WEBGLRenderPass} from './webgl-render-pass';
 import {WebGLDevice} from '../webgl-device';
+import {WEBGLQuerySet} from './webgl-query-set';
 
 export class WEBGLCommandEncoder extends CommandEncoder {
   readonly device: WebGLDevice;
@@ -30,20 +31,29 @@ export class WEBGLCommandEncoder extends CommandEncoder {
   constructor(device: WebGLDevice, props: CommandEncoderProps) {
     super(device, props);
     this.device = device;
-    this.commandBuffer = new WEBGLCommandBuffer(device);
+    this.commandBuffer = new WEBGLCommandBuffer(device, {
+      id: `${this.props.id}-command-buffer`
+    });
   }
 
-  override destroy(): void {}
+  override destroy(): void {
+    this.destroyResource();
+  }
 
-  override finish(): WEBGLCommandBuffer {
+  override finish(props?: CommandBufferProps): WEBGLCommandBuffer {
+    if (props?.id && this.commandBuffer.id !== props.id) {
+      this.commandBuffer.id = props.id;
+      this.commandBuffer.props.id = props.id;
+    }
+    this.destroy();
     return this.commandBuffer;
   }
 
-  beginRenderPass(props: RenderPassProps): WEBGLRenderPass {
-    return new WEBGLRenderPass(this.device, props);
+  beginRenderPass(props: RenderPassProps = {}): WEBGLRenderPass {
+    return new WEBGLRenderPass(this.device, this._applyTimeProfilingToPassProps(props));
   }
 
-  beginComputePass(props: ComputePassProps): ComputePass {
+  beginComputePass(props: ComputePassProps = {}): ComputePass {
     throw new Error('ComputePass not supported in WebGL');
   }
 
@@ -81,4 +91,9 @@ export class WEBGLCommandEncoder extends CommandEncoder {
       destinationOffset?: number;
     }
   ): void {}
+
+  writeTimestamp(querySet: QuerySet, queryIndex: number): void {
+    const webglQuerySet = querySet as WEBGLQuerySet;
+    webglQuerySet.writeTimestamp(queryIndex);
+  }
 }