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

package/dist/dist.dev.js

@@ -1059,16 +1059,24 @@ var __exports__ = (() => {
     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) {
@@ -1822,42 +1830,57 @@ var __exports__ = (() => {
   // src/context/helpers/create-browser-context.ts
   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({
     "src/context/helpers/create-browser-context.ts"() {
@@ -2608,14 +2631,24 @@ var __exports__ = (() => {
           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() {
+          const shouldResize = this.drawingBufferWidth !== this._framebuffer?.width || this.drawingBufferHeight !== this._framebuffer?.height;
+          if (shouldResize) {
+            this._framebuffer?.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;
         }
       };
     }
@@ -3400,6 +3433,127 @@ ${source}`;
     }
   });
 
+  // src/adapter/converters/webgl-shadertypes.ts
+  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 WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL, WEBGL_TO_NORMALIZED_DATA_TYPE;
+  var init_webgl_shadertypes = __esm({
+    "src/adapter/converters/webgl-shadertypes.ts"() {
+      "use strict";
+      WEBGL_SHADER_TYPES = {
+        [5126 /* FLOAT */]: "f32",
+        [35664 /* FLOAT_VEC2 */]: "vec2<f32>",
+        [35665 /* FLOAT_VEC3 */]: "vec3<f32>",
+        [35666 /* FLOAT_VEC4 */]: "vec4<f32>",
+        [5124 /* INT */]: "i32",
+        [35667 /* INT_VEC2 */]: "vec2<i32>",
+        [35668 /* INT_VEC3 */]: "vec3<i32>",
+        [35669 /* INT_VEC4 */]: "vec4<i32>",
+        [5125 /* UNSIGNED_INT */]: "u32",
+        [36294 /* UNSIGNED_INT_VEC2 */]: "vec2<u32>",
+        [36295 /* UNSIGNED_INT_VEC3 */]: "vec3<u32>",
+        [36296 /* UNSIGNED_INT_VEC4 */]: "vec4<u32>",
+        [35670 /* BOOL */]: "f32",
+        [35671 /* BOOL_VEC2 */]: "vec2<f32>",
+        [35672 /* BOOL_VEC3 */]: "vec3<f32>",
+        [35673 /* BOOL_VEC4 */]: "vec4<f32>",
+        // TODO - are sizes/components below correct?
+        [35674 /* FLOAT_MAT2 */]: "mat2x2<f32>",
+        [35685 /* FLOAT_MAT2x3 */]: "mat2x3<f32>",
+        [35686 /* FLOAT_MAT2x4 */]: "mat2x4<f32>",
+        [35687 /* FLOAT_MAT3x2 */]: "mat3x2<f32>",
+        [35675 /* FLOAT_MAT3 */]: "mat3x3<f32>",
+        [35688 /* FLOAT_MAT3x4 */]: "mat3x4<f32>",
+        [35689 /* FLOAT_MAT4x2 */]: "mat4x2<f32>",
+        [35690 /* FLOAT_MAT4x3 */]: "mat4x3<f32>",
+        [35676 /* FLOAT_MAT4 */]: "mat4x4<f32>"
+      };
+      WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
+        [35678 /* SAMPLER_2D */]: { viewDimension: "2d", sampleType: "float" },
+        [35680 /* SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "float" },
+        [35679 /* SAMPLER_3D */]: { viewDimension: "3d", sampleType: "float" },
+        [35682 /* SAMPLER_2D_SHADOW */]: { viewDimension: "3d", sampleType: "depth" },
+        [36289 /* SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "float" },
+        [36292 /* SAMPLER_2D_ARRAY_SHADOW */]: { viewDimension: "2d-array", sampleType: "depth" },
+        [36293 /* SAMPLER_CUBE_SHADOW */]: { viewDimension: "cube", sampleType: "float" },
+        [36298 /* INT_SAMPLER_2D */]: { viewDimension: "2d", sampleType: "sint" },
+        [36299 /* INT_SAMPLER_3D */]: { viewDimension: "3d", sampleType: "sint" },
+        [36300 /* INT_SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "sint" },
+        [36303 /* INT_SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "uint" },
+        [36306 /* UNSIGNED_INT_SAMPLER_2D */]: { viewDimension: "2d", sampleType: "uint" },
+        [36307 /* UNSIGNED_INT_SAMPLER_3D */]: { viewDimension: "3d", sampleType: "uint" },
+        [36308 /* UNSIGNED_INT_SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "uint" },
+        [36311 /* UNSIGNED_INT_SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "uint" }
+      };
+      NORMALIZED_SHADER_TYPE_TO_WEBGL = {
+        uint8: 5121 /* UNSIGNED_BYTE */,
+        sint8: 5120 /* BYTE */,
+        unorm8: 5121 /* UNSIGNED_BYTE */,
+        snorm8: 5120 /* BYTE */,
+        uint16: 5123 /* UNSIGNED_SHORT */,
+        sint16: 5122 /* SHORT */,
+        unorm16: 5123 /* UNSIGNED_SHORT */,
+        snorm16: 5122 /* SHORT */,
+        uint32: 5125 /* UNSIGNED_INT */,
+        sint32: 5124 /* INT */,
+        // WebGPU does not support normalized 32 bit integer attributes
+        //  'unorm32': GL.UNSIGNED_INT,
+        //  'snorm32': GL.INT,
+        float16: 5131 /* HALF_FLOAT */,
+        float32: 5126 /* FLOAT */
+      };
+      WEBGL_TO_NORMALIZED_DATA_TYPE = {
+        [5120 /* BYTE */]: ["sint8", "snorm16"],
+        [5121 /* UNSIGNED_BYTE */]: ["uint8", "unorm8"],
+        [5122 /* SHORT */]: ["sint16", "unorm16"],
+        [5123 /* UNSIGNED_SHORT */]: ["uint16", "unorm16"],
+        [5124 /* INT */]: ["sint32", "sint32"],
+        [5125 /* UNSIGNED_INT */]: ["uint32", "uint32"],
+        [5126 /* FLOAT */]: ["float32", "float32"],
+        [5131 /* HALF_FLOAT */]: ["float16", "float16"]
+      };
+    }
+  });
+
+  // src/adapter/converters/shader-formats.ts
+  function convertGLDataTypeToDataType(type) {
+    return GL_DATA_TYPE_MAP[type];
+  }
+  var GL_DATA_TYPE_MAP;
+  var init_shader_formats = __esm({
+    "src/adapter/converters/shader-formats.ts"() {
+      "use strict";
+      GL_DATA_TYPE_MAP = {
+        [5124 /* INT */]: "sint32",
+        [5125 /* UNSIGNED_INT */]: "uint32",
+        [5122 /* SHORT */]: "sint16",
+        [5123 /* UNSIGNED_SHORT */]: "uint16",
+        [5120 /* BYTE */]: "sint8",
+        [5121 /* UNSIGNED_BYTE */]: "uint8",
+        [5126 /* FLOAT */]: "float32",
+        [5131 /* HALF_FLOAT */]: "float16",
+        [33635 /* UNSIGNED_SHORT_5_6_5 */]: "uint16",
+        [32819 /* UNSIGNED_SHORT_4_4_4_4 */]: "uint16",
+        [32820 /* UNSIGNED_SHORT_5_5_5_1 */]: "uint16",
+        [33640 /* UNSIGNED_INT_2_10_10_10_REV */]: "uint32",
+        [35899 /* UNSIGNED_INT_10F_11F_11F_REV */]: "uint32",
+        [35902 /* UNSIGNED_INT_5_9_9_9_REV */]: "uint32",
+        [34042 /* UNSIGNED_INT_24_8 */]: "uint32",
+        [36269 /* FLOAT_32_UNSIGNED_INT_24_8_REV */]: "uint32"
+      };
+    }
+  });
+
   // src/adapter/resources/webgl-texture.ts
   function getWebGLTextureTarget(dimension) {
     switch (dimension) {
@@ -3421,7 +3575,7 @@ ${source}`;
   function getWebGLCubeFaceTarget(glTarget, dimension, level) {
     return dimension === "cube" ? 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + level : glTarget;
   }
-  var import_core13, WEBGLTexture;
+  var import_core13, import_core14, WEBGLTexture;
   var init_webgl_texture = __esm({
     "src/adapter/resources/webgl-texture.ts"() {
       "use strict";
@@ -3430,6 +3584,9 @@ ${source}`;
       init_sampler_parameters();
       init_with_parameters();
       init_webgl_texture_view();
+      init_webgl_shadertypes();
+      init_shader_formats();
+      import_core14 = __toESM(require_core(), 1);
       WEBGLTexture = class extends import_core13.Texture {
         // readonly MAX_ATTRIBUTES: number;
         device;
@@ -3459,8 +3616,10 @@ ${source}`;
         // 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);
@@ -3493,6 +3652,8 @@ ${source}`;
         }
         destroy() {
           if (this.handle) {
+            this._framebuffer?.destroy();
+            this._framebuffer = null;
             this.gl.deleteTexture(this.handle);
             this.removeStats();
             this.trackDeallocatedMemory("Texture");
@@ -3507,11 +3668,37 @@ ${source}`;
           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 /* UNPACK_FLIP_Y_WEBGL */]: 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;
@@ -3527,10 +3714,11 @@ ${source}`;
             }
           }
           const glParameters = !this.compressed ? {
+            [3317 /* UNPACK_ALIGNMENT */]: this.byteAlignment,
             ...unpackRowLength !== void 0 ? { [3314 /* UNPACK_ROW_LENGTH */]: unpackRowLength } : {},
             [32878 /* UNPACK_IMAGE_HEIGHT */]: options.rowsPerImage
           } : {};
-          this.gl.bindTexture(glTarget, this.handle);
+          this.gl.bindTexture(this.glTarget, this.handle);
           withGLParameters(this.gl, glParameters, () => {
             switch (this.dimension) {
               case "2d":
@@ -3552,35 +3740,103 @@ ${source}`;
               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 /* UNPACK_FLIP_Y_WEBGL */]: 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 /* UNPACK_ALIGNMENT */]: this.byteAlignment
+            // [GL.UNPACK_ROW_LENGTH]: bytesPerRow,
+            // [GL.UNPACK_IMAGE_HEIGHT]: rowsPerImage
+          } : {};
+          this.gl.bindTexture(glTarget, this.handle);
+          this.gl.bindBuffer(35052 /* PIXEL_UNPACK_BUFFER */, 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 */,
+            framebuffer.handle
+          );
+          this.gl.readBuffer(36064 /* COLOR_ATTACHMENT0 */);
+          this.gl.readPixels(
+            options.x,
+            options.y,
+            options.width,
+            options.height,
+            this.glFormat,
+            sourceType,
+            targetArray
+          );
+          this.gl.bindFramebuffer(36160 /* FRAMEBUFFER */, 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) {
@@ -3660,98 +3916,6 @@ ${source}`;
     }
   });
 
-  // src/adapter/converters/webgl-shadertypes.ts
-  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 WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL, WEBGL_TO_NORMALIZED_DATA_TYPE;
-  var init_webgl_shadertypes = __esm({
-    "src/adapter/converters/webgl-shadertypes.ts"() {
-      "use strict";
-      WEBGL_SHADER_TYPES = {
-        [5126 /* FLOAT */]: "f32",
-        [35664 /* FLOAT_VEC2 */]: "vec2<f32>",
-        [35665 /* FLOAT_VEC3 */]: "vec3<f32>",
-        [35666 /* FLOAT_VEC4 */]: "vec4<f32>",
-        [5124 /* INT */]: "i32",
-        [35667 /* INT_VEC2 */]: "vec2<i32>",
-        [35668 /* INT_VEC3 */]: "vec3<i32>",
-        [35669 /* INT_VEC4 */]: "vec4<i32>",
-        [5125 /* UNSIGNED_INT */]: "u32",
-        [36294 /* UNSIGNED_INT_VEC2 */]: "vec2<u32>",
-        [36295 /* UNSIGNED_INT_VEC3 */]: "vec3<u32>",
-        [36296 /* UNSIGNED_INT_VEC4 */]: "vec4<u32>",
-        [35670 /* BOOL */]: "f32",
-        [35671 /* BOOL_VEC2 */]: "vec2<f32>",
-        [35672 /* BOOL_VEC3 */]: "vec3<f32>",
-        [35673 /* BOOL_VEC4 */]: "vec4<f32>",
-        // TODO - are sizes/components below correct?
-        [35674 /* FLOAT_MAT2 */]: "mat2x2<f32>",
-        [35685 /* FLOAT_MAT2x3 */]: "mat2x3<f32>",
-        [35686 /* FLOAT_MAT2x4 */]: "mat2x4<f32>",
-        [35687 /* FLOAT_MAT3x2 */]: "mat3x2<f32>",
-        [35675 /* FLOAT_MAT3 */]: "mat3x3<f32>",
-        [35688 /* FLOAT_MAT3x4 */]: "mat3x4<f32>",
-        [35689 /* FLOAT_MAT4x2 */]: "mat4x2<f32>",
-        [35690 /* FLOAT_MAT4x3 */]: "mat4x3<f32>",
-        [35676 /* FLOAT_MAT4 */]: "mat4x4<f32>"
-      };
-      WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
-        [35678 /* SAMPLER_2D */]: { viewDimension: "2d", sampleType: "float" },
-        [35680 /* SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "float" },
-        [35679 /* SAMPLER_3D */]: { viewDimension: "3d", sampleType: "float" },
-        [35682 /* SAMPLER_2D_SHADOW */]: { viewDimension: "3d", sampleType: "depth" },
-        [36289 /* SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "float" },
-        [36292 /* SAMPLER_2D_ARRAY_SHADOW */]: { viewDimension: "2d-array", sampleType: "depth" },
-        [36293 /* SAMPLER_CUBE_SHADOW */]: { viewDimension: "cube", sampleType: "float" },
-        [36298 /* INT_SAMPLER_2D */]: { viewDimension: "2d", sampleType: "sint" },
-        [36299 /* INT_SAMPLER_3D */]: { viewDimension: "3d", sampleType: "sint" },
-        [36300 /* INT_SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "sint" },
-        [36303 /* INT_SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "uint" },
-        [36306 /* UNSIGNED_INT_SAMPLER_2D */]: { viewDimension: "2d", sampleType: "uint" },
-        [36307 /* UNSIGNED_INT_SAMPLER_3D */]: { viewDimension: "3d", sampleType: "uint" },
-        [36308 /* UNSIGNED_INT_SAMPLER_CUBE */]: { viewDimension: "cube", sampleType: "uint" },
-        [36311 /* UNSIGNED_INT_SAMPLER_2D_ARRAY */]: { viewDimension: "2d-array", sampleType: "uint" }
-      };
-      NORMALIZED_SHADER_TYPE_TO_WEBGL = {
-        uint8: 5121 /* UNSIGNED_BYTE */,
-        sint8: 5120 /* BYTE */,
-        unorm8: 5121 /* UNSIGNED_BYTE */,
-        snorm8: 5120 /* BYTE */,
-        uint16: 5123 /* UNSIGNED_SHORT */,
-        sint16: 5122 /* SHORT */,
-        unorm16: 5123 /* UNSIGNED_SHORT */,
-        snorm16: 5122 /* SHORT */,
-        uint32: 5125 /* UNSIGNED_INT */,
-        sint32: 5124 /* INT */,
-        // WebGPU does not support normalized 32 bit integer attributes
-        //  'unorm32': GL.UNSIGNED_INT,
-        //  'snorm32': GL.INT,
-        float16: 5131 /* HALF_FLOAT */,
-        float32: 5126 /* FLOAT */
-      };
-      WEBGL_TO_NORMALIZED_DATA_TYPE = {
-        [5120 /* BYTE */]: ["sint8", "snorm16"],
-        [5121 /* UNSIGNED_BYTE */]: ["uint8", "unorm8"],
-        [5122 /* SHORT */]: ["sint16", "unorm16"],
-        [5123 /* UNSIGNED_SHORT */]: ["uint16", "unorm16"],
-        [5124 /* INT */]: ["sint32", "sint32"],
-        [5125 /* UNSIGNED_INT */]: ["uint32", "uint32"],
-        [5126 /* FLOAT */]: ["float32", "float32"],
-        [5131 /* HALF_FLOAT */]: ["float16", "float16"]
-      };
-    }
-  });
-
   // src/adapter/helpers/get-shader-layout-from-glsl.ts
   function getShaderLayoutFromGLSL(gl, program) {
     const shaderLayout = {
@@ -3843,7 +4007,7 @@ ${source}`;
       }
       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);
@@ -3944,11 +4108,11 @@ ${source}`;
       isArray: Boolean(matches[2])
     };
   }
-  var import_core14;
+  var import_core15;
   var init_get_shader_layout_from_glsl = __esm({
     "src/adapter/helpers/get-shader-layout-from-glsl.ts"() {
       "use strict";
-      import_core14 = __toESM(require_core(), 1);
+      import_core15 = __toESM(require_core(), 1);
       init_webgl_shadertypes();
     }
   });
@@ -4091,7 +4255,7 @@ ${source}`;
     for (const attribute of 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;
@@ -4099,11 +4263,11 @@ ${source}`;
     }
     return mergedLayout;
   }
-  var import_core15, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
+  var import_core16, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
   var init_webgl_render_pipeline = __esm({
     "src/adapter/resources/webgl-render-pipeline.ts"() {
       "use strict";
-      import_core15 = __toESM(require_core(), 1);
+      import_core16 = __toESM(require_core(), 1);
       init_get_shader_layout_from_glsl();
       init_device_parameters();
       init_set_uniform();
@@ -4113,7 +4277,7 @@ ${source}`;
       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 */
@@ -4149,9 +4313,9 @@ ${source}`;
             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() {
@@ -4173,7 +4337,7 @@ ${source}`;
             if (!binding) {
               const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
               if (!options?.disableWarnings) {
-                import_core15.log.warn(
+                import_core16.log.warn(
                   `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
                   value
                 )();
@@ -4181,7 +4345,7 @@ ${source}`;
               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":
@@ -4195,7 +4359,7 @@ ${source}`;
                 }
                 break;
               case "sampler":
-                import_core15.log.warn(`Ignoring sampler ${name}`)();
+                import_core16.log.warn(`Ignoring sampler ${name}`)();
                 break;
               default:
                 throw new Error(binding.type);
@@ -4227,11 +4391,11 @@ ${source}`;
           const isIndexed = Boolean(vertexArray.indexBuffer);
           const glIndexType = vertexArray.indexBuffer?.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);
@@ -4278,19 +4442,19 @@ ${source}`;
           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);
         }
@@ -4378,7 +4542,7 @@ ${source}`;
           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;
             }
           }
@@ -4432,7 +4596,7 @@ ${source}`;
                 } else if (value instanceof WEBGLTexture) {
                   texture = value;
                 } else if (value instanceof WEBGLFramebuffer && value.colorAttachments[0] instanceof WEBGLTextureView) {
-                  import_core15.log.warn(
+                  import_core16.log.warn(
                     "Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead"
                   )();
                   texture = value.colorAttachments[0].texture;
@@ -4639,7 +4803,7 @@ ${source}`;
     }
   }
   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}`,
@@ -4651,14 +4815,14 @@ ${source}`;
     }
     return { framebuffer: source, destroyFramebuffer: false };
   }
-  var import_core16, WEBGLCommandBuffer;
+  var import_core17, WEBGLCommandBuffer;
   var init_webgl_command_buffer = __esm({
     "src/adapter/resources/webgl-command-buffer.ts"() {
       "use strict";
-      import_core16 = __toESM(require_core(), 1);
+      import_core17 = __toESM(require_core(), 1);
       init_webgl_texture();
       init_webgl_texture_table();
-      WEBGLCommandBuffer = class extends import_core16.CommandBuffer {
+      WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
         device;
         handle = null;
         commands = [];
@@ -4691,15 +4855,15 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-render-pass.ts
-  var import_core17, COLOR_CHANNELS, WEBGLRenderPass;
+  var import_core18, COLOR_CHANNELS, WEBGLRenderPass;
   var init_webgl_render_pass = __esm({
     "src/adapter/resources/webgl-render-pass.ts"() {
       "use strict";
-      import_core17 = __toESM(require_core(), 1);
+      import_core18 = __toESM(require_core(), 1);
       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 */
@@ -4725,7 +4889,7 @@ ${source}`;
               (_, i) => 36064 /* COLOR_ATTACHMENT0 */ + i
             );
             this.device.gl.drawBuffers(drawBuffers);
-          } else {
+          } else if (!this.props.framebuffer) {
             this.device.gl.drawBuffers([1029 /* BACK */]);
           }
           this.clear();
@@ -4771,9 +4935,9 @@ ${source}`;
           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 /* STENCIL_REF */] = parameters.stencilReference;
+            glParameters[36003 /* STENCIL_BACK_REF */] = parameters.stencilReference;
           }
           if ("colorMask" in parameters) {
             glParameters.colorMask = COLOR_CHANNELS.map(
@@ -4873,14 +5037,14 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-command-encoder.ts
-  var import_core18, WEBGLCommandEncoder;
+  var import_core19, WEBGLCommandEncoder;
   var init_webgl_command_encoder = __esm({
     "src/adapter/resources/webgl-command-encoder.ts"() {
       "use strict";
-      import_core18 = __toESM(require_core(), 1);
+      import_core19 = __toESM(require_core(), 1);
       init_webgl_command_buffer();
       init_webgl_render_pass();
-      WEBGLCommandEncoder = class extends import_core18.CommandEncoder {
+      WEBGLCommandEncoder = class extends import_core19.CommandEncoder {
         device;
         handle = null;
         commandBuffer;
@@ -4971,15 +5135,15 @@ ${source}`;
     }
     return true;
   }
-  var import_core19, WEBGLVertexArray;
+  var import_core20, WEBGLVertexArray;
   var init_webgl_vertex_array = __esm({
     "src/adapter/resources/webgl-vertex-array.ts"() {
       "use strict";
-      import_core19 = __toESM(require_core(), 1);
+      import_core20 = __toESM(require_core(), 1);
       init_dist();
       init_webgl_vertex_formats();
       init_fill_array();
-      WEBGLVertexArray = class extends import_core19.VertexArray {
+      WEBGLVertexArray = class extends import_core20.VertexArray {
         get [Symbol.toStringTag]() {
           return "VertexArray";
         }
@@ -5147,7 +5311,7 @@ ${source}`;
           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;
@@ -5165,14 +5329,14 @@ ${source}`;
     }
     return /^\d+$/.test(value);
   }
-  var import_core20, WEBGLTransformFeedback;
+  var import_core21, WEBGLTransformFeedback;
   var init_webgl_transform_feedback = __esm({
     "src/adapter/resources/webgl-transform-feedback.ts"() {
       "use strict";
-      import_core20 = __toESM(require_core(), 1);
+      import_core21 = __toESM(require_core(), 1);
       init_src2();
       init_webgl_topology_utils();
-      WEBGLTransformFeedback = class extends import_core20.TransformFeedback {
+      WEBGLTransformFeedback = class extends import_core21.TransformFeedback {
         device;
         gl;
         handle;
@@ -5235,7 +5399,7 @@ ${source}`;
           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 };
@@ -5318,12 +5482,12 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-query-set.ts
-  var import_core21, WEBGLQuerySet;
+  var import_core22, WEBGLQuerySet;
   var init_webgl_query_set = __esm({
     "src/adapter/resources/webgl-query-set.ts"() {
       "use strict";
-      import_core21 = __toESM(require_core(), 1);
-      WEBGLQuerySet = class extends import_core21.QuerySet {
+      import_core22 = __toESM(require_core(), 1);
+      WEBGLQuerySet = class extends import_core22.QuerySet {
         device;
         handle;
         target = null;
@@ -5461,6 +5625,57 @@ ${source}`;
     }
   });
 
+  // src/adapter/resources/webgl-fence.ts
+  var import_core23, WEBGLFence;
+  var init_webgl_fence = __esm({
+    "src/adapter/resources/webgl-fence.ts"() {
+      "use strict";
+      import_core23 = __toESM(require_core(), 1);
+      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);
+          }
+        }
+      };
+    }
+  });
+
   // src/adapter/helpers/format-utils.ts
   function glFormatToComponents(format) {
     switch (format) {
@@ -5507,35 +5722,6 @@ ${source}`;
     }
   });
 
-  // src/adapter/converters/shader-formats.ts
-  function convertGLDataTypeToDataType(type) {
-    return GL_DATA_TYPE_MAP[type];
-  }
-  var GL_DATA_TYPE_MAP;
-  var init_shader_formats = __esm({
-    "src/adapter/converters/shader-formats.ts"() {
-      "use strict";
-      GL_DATA_TYPE_MAP = {
-        [5124 /* INT */]: "sint32",
-        [5125 /* UNSIGNED_INT */]: "uint32",
-        [5122 /* SHORT */]: "sint16",
-        [5123 /* UNSIGNED_SHORT */]: "uint16",
-        [5120 /* BYTE */]: "sint8",
-        [5121 /* UNSIGNED_BYTE */]: "uint8",
-        [5126 /* FLOAT */]: "float32",
-        [5131 /* HALF_FLOAT */]: "float16",
-        [33635 /* UNSIGNED_SHORT_5_6_5 */]: "uint16",
-        [32819 /* UNSIGNED_SHORT_4_4_4_4 */]: "uint16",
-        [32820 /* UNSIGNED_SHORT_5_5_5_1 */]: "uint16",
-        [33640 /* UNSIGNED_INT_2_10_10_10_REV */]: "uint32",
-        [35899 /* UNSIGNED_INT_10F_11F_11F_REV */]: "uint32",
-        [35902 /* UNSIGNED_INT_5_9_9_9_REV */]: "uint32",
-        [34042 /* UNSIGNED_INT_24_8 */]: "uint32",
-        [36269 /* FLOAT_32_UNSIGNED_INT_24_8_REV */]: "uint32"
-      };
-    }
-  });
-
   // src/adapter/helpers/webgl-texture-utils.ts
   function readPixelsToArray(source, options) {
     const {
@@ -5565,7 +5751,7 @@ ${source}`;
     sourceFormat ||= texture?.glFormat || 6408 /* RGBA */;
     sourceType ||= texture?.glType || 5121 /* UNSIGNED_BYTE */;
     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 /* FRAMEBUFFER */,
@@ -5617,7 +5803,7 @@ ${source}`;
     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 };
@@ -5639,15 +5825,15 @@ ${source}`;
     }
     glType ||= 5121 /* UNSIGNED_BYTE */;
     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;
+  var import_core24;
   var init_webgl_texture_utils = __esm({
     "src/adapter/helpers/webgl-texture-utils.ts"() {
       "use strict";
-      import_core22 = __toESM(require_core(), 1);
+      import_core24 = __toESM(require_core(), 1);
       init_webgl_shadertypes();
       init_format_utils();
       init_shader_formats();
@@ -5693,11 +5879,11 @@ ${source}`;
     }
     return true;
   }
-  var import_core23, WebGLDevice;
+  var import_core25, WebGLDevice;
   var init_webgl_device = __esm({
     "src/adapter/webgl-device.ts"() {
       "use strict";
-      import_core23 = __toESM(require_core(), 1);
+      import_core25 = __toESM(require_core(), 1);
       init_webgl_state_tracker();
       init_create_browser_context();
       init_webgl_device_info();
@@ -5718,11 +5904,12 @@ ${source}`;
       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";
@@ -5767,7 +5954,7 @@ ${source}`;
         }
         constructor(props) {
           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");
           }
@@ -5786,6 +5973,9 @@ ${source}`;
           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,
@@ -5805,7 +5995,7 @@ ${source}`;
           device = gl.device;
           if (device) {
             if (props._reuseDevices) {
-              import_core23.log.log(
+              import_core25.log.log(
                 1,
                 `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`,
                 device
@@ -5819,7 +6009,6 @@ ${source}`;
           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(
@@ -5831,17 +6020,15 @@ ${source}`;
             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` });
         }
@@ -5864,9 +6051,6 @@ ${source}`;
           return this.gl.isContextLost();
         }
         // IMPLEMENTATION OF ABSTRACT DEVICE
-        getTextureByteAlignment() {
-          return 4;
-        }
         createCanvasContext(props) {
           throw new Error("WebGL only supports a single canvas");
         }
@@ -5898,6 +6082,9 @@ ${source}`;
         createQuerySet(props) {
           return new WEBGLQuerySet(this, props);
         }
+        createFence() {
+          return new WEBGLFence(this);
+        }
         createRenderPipeline(props) {
           return new WEBGLRenderPipeline(this, props);
         }
@@ -5941,7 +6128,7 @@ ${source}`;
           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) {
@@ -6013,7 +6200,7 @@ ${source}`;
           this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
           const currentConstant = this._constants[location];
           if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-            import_core23.log.info(
+            import_core25.log.info(
               1,
               `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`
             )();
@@ -6057,23 +6244,23 @@ ${source}`;
     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({
     "src/adapter/webgl-adapter.ts"() {
       "use strict";
-      import_core24 = __toESM(require_core(), 1);
+      import_core26 = __toESM(require_core(), 1);
       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) {
@@ -6088,7 +6275,7 @@ ${source}`;
             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;
         }
@@ -6119,28 +6306,33 @@ ${source}`;
         }
         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;"
+            )();
           }
         }
       };
@@ -6160,6 +6352,7 @@ ${source}`;
       init_webgl_shader();
       init_webgl_sampler();
       init_webgl_framebuffer();
+      init_webgl_fence();
       init_webgl_render_pipeline();
       init_webgl_command_encoder();
       init_webgl_render_pass();
@@ -6178,6 +6371,7 @@ ${source}`;
   __export(bundle_exports, {
     WEBGLBuffer: () => WEBGLBuffer,
     WEBGLCommandEncoder: () => WEBGLCommandEncoder,
+    WEBGLFence: () => WEBGLFence,
     WEBGLFramebuffer: () => WEBGLFramebuffer,
     WEBGLRenderPass: () => WEBGLRenderPass,
     WEBGLRenderPipeline: () => WEBGLRenderPipeline,