@luma.gl/webgpu 9.0.0-alpha.21 → 9.0.0-alpha.23

package/dist/dist.dev.js

@@ -119,9 +119,9 @@ var __exports__ = (() => {
   }
 
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
-  function getStorage(type2) {
+  function getStorage(type) {
     try {
-      const storage = window[type2];
+      const storage = window[type];
       const x = "__storage_test__";
       storage.setItem(x, x);
       storage.removeItem(x);
@@ -132,11 +132,11 @@ var __exports__ = (() => {
   }
   var LocalStorage = class {
     constructor(id, defaultConfig) {
-      let type2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "sessionStorage";
+      let type = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "sessionStorage";
       _defineProperty(this, "storage", void 0);
       _defineProperty(this, "id", void 0);
       _defineProperty(this, "config", void 0);
-      this.storage = getStorage(type2);
+      this.storage = getStorage(type);
       this.id = id;
       this.config = defaultConfig;
       this._loadConfiguration();
@@ -633,7 +633,7 @@ var __exports__ = (() => {
 
   // ../../node_modules/@probe.gl/stats/dist/lib/stat.js
   var Stat = class {
-    constructor(name, type2) {
+    constructor(name, type) {
       _defineProperty(this, "name", void 0);
       _defineProperty(this, "type", void 0);
       _defineProperty(this, "sampleSize", 1);
@@ -649,7 +649,7 @@ var __exports__ = (() => {
       _defineProperty(this, "_startTime", 0);
       _defineProperty(this, "_timerPending", false);
       this.name = name;
-      this.type = type2;
+      this.type = type;
       this.reset();
     }
     reset() {
@@ -754,10 +754,10 @@ var __exports__ = (() => {
       Object.seal(this);
     }
     get(name) {
-      let type2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "count";
+      let type = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "count";
       return this._getOrCreate({
         name,
-        type: type2
+        type
       });
     }
     get size() {
@@ -793,14 +793,14 @@ var __exports__ = (() => {
     _getOrCreate(stat) {
       const {
         name,
-        type: type2
+        type
       } = stat;
       let result = this.stats[name];
       if (!result) {
         if (stat instanceof Stat) {
           result = stat;
         } else {
-          result = new Stat(name, type2);
+          result = new Stat(name, type);
         }
         this.stats[name] = result;
       }
@@ -869,14 +869,17 @@ var __exports__ = (() => {
   var DEFAULT_RESOURCE_PROPS = {
     id: "undefined",
     handle: void 0,
-    userData: {}
+    userData: void 0
   };
   var Resource = class {
     /** props.id, for debugging. */
     userData = {};
+    /** Whether this resource has been destroyed */
     destroyed = false;
     /** For resources that allocate GPU memory */
     allocatedBytes = 0;
+    /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
+    _attachedResources = /* @__PURE__ */ new Set();
     /**
      * Create a new Resource. Called from Subclass
      */
@@ -896,7 +899,7 @@ var __exports__ = (() => {
      * destroy can be called on any resource to release it before it is garbage collected.
      */
     destroy() {
-      this.removeStats();
+      this.destroyResource();
     }
     /** @deprecated Use destroy() */
     delete() {
@@ -913,14 +916,41 @@ var __exports__ = (() => {
     getProps() {
       return this.props;
     }
+    // ATTACHED RESOURCES
+    /** 
+     * Attaches a resource. Attached resources are auto destroyed when this resource is destroyed
+     * Called automatically when sub resources are auto created but can be called by application
+     */
+    attachResource(resource) {
+      this._attachedResources.add(resource);
+    }
+    /** 
+     * Detach an attached resource. The resource will no longer be auto-destroyed when this resource is destroyed.
+     */
+    detachResource(resource) {
+      this._attachedResources.delete(resource);
+    }
+    /** 
+     * Destroys a resource (only if owned), and removes from the owned (auto-destroy) list for this resource.
+     */
+    destroyAttachedResource(resource) {
+      if (this._attachedResources.delete(resource)) {
+        resource.destroy();
+      }
+    }
+    /** Destroy all owned resources. Make sure the resources are no longer needed before calling. */
+    destroyAttachedResources() {
+      for (const resource of Object.values(this._attachedResources)) {
+        resource.destroy();
+      }
+      this._attachedResources = /* @__PURE__ */ new Set();
+    }
     // PROTECTED METHODS
-    /** Called by resource constructor to track object creation */
-    addStats() {
-      const stats = this._device.statsManager.getStats("Resource Counts");
-      const name = this[Symbol.toStringTag];
-      stats.get("Resources Created").incrementCount();
-      stats.get(`${name}s Created`).incrementCount();
-      stats.get(`${name}s Active`).incrementCount();
+    /** Perform all destroy steps. Can be called by derived resources when overriding destroy() */
+    destroyResource() {
+      this.destroyAttachedResources();
+      this.removeStats();
+      this.destroyed = true;
     }
     /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
     removeStats() {
@@ -942,7 +972,17 @@ var __exports__ = (() => {
       stats.get(`${name} Memory`).subtractCount(this.allocatedBytes);
       this.allocatedBytes = 0;
     }
+    /** Called by resource constructor to track object creation */
+    addStats() {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      const name = this[Symbol.toStringTag];
+      stats.get("Resources Created").incrementCount();
+      stats.get(`${name}s Created`).incrementCount();
+      stats.get(`${name}s Active`).incrementCount();
+    }
   };
+  /** Default properties for resource */
+  __publicField(Resource, "defaultProps", DEFAULT_RESOURCE_PROPS);
   function selectivelyMerge(props, defaultProps) {
     const mergedProps = {
       ...defaultProps
@@ -970,6 +1010,7 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Buffer";
     }
+    /** Length of buffer in bytes */
     constructor(device, props) {
       const deducedProps = {
         ...props
@@ -1090,34 +1131,30 @@ var __exports__ = (() => {
     }
     statsManager = lumaStats;
     userData = {};
+    // Capabilities
     /** Information about the device (vendor, versions etc) */
     /** Optional capability discovery */
     /** WebGPU style device limits */
     /** Check if device supports a specific texture format (creation and `nearest` sampling) */
     /** Check if linear filtering (sampler interpolation) is supported for a specific texture format */
     /** Check if device supports rendering to a specific texture format */
-    /** True context is already lost */
-    /** Promise that resolves when context is lost */
-    /** default canvas context */
+    // Device loss
+    /** `true` if device is already lost */
+    /** Promise that resolves when device is lost */
+    /** 
+     * Trigger device loss. 
+     * @returns `true` if context loss could actually be triggered. 
+     * @note primarily intended for testing how application reacts to device loss 
+     */
+    loseDevice() {
+      return false;
+    }
+    // Canvas context
+    /** Default / primary canvas context. Can be null as WebGPU devices can be created without a CanvasContext */
     /** Creates a new CanvasContext (WebGPU only) */
     /** Call after rendering a frame (necessary e.g. on WebGL OffscreenCanvas) */
     // Resource creation
     /** Create a buffer */
-    createBuffer(props) {
-      if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
-        return this._createBuffer({
-          data: props
-        });
-      }
-      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
-        if (props.data instanceof Uint32Array) {
-          props.indexType = "uint32";
-        } else if (props.data instanceof Uint16Array) {
-          props.indexType = "uint16";
-        }
-      }
-      return this._createBuffer(props);
-    }
     /** Create a texture */
     createTexture(props) {
       if (props instanceof Promise || typeof props === "string") {
@@ -1132,9 +1169,31 @@ var __exports__ = (() => {
     /** Create a shader */
     /** Create a render pipeline (aka program) */
     /** Create a compute pipeline (aka program) */
+    createCommandEncoder(props = {}) {
+      throw new Error("not implemented");
+    }
     /** Create a RenderPass */
     /** Create a ComputePass */
-    // Implementation
+    /** Get a renderpass that is set up to render to the primary CanvasContext */
+    // Resource creation helpers
+    _getBufferProps(props) {
+      if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
+        return {
+          data: props
+        };
+      }
+      const newProps = {
+        ...props
+      };
+      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
+        if (props.data instanceof Uint32Array) {
+          props.indexType = "uint32";
+        } else if (props.data instanceof Uint16Array) {
+          props.indexType = "uint16";
+        }
+      }
+      return newProps;
+    }
   };
   __publicField(Device, "VERSION", VERSION2);
 
@@ -1222,13 +1281,15 @@ var __exports__ = (() => {
       if (typeof OffscreenCanvas !== "undefined" && this.canvas instanceof OffscreenCanvas) {
         return 1;
       }
-      if (typeof useDevicePixels === "number") {
-        return useDevicePixels > 0 ? useDevicePixels : 1;
+      useDevicePixels = useDevicePixels === void 0 ? this.props.useDevicePixels : useDevicePixels;
+      if (!useDevicePixels || useDevicePixels <= 0) {
+        return 1;
       }
-      if (typeof this.props.useDevicePixels === "number") {
-        return this.props.useDevicePixels > 0 ? this.props.useDevicePixels : 1;
+      if (useDevicePixels === true) {
+        const dpr = typeof window !== "undefined" && window.devicePixelRatio;
+        return dpr || 1;
       }
-      return useDevicePixels || this.props.useDevicePixels ? typeof window !== "undefined" && window.devicePixelRatio || 1 : 1;
+      return useDevicePixels;
     }
     /**
      * Returns the size of drawing buffer in device pixels.
@@ -1421,8 +1482,8 @@ var __exports__ = (() => {
     data: null,
     dimension: "2d",
     format: "rgba8unorm",
-    // width: undefined,
-    // height: undefined,
+    width: void 0,
+    height: void 0,
     depth: 1,
     mipmaps: true,
     sampler: {},
@@ -1430,20 +1491,28 @@ var __exports__ = (() => {
     compressed: false,
     // mipLevels: 1,
     usage: 0,
-    parameters: {},
-    pixelStore: {},
-    pixels: null,
-    border: 0,
-    recreate: false
+    mipLevels: void 0,
+    samples: void 0,
+    type: void 0
   };
   var Texture = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Texture";
     }
-    constructor(device, props) {
-      super(device, props, DEFAULT_TEXTURE_PROPS);
+    /** dimension of this texture */
+    /** format of this texture */
+    /** width in pixels of this texture */
+    /** height in pixels of this texture */
+    /** depth of this texture */
+    /** Default sampler for this texture */
+    constructor(device, props, defaultProps = DEFAULT_TEXTURE_PROPS) {
+      super(device, props, defaultProps);
+      this.dimension = this.props.dimension;
+      this.format = this.props.format;
+      this.width = this.props.width;
+      this.height = this.props.height;
+      this.depth = this.props.depth;
     }
-    /** Default sampler for this device */
   };
   __publicField(Texture, "COPY_SRC", 1);
   __publicField(Texture, "COPY_DST", 2);
@@ -1527,6 +1596,10 @@ var __exports__ = (() => {
     }
     /** Width of all attachments in this framebuffer */
     /** Height of all attachments in this framebuffer */
+    /** Color attachments */
+    colorAttachments = [];
+    /** Depth-stencil attachment, if provided */
+    depthStencilAttachment = null;
     constructor(device, props = {}) {
       super(device, props, DEFAULT_FRAMEBUFFER_PROPS);
       this.width = this.props.width;
@@ -1537,16 +1610,162 @@ var __exports__ = (() => {
      * @note resize() destroys existing textures (if size has changed).
      */
     resize(size) {
-      const updateSize = !size || size.height !== this.height || size.width !== this.width;
+      let updateSize = !size;
       if (size) {
-        this.width = size?.width;
-        this.height = size?.height;
+        const [width, height] = Array.isArray(size) ? size : [size.width, size.height];
+        updateSize = updateSize || height !== this.height || width !== this.width;
+        this.width = width;
+        this.height = height;
       }
       if (updateSize) {
-        this._resizeAttachments(this.width, this.height);
+        log.log(2, `Resizing framebuffer ${this.id} to ${this.width}x${this.height}`)();
+        this.resizeAttachments(this.width, this.height);
+      }
+    }
+    // /** Returns fully populated attachment object. */
+    // protected normalizeColorAttachment(
+    //   attachment: Texture | ColorTextureFormat
+    // ): Required<ColorAttachment> {
+    //   const COLOR_ATTACHMENT_DEFAULTS: Required<ColorAttachment> = {
+    //     texture: undefined!,
+    //     format: undefined!,
+    //     clearValue: [0.0, 0.0, 0.0, 0.0],
+    //     loadOp: 'clear',
+    //     storeOp: 'store'
+    //   };
+    //   if (attachment instanceof Texture) {
+    //     return {...COLOR_ATTACHMENT_DEFAULTS, texture: attachment};
+    //   }
+    //   if (typeof attachment === 'string') {
+    //     return {...COLOR_ATTACHMENT_DEFAULTS, format: attachment};
+    //   }
+    //   return {...COLOR_ATTACHMENT_DEFAULTS, ...attachment};
+    // }
+    // /** Wraps texture inside fully populated attachment object. */
+    // protected normalizeDepthStencilAttachment(
+    //   attachment: DepthStencilAttachment | Texture | DepthStencilTextureFormat
+    // ): Required<DepthStencilAttachment> {
+    //   const DEPTH_STENCIL_ATTACHMENT_DEFAULTS: Required<DepthStencilAttachment> = {
+    //     texture: undefined!,
+    //     format: undefined!,
+    //     depthClearValue: 1.0,
+    //     depthLoadOp: 'clear',
+    //     depthStoreOp: 'store',
+    //     depthReadOnly: false,
+    //     stencilClearValue: 0,
+    //     stencilLoadOp: 'clear',
+    //     stencilStoreOp: 'store',
+    //     stencilReadOnly: false
+    //   };
+    //   if (typeof attachment === 'string') {
+    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, format: attachment};
+    //   }
+    //   // @ts-expect-error attachment instanceof Texture doesn't cover Renderbuffer
+    //   if (attachment.handle || attachment instanceof Texture) {
+    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, texture: attachment as Texture};
+    //   }
+    //   return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, ...attachment};
+    // }
+    /** Auto creates any textures */
+    autoCreateAttachmentTextures() {
+      this.colorAttachments = this.props.colorAttachments.map((attachment) => {
+        if (typeof attachment === "string") {
+          const texture = this.createColorTexture(attachment);
+          this.attachResource(texture);
+          return texture;
+        }
+        return attachment;
+      });
+      if (this.props.depthStencilAttachment) {
+        if (typeof this.props.depthStencilAttachment === "string") {
+          const texture = this.createDepthStencilTexture(this.props.depthStencilAttachment);
+          this.attachResource(texture);
+          this.depthStencilAttachment = texture;
+        } else {
+          this.depthStencilAttachment = this.props.depthStencilAttachment;
+        }
+      }
+    }
+    /** Create a color texture */
+    createColorTexture(format) {
+      return this.device.createTexture({
+        id: "color-attachment",
+        usage: Texture.RENDER_ATTACHMENT,
+        format,
+        width: this.width,
+        height: this.height
+      });
+    }
+    /** Create depth stencil texture */
+    createDepthStencilTexture(format) {
+      return this.device.createTexture({
+        id: "depth-stencil-attachment",
+        usage: Texture.RENDER_ATTACHMENT,
+        format,
+        width: this.width,
+        height: this.height
+      });
+    }
+    /**
+     * Default implementation of resize
+     * Creates new textures with correct size for all attachments.
+     * and destroys existing textures if owned
+     */
+    resizeAttachments(width, height) {
+      for (let i = 0; i < this.colorAttachments.length; ++i) {
+        if (this.colorAttachments[i]) {
+          const resizedTexture = this.device._createTexture({
+            ...this.colorAttachments[i].props,
+            width,
+            height
+          });
+          this.destroyAttachedResource(this.colorAttachments[i]);
+          this.colorAttachments[i] = resizedTexture;
+          this.attachResource(resizedTexture);
+        }
+      }
+      if (this.depthStencilAttachment) {
+        const resizedTexture = this.device._createTexture({
+          ...this.depthStencilAttachment.props,
+          width,
+          height
+        });
+        this.destroyAttachedResource(this.depthStencilAttachment);
+        this.depthStencilAttachment = resizedTexture;
+        this.attachResource(resizedTexture);
       }
     }
-    /** Implementation of resize */
+    /** Create a color attachment for WebGL *
+    protected override createColorTexture(colorAttachment: Required<ColorAttachment>): Required<ColorAttachment> {
+      return this.device._createTexture({
+        id: `${this.id}-color`,
+        data: null, // reserves texture memory, but texels are undefined
+        format,
+        // type: GL.UNSIGNED_BYTE,
+        width: this.width,
+        height: this.height,
+        // Note: Mipmapping can be disabled by texture resource when we resize the texture
+        // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
+        // behavior we always disable mipmaps.
+        mipmaps: false,
+        // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
+        // Use LINEAR so subpixel algos like fxaa work.
+        // Set WRAP modes that support NPOT textures too.
+        sampler: {
+          minFilter: 'linear',
+          magFilter: 'linear',
+          addressModeU: 'clamp-to-edge',
+          addressModeV: 'clamp-to-edge'
+        }
+        // parameters: {
+        //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
+        //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+        //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+        //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+        // }
+      });
+    }
+    */
   };
 
   // ../api/src/adapter/resources/render-pipeline.ts
@@ -1609,18 +1828,14 @@ var __exports__ = (() => {
   };
 
   // ../api/src/adapter/resources/render-pass.ts
-  var DEFAULT_RENDERPASS_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    framebuffer: null,
-    parameters: null
-  };
-  var RenderPass = class extends Resource {
+  var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
       return "RenderPass";
     }
     constructor(device, props) {
-      super(device, props, DEFAULT_RENDERPASS_PROPS);
+      super(device, props, _RenderPass.defaultProps);
     }
+    /** A small set of parameters can be changed between every draw call (viewport, scissorRect, blendColor, stencilReference) */
     // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
     // beginOcclusionQuery(queryIndex: number): void;
     // endOcclusionQuery(): void;
@@ -1651,6 +1866,19 @@ var __exports__ = (() => {
     drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
     */
   };
+  var RenderPass = _RenderPass;
+  /** Default properties for RenderPass */
+  __publicField(RenderPass, "defaultProps", {
+    ...Resource.defaultProps,
+    framebuffer: null,
+    parameters: void 0,
+    clearColor: [0, 0, 0, 0],
+    clearDepth: 1,
+    clearStencil: 0,
+    depthReadOnly: false,
+    stencilReadOnly: false,
+    discard: false
+  });
 
   // ../api/src/adapter/resources/compute-pass.ts
   var ComputePass = class extends Resource {
@@ -1679,22 +1907,22 @@ var __exports__ = (() => {
   };
 
   // ../api/src/adapter/utils/decode-data-type.ts
-  function decodeVertexType(type2) {
-    const dataType = TYPE_MAP[type2];
+  function decodeVertexType(type) {
+    const dataType = TYPE_MAP[type];
     const bytes = getDataTypeBytes(dataType);
-    const integer = !type2.startsWith("float");
-    const normalized = type2.includes("norm");
-    const signed = type2.startsWith("s");
+    const integer = !type.startsWith("float");
+    const normalized = type.includes("norm");
+    const signed = type.startsWith("s");
     return {
-      dataType: TYPE_MAP[type2],
+      dataType: TYPE_MAP[type],
       byteLength: bytes,
       integer,
       signed,
       normalized
     };
   }
-  function getDataTypeBytes(type2) {
-    const bytes = TYPE_SIZES[type2];
+  function getDataTypeBytes(type) {
+    const bytes = TYPE_SIZES[type];
     return bytes;
   }
   var TYPE_MAP = {
@@ -1725,11 +1953,11 @@ var __exports__ = (() => {
   // ../api/src/adapter/utils/decode-vertex-format.ts
   function decodeVertexFormat(format) {
     const [type_, count] = format.split("x");
-    const type2 = type_;
+    const type = type_;
     const components = count ? parseInt(count) : 1;
-    const decodedType = decodeVertexType(type2);
+    const decodedType = decodeVertexType(type);
     return {
-      type: type2,
+      type,
       components,
       byteLength: decodedType.byteLength * components,
       integer: decodedType.integer,
@@ -1858,6 +2086,8 @@ var __exports__ = (() => {
           data: this.props.data
         });
       }
+      this.width = this.handle.width;
+      this.height = this.handle.height;
       this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
       this.view = this.handle.createView({
         // format: this.props.format,
@@ -1939,7 +2169,10 @@ var __exports__ = (() => {
         // copySize: GPUExtent3D
         [width, height, depth]
       );
-      return this;
+      return {
+        width,
+        height
+      };
     }
     /*
     async readPixels() {
@@ -2057,7 +2290,8 @@ var __exports__ = (() => {
     }
     createHandle() {
       const {
-        source
+        source,
+        stage
       } = this.props;
       let language = this.props.language;
       if (!language) {
@@ -2072,7 +2306,7 @@ var __exports__ = (() => {
           return this.device.handle.createShaderModule({
             code: source,
             // @ts-expect-error
-            transform: (glsl) => this.device.glslang.compileGLSL(glsl, type)
+            transform: (glsl) => this.device.glslang.compileGLSL(glsl, stage)
           });
         default:
           throw new Error(language);
@@ -2556,7 +2790,7 @@ var __exports__ = (() => {
       super(device, props);
       this.device = device;
       const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
-      const renderPassDescriptor = framebuffer.renderPassDescriptor;
+      const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
       this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
       this.handle.label = this.props.id;
     }
@@ -2627,6 +2861,31 @@ var __exports__ = (() => {
     // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
     // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
     // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+    // INTERNAL
+    /** 
+     * Partial render pass descriptor. Used by WebGPURenderPass.
+     * @returns attachments fields of a renderpass descriptor. 
+     */
+    getRenderPassDescriptor(framebuffer) {
+      const renderPassDescriptor = {
+        colorAttachments: []
+      };
+      renderPassDescriptor.colorAttachments = framebuffer.colorAttachments.map((colorAttachment) => ({
+        // clear values
+        loadOp: "clear",
+        colorClearValue: this.props.clearColor || [0, 0, 0, 0],
+        storeOp: this.props.discard ? "discard" : "store",
+        // ...colorAttachment,
+        view: colorAttachment.handle.createView()
+      }));
+      if (framebuffer.depthStencilAttachment) {
+        renderPassDescriptor.depthStencilAttachment = {
+          ...this.props,
+          view: framebuffer.depthStencilAttachment.handle.createView()
+        };
+      }
+      return renderPassDescriptor;
+    }
   };
 
   // src/adapter/resources/webgpu-compute-pass.ts
@@ -2688,98 +2947,10 @@ var __exports__ = (() => {
 
   // src/adapter/resources/webgpu-framebuffer.ts
   var WebGPUFramebuffer = class extends Framebuffer {
-    colorAttachments = [];
-    depthStencilAttachment = null;
-    /** Partial render pass descriptor. Used by WebGPURenderPass */
-    renderPassDescriptor = {
-      colorAttachments: []
-    };
     constructor(device, props) {
       super(device, props);
       this.device = device;
-      if (props.depthStencilAttachment) {
-        this.depthStencilAttachment = this.createDepthStencilTexture(props);
-      }
-      if (props.colorAttachments) {
-        this.colorAttachments = props.colorAttachments.map((colorAttachment) => this.createColorTexture(this.props, colorAttachment));
-      }
-      if (this.depthStencilAttachment) {
-        this.renderPassDescriptor.depthStencilAttachment = {
-          view: this.depthStencilAttachment.handle.createView(),
-          // Add default clear values
-          depthClearValue: 1,
-          depthStoreOp: "store",
-          stencilClearValue: 0,
-          stencilStoreOp: "store"
-        };
-      }
-      if (this.colorAttachments.length > 0) {
-        this.renderPassDescriptor.colorAttachments = this.colorAttachments.map((colorAttachment) => ({
-          view: colorAttachment.handle.createView(),
-          loadOp: "clear",
-          loadValue: [0, 0, 0, 0],
-          storeOp: "store"
-        }));
-      }
-    }
-    /** Create depth stencil texture */
-    createDepthStencilTexture(props) {
-      if (props.depthStencilAttachment instanceof WebGPUTexture) {
-        return props.depthStencilAttachment;
-      }
-      if (typeof props.depthStencilAttachment === "string") {
-        return this.device._createTexture({
-          id: "depth-stencil-attachment",
-          format: props.depthStencilAttachment,
-          width: props.width,
-          height: props.height,
-          usage: Texture.RENDER_ATTACHMENT
-        });
-      }
-      throw new Error("type");
-    }
-    createColorTexture(props, texture) {
-      if (texture instanceof WebGPUTexture) {
-        return texture;
-      }
-      if (typeof texture === "string") {
-        return this.device._createTexture({
-          id: "color-attachment",
-          format: texture,
-          width: props.width,
-          height: props.height,
-          usage: Texture.RENDER_ATTACHMENT
-        });
-      }
-      throw new Error("type");
-    }
-    /**
-     * Create new textures with correct size for all attachments.
-     * @note destroys existing textures.
-     */
-    _resizeAttachments(width, height) {
-      for (let i = 0; i < this.colorAttachments.length; ++i) {
-        if (this.colorAttachments[i]) {
-          const resizedTexture = this.device._createTexture({
-            ...this.colorAttachments[i].props,
-            width,
-            height
-          });
-          this.colorAttachments[i].destroy();
-          this.colorAttachments[i] = resizedTexture;
-          this.renderPassDescriptor.colorAttachments[i].view = resizedTexture.handle.createView();
-        }
-      }
-      if (this.depthStencilAttachment) {
-        const resizedTexture = this.device._createTexture({
-          ...this.depthStencilAttachment.props,
-          width,
-          height
-        });
-        this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = resizedTexture;
-        this.renderPassDescriptor.depthStencilAttachment.view = resizedTexture.handle.createView();
-      }
+      this.autoCreateAttachmentTextures();
     }
   };
 
@@ -2958,8 +3129,9 @@ var __exports__ = (() => {
     get isLost() {
       return this._isLost;
     }
-    _createBuffer(props) {
-      return new WebGPUBuffer(this, props);
+    createBuffer(props) {
+      const newProps = this._getBufferProps(props);
+      return new WebGPUBuffer(this, newProps);
     }
     _createTexture(props) {
       return new WebGPUTexture(this, props);
@@ -2995,6 +3167,9 @@ var __exports__ = (() => {
       this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
       return new WebGPUComputePass(this, props);
     }
+    // createCommandEncoder(props: CommandEncoderProps): WebGPUCommandEncoder {
+    //   return new WebGPUCommandEncoder(this, props);
+    // }
     createCanvasContext(props) {
       return new WebGPUCanvasContext(this, this.adapter, props);
     }
@@ -3051,6 +3226,44 @@ var __exports__ = (() => {
       features.add("glsl-texture-lod");
       return features;
     }
+    copyExternalImageToTexture(options) {
+      const {
+        source,
+        sourceX = 0,
+        sourceY = 0,
+        texture,
+        mipLevel = 0,
+        aspect = "all",
+        colorSpace = "display-p3",
+        premultipliedAlpha = false,
+        // destinationX,
+        // destinationY,
+        // desitnationZ,
+        width = texture.width,
+        height = texture.height,
+        depth = 1
+      } = options;
+      const webGpuTexture = texture;
+      this.handle?.queue.copyExternalImageToTexture(
+        // source: GPUImageCopyExternalImage
+        {
+          source,
+          origin: [sourceX, sourceY]
+        },
+        // destination: GPUImageCopyTextureTagged
+        {
+          texture: webGpuTexture.handle,
+          origin: [0, 0, 0],
+          // [x, y, z],
+          mipLevel,
+          aspect,
+          colorSpace,
+          premultipliedAlpha
+        },
+        // copySize: GPUExtent3D
+        [width, height, depth]
+      );
+    }
   };
   var WebGPUDevice = _WebGPUDevice;
   __publicField(WebGPUDevice, "type", "webgpu");