@luma.gl/webgl 9.2.6 → 9.3.0-alpha.2

package/dist/index.cjs

@@ -281,16 +281,15 @@ function onGLError(props, err, functionName, args) {
   const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
   const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
   const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
-  import_core2.log.error(message2)();
+  import_core2.log.error("%cWebGL", "color: white; background: red; padding: 2px 6px; border-radius: 3px;", message2)();
   debugger;
+  throw new Error(message2);
 }
 function onValidateGLFunc(props, functionName, functionArgs) {
   let functionString = "";
-  if (import_core2.log.level >= 1) {
+  if (props.traceWebGL && import_core2.log.level >= 1) {
     functionString = getFunctionString(functionName, functionArgs);
-    if (props.traceWebGL) {
-      import_core2.log.log(1, functionString)();
-    }
+    import_core2.log.info(1, "%cWebGL", "color: white; background: blue; padding: 2px 6px; border-radius: 3px;", functionString)();
   }
   for (const arg of functionArgs) {
     if (arg === void 0) {
@@ -1008,38 +1007,53 @@ var init_webgl_state_tracker = __esm({
 // dist/context/helpers/create-browser-context.js
 function createBrowserContext(canvas, props, webglContextAttributes) {
   let errorMessage = "";
+  const onCreateError = (event) => {
+    const statusMessage = event.statusMessage;
+    if (statusMessage) {
+      errorMessage ||= statusMessage;
+    }
+  };
+  canvas.addEventListener("webglcontextcreationerror", onCreateError, false);
+  const allowSoftwareRenderer = webglContextAttributes.failIfMajorPerformanceCaveat !== true;
   const webglProps = {
     preserveDrawingBuffer: true,
-    // failIfMajorPerformanceCaveat: true,
-    ...webglContextAttributes
+    ...webglContextAttributes,
+    // Always start by requesting a high-performance context.
+    failIfMajorPerformanceCaveat: true
   };
   let gl = null;
-  gl ||= canvas.getContext("webgl2", webglProps);
-  if (webglProps.failIfMajorPerformanceCaveat) {
-    errorMessage ||= "Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.";
-  }
-  if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
-    webglProps.failIfMajorPerformanceCaveat = false;
-    gl = canvas.getContext("webgl2", webglProps);
-    gl.luma ||= {};
-    gl.luma.softwareRenderer = true;
-  }
-  if (!gl) {
-    gl = canvas.getContext("webgl", {});
-    if (gl) {
-      gl = null;
-      errorMessage ||= "Your browser only supports WebGL1";
+  try {
+    gl ||= canvas.getContext("webgl2", webglProps);
+    if (!gl && webglProps.failIfMajorPerformanceCaveat) {
+      errorMessage ||= "Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.";
     }
+    if (!gl && allowSoftwareRenderer) {
+      webglProps.failIfMajorPerformanceCaveat = false;
+      gl = canvas.getContext("webgl2", webglProps);
+      if (gl) {
+        gl.luma ||= {};
+        gl.luma.softwareRenderer = true;
+      }
+    }
+    if (!gl) {
+      gl = canvas.getContext("webgl", {});
+      if (gl) {
+        gl = null;
+        errorMessage ||= "Your browser only supports WebGL1";
+      }
+    }
+    if (!gl) {
+      errorMessage ||= "Your browser does not support WebGL";
+      throw new Error(`Failed to create WebGL context: ${errorMessage}`);
+    }
+    const { onContextLost, onContextRestored } = props;
+    canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+    canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
+    gl.luma ||= {};
+    return gl;
+  } finally {
+    canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
   }
-  if (!gl) {
-    errorMessage ||= "Your browser does not support WebGL";
-    throw new Error(`Failed to create WebGL context: ${errorMessage}`);
-  }
-  const { onContextLost, onContextRestored } = props;
-  canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
-  canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
-  gl.luma ||= {};
-  return gl;
 }
 var init_create_browser_context = __esm({
   "dist/context/helpers/create-browser-context.js"() {
@@ -1794,14 +1808,25 @@ var init_webgl_canvas_context = __esm({
         super(props);
         this.device = device;
         this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-        this._updateDevice();
-      }
-      getCurrentFramebuffer() {
-        this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
-        return this._framebuffer;
+        this._configureDevice();
       }
       // IMPLEMENTATION OF ABSTRACT METHODS
-      _updateDevice() {
+      _configureDevice() {
+        var _a, _b, _c;
+        const shouldResize = this.drawingBufferWidth !== ((_a = this._framebuffer) == null ? void 0 : _a.width) || this.drawingBufferHeight !== ((_b = this._framebuffer) == null ? void 0 : _b.height);
+        if (shouldResize) {
+          (_c = this._framebuffer) == null ? void 0 : _c.resize([this.drawingBufferWidth, this.drawingBufferHeight]);
+        }
+      }
+      _getCurrentFramebuffer() {
+        this._framebuffer ||= new WEBGLFramebuffer(this.device, {
+          id: "canvas-context-framebuffer",
+          handle: null,
+          // Setting handle to null returns a reference to the default WebGL framebuffer
+          width: this.drawingBufferWidth,
+          height: this.drawingBufferHeight
+        });
+        return this._framebuffer;
       }
     };
   }
@@ -2562,6 +2587,119 @@ var init_webgl_texture_view = __esm({
   }
 });
 
+// dist/adapter/converters/webgl-shadertypes.js
+function convertDataTypeToGLDataType(normalizedType) {
+  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
+}
+function convertGLUniformTypeToShaderVariableType(glUniformType) {
+  return WEBGL_SHADER_TYPES[glUniformType];
+}
+function isGLSamplerType(type) {
+  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
+}
+function getTextureBindingFromGLSamplerType(glSamplerType) {
+  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
+}
+var import_constants14, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
+var init_webgl_shadertypes = __esm({
+  "dist/adapter/converters/webgl-shadertypes.js"() {
+    "use strict";
+    import_constants14 = require("@luma.gl/constants");
+    WEBGL_SHADER_TYPES = {
+      [5126]: "f32",
+      [35664]: "vec2<f32>",
+      [35665]: "vec3<f32>",
+      [35666]: "vec4<f32>",
+      [5124]: "i32",
+      [35667]: "vec2<i32>",
+      [35668]: "vec3<i32>",
+      [35669]: "vec4<i32>",
+      [5125]: "u32",
+      [36294]: "vec2<u32>",
+      [36295]: "vec3<u32>",
+      [36296]: "vec4<u32>",
+      [35670]: "f32",
+      [35671]: "vec2<f32>",
+      [35672]: "vec3<f32>",
+      [35673]: "vec4<f32>",
+      // TODO - are sizes/components below correct?
+      [35674]: "mat2x2<f32>",
+      [35685]: "mat2x3<f32>",
+      [35686]: "mat2x4<f32>",
+      [35687]: "mat3x2<f32>",
+      [35675]: "mat3x3<f32>",
+      [35688]: "mat3x4<f32>",
+      [35689]: "mat4x2<f32>",
+      [35690]: "mat4x3<f32>",
+      [35676]: "mat4x4<f32>"
+    };
+    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
+      [35678]: { viewDimension: "2d", sampleType: "float" },
+      [35680]: { viewDimension: "cube", sampleType: "float" },
+      [35679]: { viewDimension: "3d", sampleType: "float" },
+      [35682]: { viewDimension: "3d", sampleType: "depth" },
+      [36289]: { viewDimension: "2d-array", sampleType: "float" },
+      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
+      [36293]: { viewDimension: "cube", sampleType: "float" },
+      [36298]: { viewDimension: "2d", sampleType: "sint" },
+      [36299]: { viewDimension: "3d", sampleType: "sint" },
+      [36300]: { viewDimension: "cube", sampleType: "sint" },
+      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
+      [36306]: { viewDimension: "2d", sampleType: "uint" },
+      [36307]: { viewDimension: "3d", sampleType: "uint" },
+      [36308]: { viewDimension: "cube", sampleType: "uint" },
+      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
+    };
+    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
+      uint8: 5121,
+      sint8: 5120,
+      unorm8: 5121,
+      snorm8: 5120,
+      uint16: 5123,
+      sint16: 5122,
+      unorm16: 5123,
+      snorm16: 5122,
+      uint32: 5125,
+      sint32: 5124,
+      // WebGPU does not support normalized 32 bit integer attributes
+      //  'unorm32': GL.UNSIGNED_INT,
+      //  'snorm32': GL.INT,
+      float16: 5131,
+      float32: 5126
+    };
+  }
+});
+
+// dist/adapter/converters/shader-formats.js
+function convertGLDataTypeToDataType(type) {
+  return GL_DATA_TYPE_MAP[type];
+}
+var import_constants15, GL_DATA_TYPE_MAP;
+var init_shader_formats = __esm({
+  "dist/adapter/converters/shader-formats.js"() {
+    "use strict";
+    import_constants15 = require("@luma.gl/constants");
+    GL_DATA_TYPE_MAP = {
+      [5124]: "sint32",
+      [5125]: "uint32",
+      [5122]: "sint16",
+      [5123]: "uint16",
+      [5120]: "sint8",
+      [5121]: "uint8",
+      [5126]: "float32",
+      [5131]: "float16",
+      [33635]: "uint16",
+      [32819]: "uint16",
+      [32820]: "uint16",
+      [33640]: "uint32",
+      [35899]: "uint32",
+      [35902]: "uint32",
+      [34042]: "uint32",
+      [36269]: "uint32"
+    };
+  }
+});
+
 // dist/adapter/resources/webgl-texture.js
 function getWebGLTextureTarget(dimension) {
   switch (dimension) {
@@ -2583,16 +2721,19 @@ function getWebGLTextureTarget(dimension) {
 function getWebGLCubeFaceTarget(glTarget, dimension, level) {
   return dimension === "cube" ? 34069 + level : glTarget;
 }
-var import_core13, import_constants14, WEBGLTexture;
+var import_core13, import_constants16, import_core14, WEBGLTexture;
 var init_webgl_texture = __esm({
   "dist/adapter/resources/webgl-texture.js"() {
     "use strict";
     import_core13 = require("@luma.gl/core");
-    import_constants14 = require("@luma.gl/constants");
+    import_constants16 = require("@luma.gl/constants");
     init_webgl_texture_table();
     init_sampler_parameters();
     init_with_parameters();
     init_webgl_texture_view();
+    init_webgl_shadertypes();
+    init_shader_formats();
+    import_core14 = require("@luma.gl/core");
     WEBGLTexture = class extends import_core13.Texture {
       // readonly MAX_ATTRIBUTES: number;
       device;
@@ -2622,8 +2763,10 @@ var init_webgl_texture = __esm({
       // state
       /** Texture binding slot - TODO - move to texture view? */
       _textureUnit = 0;
+      /** Chached framebuffer */
+      _framebuffer = null;
       constructor(device, props) {
-        super(device, props);
+        super(device, props, { byteAlignment: 1 });
         this.device = device;
         this.gl = this.device.gl;
         const formatInfo = getTextureFormatWebGL(this.props.format);
@@ -2655,7 +2798,10 @@ var init_webgl_texture = __esm({
         Object.seal(this);
       }
       destroy() {
+        var _a;
         if (this.handle) {
+          (_a = this._framebuffer) == null ? void 0 : _a.destroy();
+          this._framebuffer = null;
           this.gl.deleteTexture(this.handle);
           this.removeStats();
           this.trackDeallocatedMemory("Texture");
@@ -2670,11 +2816,37 @@ var init_webgl_texture = __esm({
         const parameters = convertSamplerParametersToWebGL(this.sampler.props);
         this._setSamplerParameters(parameters);
       }
+      copyExternalImage(options_) {
+        const options = this._normalizeCopyExternalImageOptions(options_);
+        if (options.sourceX || options.sourceY) {
+          throw new Error("WebGL does not support sourceX/sourceY)");
+        }
+        const { glFormat, glType } = this;
+        const { image, depth, mipLevel, x, y, z, width, height } = options;
+        const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+        const glParameters = options.flipY ? { [37440]: true } : {};
+        this.gl.bindTexture(this.glTarget, this.handle);
+        withGLParameters(this.gl, glParameters, () => {
+          switch (this.dimension) {
+            case "2d":
+            case "cube":
+              this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+              break;
+            case "2d-array":
+            case "3d":
+              this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+              break;
+            default:
+          }
+        });
+        this.gl.bindTexture(this.glTarget, null);
+        return { width: options.width, height: options.height };
+      }
       copyImageData(options_) {
         const options = this._normalizeCopyImageDataOptions(options_);
         const typedArray = options.data;
-        const { width, height, depth } = this;
-        const { mipLevel = 0, byteOffset = 0, x = 0, y = 0, z = 0 } = options;
+        const { width, height, depth, z = 0 } = options;
+        const { mipLevel = 0, byteOffset = 0, x = 0, y = 0 } = options;
         const { glFormat, glType, compressed } = this;
         const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
         let unpackRowLength;
@@ -2688,10 +2860,11 @@ var init_webgl_texture = __esm({
           }
         }
         const glParameters = !this.compressed ? {
+          [3317]: this.byteAlignment,
           ...unpackRowLength !== void 0 ? { [3314]: unpackRowLength } : {},
           [32878]: options.rowsPerImage
         } : {};
-        this.gl.bindTexture(glTarget, this.handle);
+        this.gl.bindTexture(this.glTarget, this.handle);
         withGLParameters(this.gl, glParameters, () => {
           switch (this.dimension) {
             case "2d":
@@ -2713,35 +2886,92 @@ var init_webgl_texture = __esm({
             default:
           }
         });
-        this.gl.bindTexture(glTarget, null);
+        this.gl.bindTexture(this.glTarget, null);
       }
-      copyExternalImage(options_) {
-        const options = this._normalizeCopyExternalImageOptions(options_);
-        if (options.sourceX || options.sourceY) {
-          throw new Error("WebGL does not support sourceX/sourceY)");
-        }
-        const { glFormat, glType } = this;
-        const { image, depth, mipLevel, x, y, z, width, height } = options;
+      readBuffer(options = {}, buffer) {
+        throw new Error("readBuffer not implemented");
+      }
+      async readDataAsync(options = {}) {
+        return this.readDataSyncWebGL(options);
+      }
+      writeBuffer(buffer, options_ = {}) {
+      }
+      writeData(data, options_ = {}) {
+        const options = this._normalizeTextureWriteOptions(options_);
+        const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
+        const {} = this;
+        const { width, height, mipLevel, x, y, z } = options;
+        const { glFormat, glType, compressed } = this;
+        const depth = 0;
         const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
-        const glParameters = options.flipY ? { [37440]: true } : {};
-        this.gl.bindTexture(this.glTarget, this.handle);
+        const glParameters = !this.compressed ? {
+          // WebGL does not require byte alignment, but allows it to be specified
+          [3317]: this.byteAlignment
+          // [GL.UNPACK_ROW_LENGTH]: bytesPerRow,
+          // [GL.UNPACK_IMAGE_HEIGHT]: rowsPerImage
+        } : {};
+        this.gl.bindTexture(glTarget, this.handle);
+        this.gl.bindBuffer(35052, null);
         withGLParameters(this.gl, glParameters, () => {
           switch (this.dimension) {
             case "2d":
             case "cube":
-              this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+              if (compressed) {
+                this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray);
+              } else {
+                this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray);
+              }
               break;
             case "2d-array":
             case "3d":
-              this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+              if (compressed) {
+                this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray);
+              } else {
+                this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray);
+              }
               break;
             default:
           }
         });
-        this.gl.bindTexture(this.glTarget, null);
-        return { width: options.width, height: options.height };
+        this.gl.bindTexture(glTarget, null);
+      }
+      // IMPLEMENTATION SPECIFIC
+      /** @todo - for now we always use 1 for maximum compatibility, we can fine tune later */
+      _getRowByteAlignment(format, width) {
+        return 1;
+      }
+      /**
+       * Wraps a given texture into a framebuffer object, that can be further used
+       * to read data from the texture object.
+       */
+      _getFramebuffer() {
+        this._framebuffer ||= this.device.createFramebuffer({
+          id: `framebuffer-for-${this.id}`,
+          width: this.width,
+          height: this.height,
+          colorAttachments: [this]
+        });
+        return this._framebuffer;
       }
       // WEBGL SPECIFIC
+      readDataSyncWebGL(options_ = {}) {
+        const options = this._normalizeTextureReadOptions(options_);
+        const memoryLayout = this.computeMemoryLayout(options);
+        const shaderType = convertGLDataTypeToDataType(this.glType);
+        const ArrayType = (0, import_core14.getTypedArrayConstructor)(shaderType);
+        const targetArray = new ArrayType(memoryLayout.byteLength);
+        const signedType = (0, import_core14.getDataType)(targetArray);
+        const sourceType = convertDataTypeToGLDataType(signedType);
+        const framebuffer = this._getFramebuffer();
+        const prevHandle = this.gl.bindFramebuffer(36160, framebuffer.handle);
+        this.gl.readBuffer(36064);
+        this.gl.readPixels(options.x, options.y, options.width, options.height, this.glFormat, sourceType, targetArray);
+        this.gl.bindFramebuffer(36160, prevHandle || null);
+        return targetArray.buffer;
+      }
+      /**
+       * @note - this is used by the DynamicTexture class to generate mipmaps on WebGL
+       */
       generateMipmapsWebGL(options) {
         const isFilterableAndRenderable = this.device.isTextureFormatRenderable(this.props.format) && this.device.isTextureFormatFilterable(this.props.format);
         if (!isFilterableAndRenderable) {
@@ -2821,89 +3051,6 @@ var init_webgl_texture = __esm({
   }
 });
 
-// dist/adapter/converters/webgl-shadertypes.js
-function convertDataTypeToGLDataType(normalizedType) {
-  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
-}
-function convertGLUniformTypeToShaderVariableType(glUniformType) {
-  return WEBGL_SHADER_TYPES[glUniformType];
-}
-function isGLSamplerType(type) {
-  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
-}
-function getTextureBindingFromGLSamplerType(glSamplerType) {
-  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
-}
-var import_constants15, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
-var init_webgl_shadertypes = __esm({
-  "dist/adapter/converters/webgl-shadertypes.js"() {
-    "use strict";
-    import_constants15 = require("@luma.gl/constants");
-    WEBGL_SHADER_TYPES = {
-      [5126]: "f32",
-      [35664]: "vec2<f32>",
-      [35665]: "vec3<f32>",
-      [35666]: "vec4<f32>",
-      [5124]: "i32",
-      [35667]: "vec2<i32>",
-      [35668]: "vec3<i32>",
-      [35669]: "vec4<i32>",
-      [5125]: "u32",
-      [36294]: "vec2<u32>",
-      [36295]: "vec3<u32>",
-      [36296]: "vec4<u32>",
-      [35670]: "f32",
-      [35671]: "vec2<f32>",
-      [35672]: "vec3<f32>",
-      [35673]: "vec4<f32>",
-      // TODO - are sizes/components below correct?
-      [35674]: "mat2x2<f32>",
-      [35685]: "mat2x3<f32>",
-      [35686]: "mat2x4<f32>",
-      [35687]: "mat3x2<f32>",
-      [35675]: "mat3x3<f32>",
-      [35688]: "mat3x4<f32>",
-      [35689]: "mat4x2<f32>",
-      [35690]: "mat4x3<f32>",
-      [35676]: "mat4x4<f32>"
-    };
-    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
-      [35678]: { viewDimension: "2d", sampleType: "float" },
-      [35680]: { viewDimension: "cube", sampleType: "float" },
-      [35679]: { viewDimension: "3d", sampleType: "float" },
-      [35682]: { viewDimension: "3d", sampleType: "depth" },
-      [36289]: { viewDimension: "2d-array", sampleType: "float" },
-      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
-      [36293]: { viewDimension: "cube", sampleType: "float" },
-      [36298]: { viewDimension: "2d", sampleType: "sint" },
-      [36299]: { viewDimension: "3d", sampleType: "sint" },
-      [36300]: { viewDimension: "cube", sampleType: "sint" },
-      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
-      [36306]: { viewDimension: "2d", sampleType: "uint" },
-      [36307]: { viewDimension: "3d", sampleType: "uint" },
-      [36308]: { viewDimension: "cube", sampleType: "uint" },
-      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
-    };
-    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
-      uint8: 5121,
-      sint8: 5120,
-      unorm8: 5121,
-      snorm8: 5120,
-      uint16: 5123,
-      sint16: 5122,
-      unorm16: 5123,
-      snorm16: 5122,
-      uint32: 5125,
-      sint32: 5124,
-      // WebGPU does not support normalized 32 bit integer attributes
-      //  'unorm32': GL.UNSIGNED_INT,
-      //  'snorm32': GL.INT,
-      float16: 5131,
-      float32: 5126
-    };
-  }
-});
-
 // dist/adapter/helpers/get-shader-layout-from-glsl.js
 function getShaderLayoutFromGLSL(gl, program) {
   const shaderLayout = {
@@ -2995,7 +3142,7 @@ function readVaryings(gl, program) {
     }
     const { name, type: glUniformType, size } = activeInfo;
     const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType);
-    const { type, components } = (0, import_core14.getVariableShaderTypeInfo)(uniformType);
+    const { type, components } = (0, import_core15.getVariableShaderTypeInfo)(uniformType);
     varyings.push({ location, name, type, size: size * components });
   }
   varyings.sort((a, b) => a.location - b.location);
@@ -3096,12 +3243,12 @@ function parseUniformName(name) {
     isArray: Boolean(matches[2])
   };
 }
-var import_core14, import_constants16;
+var import_core15, import_constants17;
 var init_get_shader_layout_from_glsl = __esm({
   "dist/adapter/helpers/get-shader-layout-from-glsl.js"() {
     "use strict";
-    import_core14 = require("@luma.gl/core");
-    import_constants16 = require("@luma.gl/constants");
+    import_core15 = require("@luma.gl/core");
+    import_constants17 = require("@luma.gl/constants");
     init_webgl_shadertypes();
   }
 });
@@ -3190,11 +3337,11 @@ function setUniform(gl, location, type, value) {
   }
   throw new Error("Illegal uniform");
 }
-var import_constants17;
+var import_constants18;
 var init_set_uniform = __esm({
   "dist/adapter/helpers/set-uniform.js"() {
     "use strict";
-    import_constants17 = require("@luma.gl/constants");
+    import_constants18 = require("@luma.gl/constants");
   }
 });
 
@@ -3231,11 +3378,11 @@ function getGLPrimitive(topology) {
       throw new Error(topology);
   }
 }
-var import_constants18;
+var import_constants19;
 var init_webgl_topology_utils = __esm({
   "dist/adapter/helpers/webgl-topology-utils.js"() {
     "use strict";
-    import_constants18 = require("@luma.gl/constants");
+    import_constants19 = require("@luma.gl/constants");
   }
 });
 
@@ -3248,7 +3395,7 @@ function mergeShaderLayout(baseLayout, overrideLayout) {
   for (const attribute of (overrideLayout == null ? void 0 : overrideLayout.attributes) || []) {
     const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
     if (!baseAttribute) {
-      import_core15.log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+      import_core16.log.warn(`shader layout attribute ${attribute.name} not present in shader`);
     } else {
       baseAttribute.type = attribute.type || baseAttribute.type;
       baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
@@ -3256,12 +3403,12 @@ function mergeShaderLayout(baseLayout, overrideLayout) {
   }
   return mergedLayout;
 }
-var import_core15, import_constants19, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
+var import_core16, import_constants20, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
 var init_webgl_render_pipeline = __esm({
   "dist/adapter/resources/webgl-render-pipeline.js"() {
     "use strict";
-    import_core15 = require("@luma.gl/core");
-    import_constants19 = require("@luma.gl/constants");
+    import_core16 = require("@luma.gl/core");
+    import_constants20 = require("@luma.gl/constants");
     init_get_shader_layout_from_glsl();
     init_device_parameters();
     init_set_uniform();
@@ -3271,7 +3418,7 @@ var init_webgl_render_pipeline = __esm({
     init_webgl_texture_view();
     init_webgl_topology_utils();
     LOG_PROGRAM_PERF_PRIORITY = 4;
-    WEBGLRenderPipeline = class extends import_core15.RenderPipeline {
+    WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
       /** The WebGL device that created this render pipeline */
       device;
       /** Handle to underlying WebGL program */
@@ -3307,9 +3454,9 @@ var init_webgl_render_pipeline = __esm({
           this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
         }
         this._linkShaders();
-        import_core15.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+        import_core16.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
-        import_core15.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+        import_core16.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         this.shaderLayout = props.shaderLayout ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout) : this.introspectedLayout;
       }
       destroy() {
@@ -3331,12 +3478,12 @@ var init_webgl_render_pipeline = __esm({
           if (!binding) {
             const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
             if (!(options == null ? void 0 : options.disableWarnings)) {
-              import_core15.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
+              import_core16.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
             }
             continue;
           }
           if (!value) {
-            import_core15.log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
+            import_core16.log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
           }
           switch (binding.type) {
             case "uniform":
@@ -3350,7 +3497,7 @@ var init_webgl_render_pipeline = __esm({
               }
               break;
             case "sampler":
-              import_core15.log.warn(`Ignoring sampler ${name}`)();
+              import_core16.log.warn(`Ignoring sampler ${name}`)();
               break;
             default:
               throw new Error(binding.type);
@@ -3383,11 +3530,11 @@ var init_webgl_render_pipeline = __esm({
         const isIndexed = Boolean(vertexArray.indexBuffer);
         const glIndexType = (_a = vertexArray.indexBuffer) == null ? void 0 : _a.glIndexType;
         if (this.linkStatus !== "success") {
-          import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+          import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
           return false;
         }
         if (!this._areTexturesRenderable()) {
-          import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
+          import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
           return false;
         }
         this.device.gl.useProgram(this.handle);
@@ -3429,19 +3576,19 @@ var init_webgl_render_pipeline = __esm({
         const { gl } = this.device;
         gl.attachShader(this.handle, this.vs.handle);
         gl.attachShader(this.handle, this.fs.handle);
-        import_core15.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+        import_core16.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
         gl.linkProgram(this.handle);
-        import_core15.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
-        if (import_core15.log.level === 0) {
+        import_core16.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+        if (import_core16.log.level === 0) {
         }
         if (!this.device.features.has("compilation-status-async-webgl")) {
           const status2 = this._getLinkStatus();
           this._reportLinkStatus(status2);
           return;
         }
-        import_core15.log.once(1, "RenderPipeline linking is asynchronous")();
+        import_core16.log.once(1, "RenderPipeline linking is asynchronous")();
         await this._waitForLinkComplete();
-        import_core15.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+        import_core16.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
         const status = this._getLinkStatus();
         this._reportLinkStatus(status);
       }
@@ -3527,7 +3674,7 @@ var init_webgl_render_pipeline = __esm({
         let texturesRenderable = true;
         for (const bindingInfo of this.shaderLayout.bindings) {
           if (!this.bindings[bindingInfo.name] && !this.bindings[bindingInfo.name.replace(/Uniforms$/, "")]) {
-            import_core15.log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
+            import_core16.log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
             texturesRenderable = false;
           }
         }
@@ -3581,7 +3728,7 @@ var init_webgl_render_pipeline = __esm({
               } else if (value instanceof WEBGLTexture) {
                 texture = value;
               } else if (value instanceof WEBGLFramebuffer && value.colorAttachments[0] instanceof WEBGLTextureView) {
-                import_core15.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
+                import_core16.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
                 texture = value.colorAttachments[0].texture;
               } else {
                 throw new Error("No texture");
@@ -3748,7 +3895,7 @@ function _copyTextureToTexture(device, options) {
   }
 }
 function getFramebuffer(source) {
-  if (source instanceof import_core16.Texture) {
+  if (source instanceof import_core17.Texture) {
     const { width, height, id } = source;
     const framebuffer = source.device.createFramebuffer({
       id: `framebuffer-for-${id}`,
@@ -3760,15 +3907,15 @@ function getFramebuffer(source) {
   }
   return { framebuffer: source, destroyFramebuffer: false };
 }
-var import_core16, import_constants20, WEBGLCommandBuffer;
+var import_core17, import_constants21, WEBGLCommandBuffer;
 var init_webgl_command_buffer = __esm({
   "dist/adapter/resources/webgl-command-buffer.js"() {
     "use strict";
-    import_core16 = require("@luma.gl/core");
-    import_constants20 = require("@luma.gl/constants");
+    import_core17 = require("@luma.gl/core");
+    import_constants21 = require("@luma.gl/constants");
     init_webgl_texture();
     init_webgl_texture_table();
-    WEBGLCommandBuffer = class extends import_core16.CommandBuffer {
+    WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
       device;
       handle = null;
       commands = [];
@@ -3801,16 +3948,16 @@ var init_webgl_command_buffer = __esm({
 });
 
 // dist/adapter/resources/webgl-render-pass.js
-var import_core17, import_constants21, COLOR_CHANNELS, WEBGLRenderPass;
+var import_core18, import_constants22, COLOR_CHANNELS, WEBGLRenderPass;
 var init_webgl_render_pass = __esm({
   "dist/adapter/resources/webgl-render-pass.js"() {
     "use strict";
-    import_core17 = require("@luma.gl/core");
-    import_constants21 = require("@luma.gl/constants");
+    import_core18 = require("@luma.gl/core");
+    import_constants22 = require("@luma.gl/constants");
     init_with_parameters();
     init_unified_parameter_api();
     COLOR_CHANNELS = [1, 2, 4, 8];
-    WEBGLRenderPass = class extends import_core17.RenderPass {
+    WEBGLRenderPass = class extends import_core18.RenderPass {
       device;
       handle = null;
       /** Parameters that should be applied before each draw call */
@@ -3835,7 +3982,7 @@ var init_webgl_render_pass = __esm({
         if (this.props.framebuffer && (webglFramebuffer == null ? void 0 : webglFramebuffer.handle)) {
           const drawBuffers = this.props.framebuffer.colorAttachments.map((_, i) => 36064 + i);
           this.device.gl.drawBuffers(drawBuffers);
-        } else {
+        } else if (!this.props.framebuffer) {
           this.device.gl.drawBuffers([1029]);
         }
         this.clear();
@@ -3881,9 +4028,9 @@ var init_webgl_render_pass = __esm({
         if (parameters.blendConstant) {
           glParameters.blendColor = parameters.blendConstant;
         }
-        if (parameters.stencilReference) {
-          console.warn("RenderPassParameters.stencilReference not yet implemented in WebGL");
+        if (parameters.stencilReference !== void 0) {
           glParameters[2967] = parameters.stencilReference;
+          glParameters[36003] = parameters.stencilReference;
         }
         if ("colorMask" in parameters) {
           glParameters.colorMask = COLOR_CHANNELS.map((channel) => Boolean(channel & parameters.colorMask));
@@ -3961,14 +4108,14 @@ var init_webgl_render_pass = __esm({
 });
 
 // dist/adapter/resources/webgl-command-encoder.js
-var import_core18, WEBGLCommandEncoder;
+var import_core19, WEBGLCommandEncoder;
 var init_webgl_command_encoder = __esm({
   "dist/adapter/resources/webgl-command-encoder.js"() {
     "use strict";
-    import_core18 = require("@luma.gl/core");
+    import_core19 = require("@luma.gl/core");
     init_webgl_command_buffer();
     init_webgl_render_pass();
-    WEBGLCommandEncoder = class extends import_core18.CommandEncoder {
+    WEBGLCommandEncoder = class extends import_core19.CommandEncoder {
       device;
       handle = null;
       commandBuffer;
@@ -4059,16 +4206,16 @@ function compareConstantArrayValues(v1, v2) {
   }
   return true;
 }
-var import_core19, import_constants22, import_env2, WEBGLVertexArray;
+var import_core20, import_constants23, import_env2, WEBGLVertexArray;
 var init_webgl_vertex_array = __esm({
   "dist/adapter/resources/webgl-vertex-array.js"() {
     "use strict";
-    import_core19 = require("@luma.gl/core");
-    import_constants22 = require("@luma.gl/constants");
+    import_core20 = require("@luma.gl/core");
+    import_constants23 = require("@luma.gl/constants");
     import_env2 = require("@probe.gl/env");
     init_webgl_vertex_formats();
     init_fill_array();
-    WEBGLVertexArray = class extends import_core19.VertexArray {
+    WEBGLVertexArray = class extends import_core20.VertexArray {
       get [Symbol.toStringTag]() {
         return "VertexArray";
       }
@@ -4235,7 +4382,7 @@ var init_webgl_vertex_array = __esm({
         this.buffer = this.buffer || this.device.createBuffer({ byteLength });
         updateNeeded ||= !compareConstantArrayValues(constantValue, this.bufferValue);
         if (updateNeeded) {
-          const typedArray = (0, import_core19.getScratchArray)(value.constructor, length);
+          const typedArray = (0, import_core20.getScratchArray)(value.constructor, length);
           fillArray({ target: typedArray, source: constantValue, start: 0, count: length });
           this.buffer.write(typedArray);
           this.bufferValue = value;
@@ -4253,15 +4400,15 @@ function isIndex(value) {
   }
   return /^\d+$/.test(value);
 }
-var import_core20, import_constants23, WEBGLTransformFeedback;
+var import_core21, import_constants24, WEBGLTransformFeedback;
 var init_webgl_transform_feedback = __esm({
   "dist/adapter/resources/webgl-transform-feedback.js"() {
     "use strict";
-    import_core20 = require("@luma.gl/core");
-    import_constants23 = require("@luma.gl/constants");
+    import_core21 = require("@luma.gl/core");
+    import_constants24 = require("@luma.gl/constants");
     init_dist();
     init_webgl_topology_utils();
-    WEBGLTransformFeedback = class extends import_core20.TransformFeedback {
+    WEBGLTransformFeedback = class extends import_core21.TransformFeedback {
       device;
       gl;
       handle;
@@ -4324,7 +4471,7 @@ var init_webgl_transform_feedback = __esm({
         const { buffer, byteLength, byteOffset } = this._getBufferRange(bufferOrRange);
         if (location < 0) {
           this.unusedBuffers[locationOrName] = buffer;
-          import_core20.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
+          import_core21.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
           return;
         }
         this.buffers[location] = { buffer, byteLength, byteOffset };
@@ -4407,13 +4554,13 @@ var init_webgl_transform_feedback = __esm({
 });
 
 // dist/adapter/resources/webgl-query-set.js
-var import_core21, import_constants24, WEBGLQuerySet;
+var import_core22, import_constants25, WEBGLQuerySet;
 var init_webgl_query_set = __esm({
   "dist/adapter/resources/webgl-query-set.js"() {
     "use strict";
-    import_core21 = require("@luma.gl/core");
-    import_constants24 = require("@luma.gl/constants");
-    WEBGLQuerySet = class extends import_core21.QuerySet {
+    import_core22 = require("@luma.gl/core");
+    import_constants25 = require("@luma.gl/constants");
+    WEBGLQuerySet = class extends import_core22.QuerySet {
       device;
       handle;
       target = null;
@@ -4546,6 +4693,57 @@ var init_webgl_query_set = __esm({
   }
 });
 
+// dist/adapter/resources/webgl-fence.js
+var import_core23, WEBGLFence;
+var init_webgl_fence = __esm({
+  "dist/adapter/resources/webgl-fence.js"() {
+    "use strict";
+    import_core23 = require("@luma.gl/core");
+    WEBGLFence = class extends import_core23.Fence {
+      device;
+      gl;
+      handle;
+      signaled;
+      _signaled = false;
+      constructor(device, props = {}) {
+        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() {
+        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() {
+        if (!this.destroyed) {
+          this.gl.deleteSync(this.handle);
+        }
+      }
+    };
+  }
+});
+
 // dist/adapter/helpers/format-utils.js
 function glFormatToComponents(format) {
   switch (format) {
@@ -4586,41 +4784,11 @@ function glTypeToBytes(type) {
       return 0;
   }
 }
-var import_constants25;
+var import_constants26;
 var init_format_utils = __esm({
   "dist/adapter/helpers/format-utils.js"() {
-    "use strict";
-    import_constants25 = require("@luma.gl/constants");
-  }
-});
-
-// dist/adapter/converters/shader-formats.js
-function convertGLDataTypeToDataType(type) {
-  return GL_DATA_TYPE_MAP[type];
-}
-var import_constants26, GL_DATA_TYPE_MAP;
-var init_shader_formats = __esm({
-  "dist/adapter/converters/shader-formats.js"() {
     "use strict";
     import_constants26 = require("@luma.gl/constants");
-    GL_DATA_TYPE_MAP = {
-      [5124]: "sint32",
-      [5125]: "uint32",
-      [5122]: "sint16",
-      [5123]: "uint16",
-      [5120]: "sint8",
-      [5121]: "uint8",
-      [5126]: "float32",
-      [5131]: "float16",
-      [33635]: "uint16",
-      [32819]: "uint16",
-      [32820]: "uint16",
-      [33640]: "uint32",
-      [35899]: "uint32",
-      [35902]: "uint32",
-      [34042]: "uint32",
-      [36269]: "uint32"
-    };
   }
 });
 
@@ -4654,7 +4822,7 @@ function readPixelsToArray(source, options) {
   sourceFormat ||= (texture == null ? void 0 : texture.glFormat) || 6408;
   sourceType ||= (texture == null ? void 0 : texture.glType) || 5121;
   target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-  const signedType = (0, import_core22.getDataType)(target2);
+  const signedType = (0, import_core24.getDataType)(target2);
   sourceType = sourceType || convertDataTypeToGLDataType(signedType);
   const prevHandle = gl.bindFramebuffer(36160, handle);
   gl.readBuffer(36064 + sourceAttachment);
@@ -4697,7 +4865,7 @@ function readPixelsToBuffer(source, options) {
   return webglBufferTarget;
 }
 function getFramebuffer2(source) {
-  if (!(source instanceof import_core22.Framebuffer)) {
+  if (!(source instanceof import_core24.Framebuffer)) {
     return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
   }
   return { framebuffer: source, deleteFramebuffer: false };
@@ -4719,15 +4887,15 @@ function getPixelArray(pixelArray, glType, glFormat, width, height, depth) {
   }
   glType ||= 5121;
   const shaderType = convertGLDataTypeToDataType(glType);
-  const ArrayType = (0, import_core22.getTypedArrayConstructor)(shaderType);
+  const ArrayType = (0, import_core24.getTypedArrayConstructor)(shaderType);
   const components = glFormatToComponents(glFormat);
   return new ArrayType(width * height * components);
 }
-var import_core22, import_constants27;
+var import_core24, import_constants27;
 var init_webgl_texture_utils = __esm({
   "dist/adapter/helpers/webgl-texture-utils.js"() {
     "use strict";
-    import_core22 = require("@luma.gl/core");
+    import_core24 = require("@luma.gl/core");
     import_constants27 = require("@luma.gl/constants");
     init_webgl_shadertypes();
     init_format_utils();
@@ -4774,11 +4942,11 @@ function compareConstantArrayValues2(v1, v2) {
   }
   return true;
 }
-var import_core23, WebGLDevice;
+var import_core25, WebGLDevice;
 var init_webgl_device = __esm({
   "dist/adapter/webgl-device.js"() {
     "use strict";
-    import_core23 = require("@luma.gl/core");
+    import_core25 = require("@luma.gl/core");
     init_webgl_state_tracker();
     init_create_browser_context();
     init_webgl_device_info();
@@ -4799,11 +4967,12 @@ var init_webgl_device = __esm({
     init_webgl_vertex_array();
     init_webgl_transform_feedback();
     init_webgl_query_set();
+    init_webgl_fence();
     init_webgl_texture_utils();
     init_unified_parameter_api();
     init_with_parameters();
     init_webgl_extensions();
-    WebGLDevice = class extends import_core23.Device {
+    WebGLDevice = class extends import_core25.Device {
       // Public `Device` API
       /** type of this device */
       type = "webgl";
@@ -4849,7 +5018,7 @@ var init_webgl_device = __esm({
       constructor(props) {
         var _a, _b;
         super({ ...props, id: props.id || uid("webgl-device") });
-        const canvasContextProps = import_core23.Device._getCanvasContextProps(props);
+        const canvasContextProps = import_core25.Device._getCanvasContextProps(props);
         if (!canvasContextProps) {
           throw new Error("WebGLDevice requires props.createCanvasContext to be set");
         }
@@ -4868,6 +5037,9 @@ var init_webgl_device = __esm({
         if (props.powerPreference !== void 0) {
           webglContextAttributes.powerPreference = props.powerPreference;
         }
+        if (props.failIfMajorPerformanceCaveat !== void 0) {
+          webglContextAttributes.failIfMajorPerformanceCaveat = props.failIfMajorPerformanceCaveat;
+        }
         const externalGLContext = this.props._handle;
         const gl = externalGLContext || createBrowserContext(this.canvasContext.canvas, {
           onContextLost: (event) => {
@@ -4886,7 +5058,7 @@ var init_webgl_device = __esm({
         device = gl.device;
         if (device) {
           if (props._reuseDevices) {
-            import_core23.log.log(1, `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`, device)();
+            import_core25.log.log(1, `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`, device)();
             device._reused = true;
             return device;
           }
@@ -4896,7 +5068,6 @@ var init_webgl_device = __esm({
         this.gl = gl;
         this.spectorJS = initializeSpectorJS({ ...this.props, gl: this.handle });
         this.gl.device = this;
-        this.gl._version = 2;
         this.info = getDeviceInfo(this.gl, this._extensions);
         this.limits = new WebGLDeviceLimits(this.gl);
         this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props._disabledFeatures);
@@ -4904,17 +5075,15 @@ var init_webgl_device = __esm({
           this.features.initializeFeatures();
         }
         const glState = new WebGLStateTracker(this.gl, {
-          log: (...args) => import_core23.log.log(1, ...args)()
+          log: (...args) => import_core25.log.log(1, ...args)()
         });
         glState.trackState(this.gl, { copyState: false });
-        const debugWebGL = props.debugWebGL || props.debug;
-        const traceWebGL = props.debugWebGL;
-        if (debugWebGL) {
-          this.gl = makeDebugContext(this.gl, { debugWebGL, traceWebGL });
-          import_core23.log.warn("WebGL debug mode activated. Performance reduced.")();
-          if (props.debugWebGL) {
-            import_core23.log.level = Math.max(import_core23.log.level, 1);
-          }
+        if (props.debug || props.debugWebGL) {
+          this.gl = makeDebugContext(this.gl, { debugWebGL: true, traceWebGL: props.debugWebGL });
+          import_core25.log.warn("WebGL debug mode activated. Performance reduced.")();
+        }
+        if (props.debugWebGL) {
+          import_core25.log.level = Math.max(import_core25.log.level, 1);
         }
         this.commandEncoder = new WEBGLCommandEncoder(this, { id: `${this}-command-encoder` });
       }
@@ -4937,9 +5106,6 @@ var init_webgl_device = __esm({
         return this.gl.isContextLost();
       }
       // IMPLEMENTATION OF ABSTRACT DEVICE
-      getTextureByteAlignment() {
-        return 4;
-      }
       createCanvasContext(props) {
         throw new Error("WebGL only supports a single canvas");
       }
@@ -4971,6 +5137,9 @@ var init_webgl_device = __esm({
       createQuerySet(props) {
         return new WEBGLQuerySet(this, props);
       }
+      createFence() {
+        return new WEBGLFence(this);
+      }
       createRenderPipeline(props) {
         return new WEBGLRenderPipeline(this, props);
       }
@@ -5014,7 +5183,7 @@ var init_webgl_device = __esm({
         return withGLParameters(this.gl, parameters, func);
       }
       resetWebGL() {
-        import_core23.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
+        import_core25.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
         resetGLParameters(this.gl);
       }
       _getDeviceSpecificTextureFormatCapabilities(capabilities) {
@@ -5087,7 +5256,7 @@ var init_webgl_device = __esm({
         this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
         const currentConstant = this._constants[location];
         if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-          import_core23.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
+          import_core25.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
         }
         this._constants[location] = constant;
         switch (constant.constructor) {
@@ -5128,23 +5297,23 @@ function isWebGL(gl) {
   if (typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext) {
     return true;
   }
-  return Boolean(gl && Number.isFinite(gl._version));
+  return Boolean(gl && typeof gl.createVertexArray === "function");
 }
-var import_core24, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
+var import_core26, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
 var init_webgl_adapter = __esm({
   "dist/adapter/webgl-adapter.js"() {
     "use strict";
-    import_core24 = require("@luma.gl/core");
+    import_core26 = require("@luma.gl/core");
     init_polyfill_webgl1_extensions();
     init_spector();
     init_webgl_developer_tools();
     LOG_LEVEL2 = 1;
-    WebGLAdapter = class extends import_core24.Adapter {
+    WebGLAdapter = class extends import_core26.Adapter {
       /** type of device's created by this adapter */
       type = "webgl";
       constructor() {
         super();
-        import_core24.Device.defaultProps = { ...import_core24.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
+        import_core26.Device.defaultProps = { ...import_core26.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
       }
       /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
       enforceWebGL2(enable2) {
@@ -5159,7 +5328,7 @@ var init_webgl_adapter = __esm({
           return true;
         }
         if (typeof WebGLRenderingContext !== "undefined" && handle instanceof WebGLRenderingContext) {
-          import_core24.log.warn("WebGL1 is not supported", handle)();
+          import_core26.log.warn("WebGL1 is not supported", handle)();
         }
         return false;
       }
@@ -5190,28 +5359,29 @@ var init_webgl_adapter = __esm({
       }
       async create(props = {}) {
         const { WebGLDevice: WebGLDevice2 } = await Promise.resolve().then(() => (init_webgl_device(), webgl_device_exports));
-        import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
-        try {
-          const promises = [];
-          if (props.debugWebGL || props.debug) {
-            promises.push(loadWebGLDeveloperTools());
-          }
-          if (props.debugSpectorJS) {
-            promises.push(loadSpectorJS(props));
-          }
-          const results = await Promise.allSettled(promises);
-          for (const result of results) {
-            if (result.status === "rejected") {
-              import_core24.log.error(`Failed to initialize debug libraries ${result.reason}`)();
-            }
+        const promises = [];
+        if (props.debugWebGL || props.debug) {
+          promises.push(loadWebGLDeveloperTools());
+        }
+        if (props.debugSpectorJS) {
+          promises.push(loadSpectorJS(props));
+        }
+        const results = await Promise.allSettled(promises);
+        for (const result of results) {
+          if (result.status === "rejected") {
+            import_core26.log.error(`Failed to initialize debug libraries ${result.reason}`)();
           }
+        }
+        try {
           const device = new WebGLDevice2(props);
+          import_core26.log.groupCollapsed(LOG_LEVEL2, `WebGLDevice ${device.id} created`)();
           const message2 = `${device._reused ? "Reusing" : "Created"} device with WebGL2 ${device.props.debug ? "debug " : ""}context: ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
-          import_core24.log.probe(LOG_LEVEL2, message2)();
-          import_core24.log.table(LOG_LEVEL2, device.info)();
+          import_core26.log.probe(LOG_LEVEL2, message2)();
+          import_core26.log.table(LOG_LEVEL2, device.info)();
           return device;
         } finally {
-          import_core24.log.groupEnd(LOG_LEVEL2)();
+          import_core26.log.groupEnd(LOG_LEVEL2)();
+          import_core26.log.info(LOG_LEVEL2, `%cWebGL call tracing: luma.log.set('debug-webgl') `, "color: white; background: blue; padding: 2px 6px; border-radius: 3px;")();
         }
       }
     };
@@ -5224,6 +5394,7 @@ var dist_exports = {};
 __export(dist_exports, {
   WEBGLBuffer: () => WEBGLBuffer,
   WEBGLCommandEncoder: () => WEBGLCommandEncoder,
+  WEBGLFence: () => WEBGLFence,
   WEBGLFramebuffer: () => WEBGLFramebuffer,
   WEBGLRenderPass: () => WEBGLRenderPass,
   WEBGLRenderPipeline: () => WEBGLRenderPipeline,
@@ -5255,6 +5426,7 @@ var init_dist = __esm({
     init_webgl_shader();
     init_webgl_sampler();
     init_webgl_framebuffer();
+    init_webgl_fence();
     init_webgl_render_pipeline();
     init_webgl_command_encoder();
     init_webgl_render_pass();