@luma.gl/webgl 9.2.5 → 9.3.0-alpha.10

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

@@ -6,7 +6,7 @@
 // Provides a function that enables simple checking of which WebGL features are
 
 import {DeviceFeature, DeviceFeatures} from '@luma.gl/core';
-import {GLExtensions} from '@luma.gl/constants';
+import {GLExtensions} from '@luma.gl/webgl/constants';
 import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
 import {
   isTextureFeature,
@@ -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

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {DeviceInfo} from '@luma.gl/core';
-import {GL, GLExtensions} from '@luma.gl/constants';
+import {GL, GLExtensions} from '@luma.gl/webgl/constants';
 import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
 
 /** @returns strings identifying the GPU vendor and driver. */
@@ -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/device-helpers/webgl-device-limits.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {DeviceLimits} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {GL} from '@luma.gl/webgl/constants';
 
 // prettier-ignore
 export class WebGLDeviceLimits extends DeviceLimits {

package/src/adapter/helpers/format-utils.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {GL} from '@luma.gl/constants';
+import {GL} from '@luma.gl/webgl/constants';
 
 // Returns number of components in a specific readPixels WebGL format
 export function glFormatToComponents(format: GL): 0 | 1 | 2 | 3 | 4 {

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

@@ -10,9 +10,9 @@ import type {
   VaryingBinding,
   AttributeShaderType
 } from '@luma.gl/core';
-import {getVariableShaderTypeInfo} from '@luma.gl/core';
+import {getVariableShaderTypeInfo, assertDefined, log} from '@luma.gl/core';
 
-import {GL, GLUniformType} from '@luma.gl/constants';
+import {GL, GLUniformType} from '@luma.gl/webgl/constants';
 import {
   isGLSamplerType,
   getTextureBindingFromGLSamplerType,
@@ -252,23 +252,45 @@ function readUniformBlocks(
     // ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
     // const uniformRowMajor = gl.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
-      const activeInfo = gl.getActiveUniform(program, uniformIndices[i]);
-      if (!activeInfo) {
-        throw new Error('activeInfo');
+      const uniformIndex = uniformIndices[i];
+      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 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 uniformInstancePrefixes = new Set(
+      blockInfo.uniforms
+        .map(uniform => uniform.name.split('.')[0])
+        .filter((instanceName): instanceName is string => Boolean(instanceName))
+    );
+    const blockAlias = blockInfo.name.replace(/Uniforms$/, '');
+    if (
+      uniformInstancePrefixes.size === 1 &&
+      !uniformInstancePrefixes.has(blockInfo.name) &&
+      !uniformInstancePrefixes.has(blockAlias)
+    ) {
+      const [instanceName] = uniformInstancePrefixes;
+      log.warn(
+        `Uniform block "${blockInfo.name}" uses GLSL instance "${instanceName}". ` +
+          `luma.gl binds uniform buffers by block name ("${blockInfo.name}") and alias ("${blockAlias}"). ` +
+          'Prefer matching the instance name to one of those to avoid confusing silent mismatches.'
+      )();
     }
 
     uniformBlocks.push(blockInfo);
@@ -314,13 +336,11 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
   // if array name then clean the array brackets
   const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
   const matches = UNIFORM_NAME_REGEXP.exec(name);
-  if (!matches || matches.length < 2) {
-    throw new Error(`Failed to parse GLSL uniform name ${name}`);
-  }
-
+  const uniformName = assertDefined(matches?.[1], `Failed to parse GLSL uniform name ${name}`);
   return {
-    name: matches[1],
-    length: matches[2] ? 1 : 0,
-    isArray: Boolean(matches[2])
+    name: uniformName,
+    // TODO - is this a bug, shouldn't we return the value?
+    length: matches?.[2] ? 1 : 0,
+    isArray: Boolean(matches?.[2])
   };
 }

package/src/adapter/helpers/parse-shader-compiler-log.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {CompilerMessage} from '@luma.gl/core';
+import {type CompilerMessage} from '@luma.gl/core';
 
 /**
  * Parse a WebGL-format GLSL compilation log into an array of WebGPU style message records.
@@ -20,21 +20,43 @@ export function parseShaderCompilerLog(errLog: string): readonly CompilerMessage
       continue; // eslint-disable-line no-continue
     }
 
+    const lineWithTrimmedWhitespace = line.trim();
+
     const segments: string[] = line.split(':');
+    const trimmedMessageType = segments[0]?.trim();
 
     // Check for messages with no line information `ERROR: unsupported shader version`
     if (segments.length === 2) {
       const [messageType, message] = segments;
+      if (!messageType || !message) {
+        messages.push({
+          message: lineWithTrimmedWhitespace,
+          type: getMessageType(trimmedMessageType || 'info'),
+          lineNum: 0,
+          linePos: 0
+        });
+        continue; // eslint-disable-line no-continue
+      }
       messages.push({
         message: message.trim(),
         type: getMessageType(messageType),
         lineNum: 0,
         linePos: 0
       });
+
       continue; // eslint-disable-line no-continue
     }
 
     const [messageType, linePosition, lineNumber, ...rest] = segments;
+    if (!messageType || !linePosition || !lineNumber) {
+      messages.push({
+        message: segments.slice(1).join(':').trim() || lineWithTrimmedWhitespace,
+        type: getMessageType(trimmedMessageType || 'info'),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue; // eslint-disable-line no-continue
+    }
 
     let lineNum = parseInt(lineNumber, 10);
     if (isNaN(lineNum)) {

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

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

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, getTypedArrayConstructor, getDataType} from '@luma.gl/core';
+import {Framebuffer, dataTypeDecoder} from '@luma.gl/core';
 import {
   GL,
   GLTextureTarget,
@@ -13,7 +13,7 @@ import {
   GLTexelDataFormat,
   GLPixelType,
   GLDataType
-} from '@luma.gl/constants';
+} from '@luma.gl/webgl/constants';
 
 import {convertDataTypeToGLDataType} from '../converters/webgl-shadertypes';
 import {WEBGLFramebuffer} from '../resources/webgl-framebuffer';
@@ -232,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 = getDataType(target);
+  const signedType = dataTypeDecoder.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)
@@ -484,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 = getTypedArrayConstructor(shaderType);
+  const ArrayType = dataTypeDecoder.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/helpers/webgl-topology-utils.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {GL, GLPrimitiveTopology, GLPrimitive} from '@luma.gl/constants';
+import {GL, GLPrimitiveTopology, GLPrimitive} from '@luma.gl/webgl/constants';
 import {PrimitiveTopology} from '@luma.gl/core';
 
 // Counts the number of complete primitives given a number of vertices and a drawMode

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

@@ -4,7 +4,7 @@
 
 import type {BufferMapCallback, BufferProps} from '@luma.gl/core';
 import {Buffer} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {GL} from '@luma.gl/webgl/constants';
 import {WebGLDevice} from '../webgl-device';
 
 /** WebGL Buffer interface */
@@ -42,6 +42,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);
+    // Note: uint8 indices are converted to uint16 during device normalization for WebGPU compatibility
     this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
 
     // Set data: (re)initializes the buffer
@@ -55,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;
@@ -80,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.
@@ -106,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

@@ -2,29 +2,26 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {
-  CopyBufferToBufferOptions,
-  CopyBufferToTextureOptions,
-  CopyTextureToBufferOptions,
-  CopyTextureToTextureOptions
-  // ClearTextureOptions,
-  // TextureReadOptions
-} from '@luma.gl/core';
-import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
 import {
-  GL,
-  GLTextureTarget,
-  GLTextureCubeMapTarget
-  // GLTexelDataFormat,
-  // GLPixelType,
-  // GLDataType
-} from '@luma.gl/constants';
+  type CommandBufferProps,
+  type CopyBufferToBufferOptions,
+  type CopyBufferToTextureOptions,
+  type CopyTextureToBufferOptions,
+  type CopyTextureToTextureOptions,
+  type TextureReadOptions,
+  // type ClearTextureOptions,
+  CommandBuffer,
+  Texture,
+  Framebuffer,
+  assertDefined
+} from '@luma.gl/core';
+import {GL, type GLTextureTarget, type GLTextureCubeMapTarget} from '@luma.gl/webgl/constants';
 
+import {getTextureFormatWebGL} from '../converters/webgl-texture-table';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLFramebuffer} from './webgl-framebuffer';
-import {getTextureFormatWebGL} from '../converters/webgl-texture-table';
 
 type CopyBufferToBufferCommand = {
   name: 'copy-buffer-to-buffer';
@@ -69,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;
   }
 
@@ -122,8 +119,8 @@ function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOpt
  * Copies data from a Buffer object into a Texture object
  * NOTE: doesn't wait for copy to be complete
  */
-function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {
-  throw new Error('Not implemented');
+function _copyBufferToTexture(_device: WebGLDevice, _options: CopyBufferToTextureOptions): void {
+  throw new Error('copyBufferToTexture is not supported in WebGL');
 }
 
 /**
@@ -132,45 +129,44 @@ function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureO
  */
 function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {
   const {
-    /** Texture to copy to/from. */
     sourceTexture,
-    /**  Mip-map level of the texture to copy to/from. (Default 0) */
     mipLevel = 0,
-    /** Defines which aspects of the texture to copy to/from. */
     aspect = 'all',
-
-    /** Width to copy */
     width = options.sourceTexture.width,
-    /** Height to copy */
     height = options.sourceTexture.height,
-    depthOrArrayLayers = 0,
-    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
-    origin = [0, 0],
-
-    /** Destination buffer */
+    depthOrArrayLayers,
+    origin = [0, 0, 0],
     destinationBuffer,
-    /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
     byteOffset = 0,
-    /**
-     * The stride, in bytes, between the beginning of each block row and the subsequent block row.
-     * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
-     */
     bytesPerRow,
-    /**
-     * Number of block rows per single image of the texture.
-     * rowsPerImage × bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
-     * Required if there are multiple images (i.e. the copy depth is more than one).
-     */
     rowsPerImage
   } = options;
 
+  if (sourceTexture instanceof Texture) {
+    sourceTexture.readBuffer(
+      {
+        x: origin[0] ?? 0,
+        y: origin[1] ?? 0,
+        z: origin[2] ?? 0,
+        width,
+        height,
+        depthOrArrayLayers,
+        mipLevel,
+        aspect,
+        byteOffset
+      } as TextureReadOptions & {byteOffset?: number},
+      destinationBuffer
+    );
+    return;
+  }
+
   // TODO - Not possible to read just stencil or depth part in WebGL?
   if (aspect !== 'all') {
     throw new Error('aspect not supported in WebGL');
   }
 
   // TODO - mipLevels are set when attaching texture to framebuffer
-  if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
+  if (mipLevel !== 0 || depthOrArrayLayers !== undefined || bytesPerRow || rowsPerImage) {
     throw new Error('not implemented');
   }
 
@@ -181,9 +177,9 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
     const webglBuffer = destinationBuffer as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-    const sourceParams = getTextureFormatWebGL(
-      framebuffer.colorAttachments[0].texture.props.format
-    );
+    const colorAttachment0 = assertDefined(framebuffer.colorAttachments[0]);
+
+    const sourceParams = getTextureFormatWebGL(colorAttachment0.texture.props.format);
     const sourceFormat = sourceParams.format;
     const sourceType = sourceParams.type;
 
@@ -256,7 +252,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
     origin = [0, 0],
 
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
-    destinationOrigin = [0, 0],
+    destinationOrigin = [0, 0, 0],
 
     /** Texture to copy to/from. */
     destinationTexture
@@ -275,7 +271,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   } = options;
 
   const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
-  const [sourceX, sourceY] = origin;
+  const [sourceX = 0, sourceY = 0] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
 
   // @ts-expect-error native bindFramebuffer is overridden by our state tracker

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');
   }
 
@@ -73,12 +83,19 @@ export class WEBGLCommandEncoder extends CommandEncoder {
   override insertDebugMarker(markerLabel: string): void {}
 
   override resolveQuerySet(
-    querySet: QuerySet,
-    destination: Buffer,
-    options?: {
+    _querySet: QuerySet,
+    _destination: Buffer,
+    _options?: {
       firstQuery?: number;
       queryCount?: number;
       destinationOffset?: number;
     }
-  ): void {}
+  ): void {
+    throw new Error('resolveQuerySet is not supported in WebGL');
+  }
+
+  writeTimestamp(querySet: QuerySet, queryIndex: number): void {
+    const webglQuerySet = querySet as WEBGLQuerySet;
+    webglQuerySet.writeTimestamp(queryIndex);
+  }
 }

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

@@ -0,0 +1,55 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGLDevice} from '../webgl-device';
+
+/** WebGL fence implemented with gl.fenceSync */
+export class WEBGLFence extends Fence {
+  readonly device: WebGLDevice;
+  readonly gl: WebGL2RenderingContext;
+  readonly handle: WebGLSync;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGLDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.gl = device.gl;
+
+    const sync = this.props.handle || this.gl.fenceSync(this.gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    if (!sync) {
+      throw new Error('Failed to create WebGL fence');
+    }
+    this.handle = sync;
+
+    this.signaled = new Promise(resolve => {
+      const poll = () => {
+        const status = this.gl.clientWaitSync(this.handle, 0, 0);
+        if (status === this.gl.ALREADY_SIGNALED || status === this.gl.CONDITION_SATISFIED) {
+          this._signaled = true;
+          resolve();
+        } else {
+          setTimeout(poll, 1);
+        }
+      };
+      poll();
+    });
+  }
+
+  isSignaled(): boolean {
+    if (this._signaled) {
+      return true;
+    }
+    const status = this.gl.getSyncParameter(this.handle, this.gl.SYNC_STATUS);
+    this._signaled = status === this.gl.SIGNALED;
+    return this._signaled;
+  }
+
+  destroy(): void {
+    if (!this.destroyed) {
+      this.gl.deleteSync(this.handle);
+    }
+  }
+}

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

@@ -4,7 +4,7 @@
 
 import type {FramebufferProps} from '@luma.gl/core';
 import {Framebuffer} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {GL} from '@luma.gl/webgl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLTextureView} from './webgl-texture-view';
@@ -137,6 +137,17 @@ export class WEBGLFramebuffer extends Framebuffer {
 
     gl.bindTexture(texture.glTarget, null);
   }
+
+  /** Default framebuffer resize is managed by canvas size and should be a no-op. */
+  protected override resizeAttachments(width: number, height: number): void {
+    if (this.handle === null) {
+      this.width = width;
+      this.height = height;
+      return;
+    }
+
+    super.resizeAttachments(width, height);
+  }
 }
 
 // Helper functions