@luma.gl/webgl 9.1.0-alpha.15 → 9.1.0-alpha.16

package/dist/dist.dev.js

@@ -14,9 +14,9 @@ var __exports__ = (() => {
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
-  var __export = (target, all) => {
+  var __export = (target2, all) => {
     for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+      __defProp(target2, name, { get: all[name], enumerable: true });
   };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
@@ -26,13 +26,13 @@ var __exports__ = (() => {
     }
     return to;
   };
-  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  var __reExport = (target2, mod, secondTarget) => (__copyProps(target2, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -815,8 +815,8 @@ var __exports__ = (() => {
   var hint = (gl, value, key) => gl.hint(key, value);
   var pixelStorei = (gl, value, key) => gl.pixelStorei(key, value);
   var bindFramebuffer = (gl, value, key) => {
-    const target = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
-    return gl.bindFramebuffer(target, value);
+    const target2 = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
+    return gl.bindFramebuffer(target2, value);
   };
   var bindBuffer = (gl, value, key) => {
     const bindingMap = {
@@ -1049,17 +1049,17 @@ var __exports__ = (() => {
     useProgram: (update, value) => update({
       [35725 /* CURRENT_PROGRAM */]: value
     }),
-    bindRenderbuffer: (update, target, value) => update({
+    bindRenderbuffer: (update, target2, value) => update({
       [36007 /* RENDERBUFFER_BINDING */]: value
     }),
-    bindTransformFeedback: (update, target, value) => update({
+    bindTransformFeedback: (update, target2, value) => update({
       [36389 /* TRANSFORM_FEEDBACK_BINDING */]: value
     }),
     bindVertexArray: (update, value) => update({
       [34229 /* VERTEX_ARRAY_BINDING */]: value
     }),
-    bindFramebuffer: (update, target, framebuffer) => {
-      switch (target) {
+    bindFramebuffer: (update, target2, framebuffer) => {
+      switch (target2) {
         case 36160 /* FRAMEBUFFER */:
           return update({
             [36006 /* DRAW_FRAMEBUFFER_BINDING */]: framebuffer,
@@ -1073,14 +1073,14 @@ var __exports__ = (() => {
           return null;
       }
     },
-    bindBuffer: (update, target, buffer) => {
+    bindBuffer: (update, target2, buffer) => {
       const pname = {
         [34962 /* ARRAY_BUFFER */]: [34964 /* ARRAY_BUFFER_BINDING */],
         [36662 /* COPY_READ_BUFFER */]: [36662 /* COPY_READ_BUFFER_BINDING */],
         [36663 /* COPY_WRITE_BUFFER */]: [36663 /* COPY_WRITE_BUFFER_BINDING */],
         [35051 /* PIXEL_PACK_BUFFER */]: [35053 /* PIXEL_PACK_BUFFER_BINDING */],
         [35052 /* PIXEL_UNPACK_BUFFER */]: [35055 /* PIXEL_UNPACK_BUFFER_BINDING */]
-      }[target];
+      }[target2];
       if (pname) {
         return update({ [pname]: buffer });
       }
@@ -1434,37 +1434,31 @@ var __exports__ = (() => {
   }
 
   // src/context/helpers/create-browser-context.ts
-  var DEFAULT_CONTEXT_PROPS = {
-    powerPreference: "high-performance",
-    // After all, most apps are using WebGL for performance reasons
-    // eslint-disable-next-line no-console
-    onContextLost: () => console.error("WebGL context lost"),
-    // eslint-disable-next-line no-console
-    onContextRestored: () => console.info("WebGL context restored")
-  };
-  function createBrowserContext(canvas, props) {
-    props = { ...DEFAULT_CONTEXT_PROPS, ...props };
-    let errorMessage = null;
-    const onCreateError = (error) => errorMessage = error.statusMessage || errorMessage;
-    canvas.addEventListener("webglcontextcreationerror", onCreateError, false);
+  function createBrowserContext(canvas, props, webglContextAttributes) {
+    const errorMessage = null;
+    const webglProps = {
+      preserveDrawingBuffer: true,
+      // failIfMajorPerformanceCaveat: true,
+      ...webglContextAttributes
+    };
     let gl = null;
-    gl ||= canvas.getContext("webgl2", props);
-    canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
+    gl ||= canvas.getContext("webgl2", webglProps);
+    if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
+      webglProps.failIfMajorPerformanceCaveat = false;
+      gl = canvas.getContext("webgl", webglProps);
+      gl.luma ||= {};
+      gl.luma.softwareRenderer = true;
+    }
     if (!gl) {
       throw new Error(`Failed to create WebGL context: ${errorMessage || "Unknown error"}`);
     }
-    if (props.onContextLost) {
-      const { onContextLost } = props;
-      canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
-    }
-    if (props.onContextRestored) {
-      const { onContextRestored } = props;
-      canvas.addEventListener(
-        "webglcontextrestored",
-        (event) => onContextRestored(event),
-        false
-      );
-    }
+    const { onContextLost, onContextRestored } = props;
+    canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+    canvas.addEventListener(
+      "webglcontextrestored",
+      (event) => onContextRestored(event),
+      false
+    );
     return gl;
   }
 
@@ -2341,17 +2335,17 @@ var __exports__ = (() => {
   var spector = null;
   var initialized = false;
   var DEFAULT_SPECTOR_PROPS = {
-    debugWithSpectorJS: import_core6.log.get("spector") || import_core6.log.get("spectorjs"),
+    debugSpectorJS: import_core6.log.get("debug-spectorjs"),
     // https://github.com/BabylonJS/Spector.js#basic-usage
     // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
     // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
-    spectorUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js",
+    debugSpectorJSUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js",
     gl: void 0
   };
   async function loadSpectorJS(props) {
     if (!globalThis.SPECTOR) {
       try {
-        await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
+        await loadScript(props.debugSpectorJSUrl || DEFAULT_SPECTOR_PROPS.debugSpectorJSUrl);
       } catch (error) {
         import_core6.log.warn(String(error));
       }
@@ -2359,13 +2353,13 @@ var __exports__ = (() => {
   }
   function initializeSpectorJS(props) {
     props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-    if (!props.debugWithSpectorJS) {
+    if (!props.debugSpectorJS) {
       return null;
     }
     if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
       import_core6.log.probe(LOG_LEVEL, "SPECTOR found and initialized. Start with `luma.spector.displayUI()`")();
-      const { Spector } = globalThis.SPECTOR;
-      spector = new Spector();
+      const { Spector: SpectorJS } = globalThis.SPECTOR;
+      spector = new SpectorJS();
       if (globalThis.luma) {
         globalThis.luma.spector = spector;
       }
@@ -2468,7 +2462,7 @@ var __exports__ = (() => {
     }
   }
   function makeDebugContext(gl, props = {}) {
-    return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
+    return props.debugWebGL ? getDebugContext(gl, props) : getRealContext(gl);
   }
   function getRealContext(gl) {
     const data = getWebGLContextData(gl);
@@ -2517,9 +2511,6 @@ var __exports__ = (() => {
     const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
     import_core7.log.error(message2)();
     debugger;
-    if (props.throwOnError) {
-      throw new Error(message2);
-    }
   }
   function onValidateGLFunc(props, functionName, functionArgs) {
     let functionString = "";
@@ -2527,24 +2518,10 @@ var __exports__ = (() => {
       functionString = getFunctionString(functionName, functionArgs);
       import_core7.log.log(1, functionString)();
     }
-    if (props.break && props.break.length > 0) {
-      functionString = functionString || getFunctionString(functionName, functionArgs);
-      const isBreakpoint = props.break.every(
-        (breakOn) => functionString.indexOf(breakOn) !== -1
-      );
-      if (isBreakpoint) {
-        debugger;
-      }
-    }
     for (const arg of functionArgs) {
       if (arg === void 0) {
         functionString = functionString || getFunctionString(functionName, functionArgs);
-        if (props.throwOnError) {
-          throw new Error(`Undefined argument: ${functionString}`);
-        } else {
-          import_core7.log.error(`Undefined argument: ${functionString}`)();
-          debugger;
-        }
+        debugger;
       }
     }
   }
@@ -2754,13 +2731,16 @@ var __exports__ = (() => {
         this.destroyed = true;
       }
     }
+    get asyncCompilationStatus() {
+      return this._waitForCompilationComplete().then(() => this.compilationStatus);
+    }
     async getCompilationInfo() {
       await this._waitForCompilationComplete();
       return this.getCompilationInfoSync();
     }
     getCompilationInfoSync() {
-      const log12 = this.device.gl.getShaderInfoLog(this.handle);
-      return log12 ? parseShaderCompilerLog(log12) : [];
+      const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+      return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
     }
     getTranslatedSource() {
       const extensions = this.device.getExtension("WEBGL_debug_shaders");
@@ -2770,9 +2750,8 @@ var __exports__ = (() => {
     // PRIVATE METHODS
     /** Compile a shader and get compilation status */
     async _compile(source) {
-      const addGLSLVersion = (source2) => source2.startsWith("#version ") ? source2 : `#version 300 es
-${source2}`;
-      source = addGLSLVersion(source);
+      source = source.startsWith("#version ") ? source : `#version 300 es
+${source}`;
       const { gl } = this.device;
       gl.shaderSource(this.handle, source);
       gl.compileShader(this.handle);
@@ -3423,7 +3402,7 @@ ${source2}`;
       // TODO - support gl.readBuffer
     } = options || {};
     let {
-      target = null,
+      target: target2 = null,
       // following parameters are auto deduced if not provided
       sourceWidth,
       sourceHeight,
@@ -3439,19 +3418,19 @@ ${source2}`;
     sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
     sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || 6408 /* RGBA */;
     sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || 5121 /* UNSIGNED_BYTE */;
-    target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-    sourceType = sourceType || getGLTypeFromTypedArray(target);
+    target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
+    sourceType = sourceType || getGLTypeFromTypedArray(target2);
     const prevHandle = gl.bindFramebuffer(36160 /* FRAMEBUFFER */, handle);
-    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
+    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
     gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle || null);
     if (deleteFramebuffer) {
       framebuffer.destroy();
     }
-    return target;
+    return target2;
   }
   function readPixelsToBuffer(source, options) {
     const {
-      target,
+      target: target2,
       sourceX = 0,
       sourceY = 0,
       sourceFormat = 6408 /* RGBA */,
@@ -3463,7 +3442,7 @@ ${source2}`;
     sourceHeight = sourceHeight || framebuffer.height;
     const webglFramebuffer = framebuffer;
     sourceType = sourceType || 5121 /* UNSIGNED_BYTE */;
-    let webglBufferTarget = target;
+    let webglBufferTarget = target2;
     if (!webglBufferTarget) {
       const components = glFormatToComponents(sourceFormat);
       const byteCount = glTypeToBytes(sourceType);
@@ -3472,11 +3451,11 @@ ${source2}`;
     }
     const commandEncoder = source.device.createCommandEncoder();
     commandEncoder.copyTextureToBuffer({
-      source,
+      sourceTexture: source,
       width: sourceWidth,
       height: sourceHeight,
       origin: [sourceX, sourceY],
-      destination: webglBufferTarget,
+      destinationBuffer: webglBufferTarget,
       byteOffset: targetByteOffset
     });
     commandEncoder.destroy();
@@ -4634,9 +4613,9 @@ ${source2}`;
      */
     setBindings(bindings, options) {
       for (const [name, value] of Object.entries(bindings)) {
-        const binding = this.shaderLayout.bindings.find((binding2) => binding2.name === name) || this.shaderLayout.bindings.find((binding2) => binding2.name === `${name}Uniforms`);
+        const binding = this.shaderLayout.bindings.find((binding_) => binding_.name === name) || this.shaderLayout.bindings.find((binding_) => binding_.name === `${name}Uniforms`);
         if (!binding) {
-          const validBindings = this.shaderLayout.bindings.map((binding2) => `"${binding2.name}"`).join(", ");
+          const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
           if (!options?.disableWarnings) {
             import_core16.log.warn(
               `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
@@ -4772,20 +4751,33 @@ ${source2}`;
       this._reportLinkStatus(status);
     }
     /** Report link status. First, check for shader compilation failures if linking fails */
-    _reportLinkStatus(status) {
+    async _reportLinkStatus(status) {
       switch (status) {
         case "success":
           return;
         default:
-          if (this.vs.compilationStatus === "error") {
-            this.vs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+          switch (this.vs.compilationStatus) {
+            case "error":
+              this.vs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.vs.id}`);
+            case "pending":
+              this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          if (this.fs?.compilationStatus === "error") {
-            this.fs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+          switch (this.fs?.compilationStatus) {
+            case "error":
+              this.fs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.fs.id}`);
+            case "pending":
+              this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+          const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+          throw new Error(`Error during ${status}: ${linkErrorLog}`);
       }
     }
     /**
@@ -4976,8 +4968,8 @@ ${source2}`;
     }
   };
   function _copyBufferToBuffer(device, options) {
-    const source = options.source;
-    const destination = options.destination;
+    const source = options.sourceBuffer;
+    const destination = options.destinationBuffer;
     device.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, source.handle);
     device.gl.bindBuffer(36663 /* COPY_WRITE_BUFFER */, destination.handle);
     device.gl.copyBufferSubData(
@@ -4996,20 +4988,20 @@ ${source2}`;
   function _copyTextureToBuffer(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to/from. (Default 0) */
       mipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
       aspect = "all",
       /** Width to copy */
-      width = options.source.width,
+      width = options.sourceTexture.width,
       /** Height to copy */
-      height = options.source.height,
+      height = options.sourceTexture.height,
       depthOrArrayLayers = 0,
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
       origin = [0, 0],
       /** Destination buffer */
-      destination,
+      destinationBuffer,
       /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
       byteOffset = 0,
       /**
@@ -5025,15 +5017,15 @@ ${source2}`;
       rowsPerImage
     } = options;
     if (aspect !== "all") {
-      throw new Error("not supported");
+      throw new Error("aspect not supported in WebGL");
     }
     if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
       throw new Error("not implemented");
     }
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     let prevHandle;
     try {
-      const webglBuffer = destination;
+      const webglBuffer = destinationBuffer;
       const sourceWidth = width || framebuffer.width;
       const sourceHeight = height || framebuffer.height;
       const sourceParams = getTextureFormatWebGL(
@@ -5065,7 +5057,7 @@ ${source2}`;
   function _copyTextureToTexture(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to (Default 0) */
       destinationMipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
@@ -5075,7 +5067,7 @@ ${source2}`;
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
       destinationOrigin = [0, 0],
       /** Texture to copy to/from. */
-      destination
+      destinationTexture
       /**  Mip-map level of the texture to copy to/from. (Default 0) */
       // destinationMipLevel = options.mipLevel,
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
@@ -5084,11 +5076,11 @@ ${source2}`;
       // destinationAspect = options.aspect,
     } = options;
     let {
-      width = options.destination.width,
-      height = options.destination.height
+      width = options.destinationTexture.width,
+      height = options.destinationTexture.height
       // depthOrArrayLayers = 0
     } = options;
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     const [sourceX, sourceY] = origin;
     const [destinationX, destinationY, destinationZ] = destinationOrigin;
     const prevHandle = device.gl.bindFramebuffer(
@@ -5097,8 +5089,8 @@ ${source2}`;
     );
     let texture = null;
     let textureTarget;
-    if (destination instanceof WEBGLTexture) {
-      texture = destination;
+    if (destinationTexture instanceof WEBGLTexture) {
+      texture = destinationTexture;
       width = Number.isFinite(width) ? width : texture.width;
       height = Number.isFinite(height) ? height : texture.height;
       texture.bind(0);
@@ -5202,19 +5194,19 @@ ${source2}`;
 
   // src/utils/fill-array.ts
   function fillArray(options) {
-    const { target, source, start = 0, count = 1 } = options;
+    const { target: target2, source, start = 0, count = 1 } = options;
     const length = source.length;
     const total = count * length;
     let copied = 0;
     for (let i = start; copied < length; copied++) {
-      target[i++] = source[copied];
+      target2[i++] = source[copied];
     }
     while (copied < total) {
       if (copied < total - copied) {
-        target.copyWithin(start + copied, start, start + copied);
+        target2.copyWithin(start + copied, start, start + copied);
         copied *= 2;
       } else {
-        target.copyWithin(start + copied, start, start + total - copied);
+        target2.copyWithin(start + copied, start, start + total - copied);
         copied = total;
       }
     }
@@ -5631,11 +5623,11 @@ ${source2}`;
      * outstanding queries representing disjoint `begin()`/`end()` intervals.
      * It is not possible to interleave or overlap `begin` and `end` calls.
      */
-    _begin(target) {
+    _begin(target2) {
       if (this._queryPending) {
         return;
       }
-      this.target = target;
+      this.target = target2;
       this.device.gl.beginQuery(this.target, this.handle);
       return;
     }
@@ -5768,33 +5760,57 @@ ${source2}`;
     //
     constructor(props) {
       super({ ...props, id: props.id || uid("webgl-device") });
-      const device = props.gl?.device;
+      if (!props.createCanvasContext) {
+        throw new Error("WebGLDevice requires props.createCanvasContext to be set");
+      }
+      const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
+      let device = canvasContextProps.canvas?.gl?.device;
       if (device) {
         throw new Error(`WebGL context already attached to device ${device.id}`);
       }
-      const canvas = props.gl?.canvas || props.canvas;
-      this.canvasContext = new WebGLCanvasContext(this, { ...props, canvas });
+      this.canvasContext = new WebGLCanvasContext(this, canvasContextProps);
       this.lost = new Promise((resolve) => {
         this._resolveContextLost = resolve;
       });
-      this.handle = createBrowserContext(this.canvasContext.canvas, {
-        ...props,
-        onContextLost: (event) => this._resolveContextLost?.({
-          reason: "destroyed",
-          message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
-        })
-      });
-      this.gl = this.handle;
-      if (!this.handle) {
+      const webglContextAttributes = { ...props.webgl };
+      if (canvasContextProps.alphaMode === "premultiplied") {
+        webglContextAttributes.premultipliedAlpha = true;
+      }
+      if (props.powerPreference !== void 0) {
+        webglContextAttributes.powerPreference = props.powerPreference;
+      }
+      const gl = createBrowserContext(
+        this.canvasContext.canvas,
+        {
+          onContextLost: (event) => this._resolveContextLost?.({
+            reason: "destroyed",
+            message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
+          }),
+          // eslint-disable-next-line no-console
+          onContextRestored: (event) => console.log("WebGL context restored")
+        },
+        webglContextAttributes
+      );
+      if (!gl) {
         throw new Error("WebGL context creation failed");
       }
+      device = gl.device;
+      if (device) {
+        throw new Error(`WebGL context already attached to device ${device.id}`);
+      }
+      this.handle = gl;
+      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);
-      if (this.props.initalizeFeatures) {
+      this.features = new WebGLDeviceFeatures(
+        this.gl,
+        this._extensions,
+        this.props._disabledFeatures
+      );
+      if (this.props._initializeFeatures) {
         this.features.initializeFeatures();
       }
       this.canvasContext.resize();
@@ -5802,8 +5818,8 @@ ${source2}`;
         log: (...args) => import_core23.log.log(1, ...args)()
       });
       glState.trackState(this.gl, { copyState: false });
-      if (props.debug) {
-        this.gl = makeDebugContext(this.gl, { ...props, throwOnError: true });
+      if (props.debugWebGL) {
+        this.gl = makeDebugContext(this.gl, { ...props });
         this.debug = true;
         import_core23.log.level = Math.max(import_core23.log.level, 1);
         import_core23.log.warn("WebGL debug mode activated. Performance reduced.")();
@@ -5832,7 +5848,7 @@ ${source2}`;
       throw new Error("WebGL only supports a single canvas");
     }
     createBuffer(props) {
-      const newProps = this._getBufferProps(props);
+      const newProps = this._normalizeBufferProps(props);
       return new WEBGLBuffer(this, newProps);
     }
     createTexture(props) {
@@ -6176,27 +6192,23 @@ ${source2}`;
       if (!isWebGL(gl)) {
         throw new Error("Invalid WebGL2RenderingContext");
       }
-      return new WebGLDevice({ gl });
+      return new WebGLDevice({ _handle: gl });
     }
     async create(props = {}) {
       import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
       const promises = [];
-      if (props.debug) {
+      if (props.debugWebGL) {
         promises.push(loadWebGLDeveloperTools());
       }
-      if (props.debugWithSpectorJS) {
+      if (props.debugSpectorJS) {
         promises.push(loadSpectorJS(props));
       }
-      if (typeof props.canvas === "string") {
-        promises.push(import_core24.CanvasContext.pageLoaded);
-      }
       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}`)();
         }
       }
-      import_core24.log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
       const device = new WebGLDevice(props);
       const message2 = `Created ${device.type}${device.debug ? " debug" : ""} context: ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
       import_core24.log.probe(LOG_LEVEL2, message2)();