@luma.gl/webgpu 9.0.0-alpha.16 → 9.0.0-alpha.17

package/dist/adapter/resources/webgpu-texture.js

@@ -1,108 +1,95 @@
-// luma.gl, MIT license
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Texture } from '@luma.gl/api';
-import { getWebGPUTextureFormat } from '../helpers/convert-texture-format.js';
-import WebGPUSampler from './webgpu-sampler.js';
+import { getWebGPUTextureFormat } from "../helpers/convert-texture-format.js";
+import WebGPUSampler from "./webgpu-sampler.js";
 const BASE_DIMENSIONS = {
-    '1d': '1d',
-    '2d': '2d',
-    '2d-array': '2d',
-    'cube': '2d',
-    'cube-array': '2d',
-    '3d': '3d'
+  '1d': '1d',
+  '2d': '2d',
+  '2d-array': '2d',
+  'cube': '2d',
+  'cube-array': '2d',
+  '3d': '3d'
 };
 export default class WebGPUTexture extends Texture {
-    // static async createFromImageURL(src, usage = 0) {
-    //   const img = document.createElement('img');
-    //   img.src = src;
-    //   await img.decode();
-    //   return WebGPUTexture(img, usage);
-    // }
-    constructor(device, props) {
-        super(device, props);
-        if (typeof this.props.format === 'number') {
-            throw new Error('number format');
-        }
-        this.device = device;
-        this.handle = this.props.handle || this.createHandle();
-        if (this.props.data) {
-            this.setData({ data: this.props.data });
-        }
-        // Create a default sampler. This mimics the WebGL1 API where sampler props are stored on the texture
-        // this.setSampler(props.sampler);
-        this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
-        // TODO - To support texture arrays we need to create custom views...
-        // But we are not ready to expose TextureViews to the public API.
-        this.view = this.handle.createView({
-        // format: this.props.format,
-        // dimension: this.props.dimension,
-        // aspect = "all";
-        // baseMipLevel: 0;
-        // mipLevelCount;
-        // baseArrayLayer = 0;
-        // arrayLayerCount;
-        });
+  constructor(device, props) {
+    super(device, props);
+    _defineProperty(this, "device", void 0);
+    _defineProperty(this, "handle", void 0);
+    _defineProperty(this, "view", void 0);
+    _defineProperty(this, "sampler", void 0);
+    if (typeof this.props.format === 'number') {
+      throw new Error('number format');
     }
-    createHandle() {
-        if (typeof this.props.format === 'number') {
-            throw new Error('number format');
-        }
-        // Deduce size from data - TODO this is a hack
-        // @ts-expect-error
-        const width = this.props.width || this.props.data?.width || 1;
-        // @ts-expect-error
-        const height = this.props.height || this.props.data?.height || 1;
-        return this.device.handle.createTexture({
-            size: {
-                width,
-                height,
-                depthOrArrayLayers: this.props.depth
-            },
-            dimension: BASE_DIMENSIONS[this.props.dimension],
-            format: getWebGPUTextureFormat(this.props.format),
-            usage: this.props.usage,
-            mipLevelCount: this.props.mipLevels,
-            sampleCount: this.props.samples
-        });
+    this.device = device;
+    this.handle = this.props.handle || this.createHandle();
+    if (this.props.data) {
+      this.setData({
+        data: this.props.data
+      });
     }
-    destroy() {
-        this.handle.destroy();
-    }
-    /**
-     * Set default sampler
-     * Accept a sampler instance or set of props;
-     */
-    setSampler(sampler) {
-        this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
-        return this;
-    }
-    setData(options) {
-        return this.setImage({ source: options.data });
-    }
-    /** Set image */
-    setImage(options) {
-        const { source, width = options.source.width, height = options.source.height, depth = 1, sourceX = 0, sourceY = 0, mipLevel = 0, x = 0, y = 0, z = 0, aspect = 'all', colorSpace = 'srgb', premultipliedAlpha = false } = options;
-        // TODO - max out width
-        this.device.handle.queue.copyExternalImageToTexture(
-        // source: GPUImageCopyExternalImage
-        {
-            source,
-            origin: [sourceX, sourceY]
-        }, 
-        // destination: GPUImageCopyTextureTagged
-        {
-            texture: this.handle,
-            origin: [x, y, z],
-            mipLevel,
-            aspect,
-            colorSpace,
-            premultipliedAlpha
-        }, 
-        // copySize: GPUExtent3D
-        [
-            width,
-            height,
-            depth
-        ]);
-        return this;
+    this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
+    this.view = this.handle.createView({});
+  }
+  createHandle() {
+    var _this$props$data, _this$props$data2;
+    if (typeof this.props.format === 'number') {
+      throw new Error('number format');
     }
+    const width = this.props.width || ((_this$props$data = this.props.data) === null || _this$props$data === void 0 ? void 0 : _this$props$data.width) || 1;
+    const height = this.props.height || ((_this$props$data2 = this.props.data) === null || _this$props$data2 === void 0 ? void 0 : _this$props$data2.height) || 1;
+    return this.device.handle.createTexture({
+      size: {
+        width,
+        height,
+        depthOrArrayLayers: this.props.depth
+      },
+      dimension: BASE_DIMENSIONS[this.props.dimension],
+      format: getWebGPUTextureFormat(this.props.format),
+      usage: this.props.usage,
+      mipLevelCount: this.props.mipLevels,
+      sampleCount: this.props.samples
+    });
+  }
+  destroy() {
+    this.handle.destroy();
+  }
+  setSampler(sampler) {
+    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    return this;
+  }
+  setData(options) {
+    return this.setImage({
+      source: options.data
+    });
+  }
+  setImage(options) {
+    const {
+      source,
+      width = options.source.width,
+      height = options.source.height,
+      depth = 1,
+      sourceX = 0,
+      sourceY = 0,
+      mipLevel = 0,
+      x = 0,
+      y = 0,
+      z = 0,
+      aspect = 'all',
+      colorSpace = 'srgb',
+      premultipliedAlpha = false
+    } = options;
+    this.device.handle.queue.copyExternalImageToTexture({
+      source,
+      origin: [sourceX, sourceY]
+    }, {
+      texture: this.handle,
+      origin: [x, y, z],
+      mipLevel,
+      aspect,
+      colorSpace,
+      premultipliedAlpha
+    }, [width, height, depth]);
+    return this;
+  }
 }
+//# sourceMappingURL=webgpu-texture.js.map

package/dist/adapter/resources/webgpu-texture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgpu-texture.js","names":["Texture","getWebGPUTextureFormat","WebGPUSampler","BASE_DIMENSIONS","WebGPUTexture","constructor","device","props","_defineProperty","format","Error","handle","createHandle","data","setData","sampler","view","createView","_this$props$data","_this$props$data2","width","height","createTexture","size","depthOrArrayLayers","depth","dimension","usage","mipLevelCount","mipLevels","sampleCount","samples","destroy","setSampler","options","setImage","source","sourceX","sourceY","mipLevel","x","y","z","aspect","colorSpace","premultipliedAlpha","queue","copyExternalImageToTexture","origin","texture"],"sources":["../../../src/adapter/resources/webgpu-texture.ts"],"sourcesContent":["// luma.gl, MIT license\nimport {Texture, TextureProps, Sampler, SamplerProps} from '@luma.gl/api';\nimport {getWebGPUTextureFormat} from '../helpers/convert-texture-format';\nimport type WebGPUDevice from '../webgpu-device';\nimport WebGPUSampler from './webgpu-sampler';\n\nconst BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {\n  '1d': '1d',\n  '2d': '2d',\n  '2d-array': '2d',\n  'cube': '2d',\n  'cube-array': '2d',\n  '3d': '3d'\n};\n\nexport default class WebGPUTexture extends Texture {\n  readonly device: WebGPUDevice;\n  readonly handle: GPUTexture;\n  readonly view: GPUTextureView;\n  sampler: WebGPUSampler;\n\n  // static async createFromImageURL(src, usage = 0) {\n  //   const img = document.createElement('img');\n  //   img.src = src;\n  //   await img.decode();\n  //   return WebGPUTexture(img, usage);\n  // }\n\n  constructor(device: WebGPUDevice, props: TextureProps) {\n    super(device, props);\n\n    if (typeof this.props.format === 'number') {\n      throw new Error('number format');\n    }\n\n    this.device = device;\n    this.handle = this.props.handle || this.createHandle();\n\n    if (this.props.data) {\n      this.setData({data: this.props.data}  );\n    }\n\n    // Create a default sampler. This mimics the WebGL1 API where sampler props are stored on the texture\n    // this.setSampler(props.sampler);\n    this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);\n\n    // TODO - To support texture arrays we need to create custom views...\n    // But we are not ready to expose TextureViews to the public API.\n    this.view = this.handle.createView({\n      // format: this.props.format,\n      // dimension: this.props.dimension,\n      // aspect = \"all\";\n      // baseMipLevel: 0;\n      // mipLevelCount;\n      // baseArrayLayer = 0;\n      // arrayLayerCount;\n    });\n  }\n\n  protected createHandle(): GPUTexture {\n    if (typeof this.props.format === 'number') {\n      throw new Error('number format');\n    }\n\n    // Deduce size from data - TODO this is a hack\n    // @ts-expect-error\n    const width = this.props.width || this.props.data?.width || 1;\n    // @ts-expect-error\n    const height = this.props.height || this.props.data?.height || 1;\n\n    return this.device.handle.createTexture({\n      size: {\n        width,\n        height,\n        depthOrArrayLayers: this.props.depth\n      },\n      dimension: BASE_DIMENSIONS[this.props.dimension],\n      format: getWebGPUTextureFormat(this.props.format),\n      usage: this.props.usage,\n      mipLevelCount: this.props.mipLevels,\n      sampleCount: this.props.samples\n    });\n  }\n\n  override destroy(): void {\n    this.handle.destroy();\n  }\n\n  /**\n   * Set default sampler\n   * Accept a sampler instance or set of props;\n   */\n  setSampler(sampler: Sampler | SamplerProps): this {\n    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);\n    return this;\n  }\n\n  setData(options: {\n    data: any;\n  }) {\n    return this.setImage({source: options.data});\n  }\n\n  /** Set image */\n  setImage(options: {\n    source: ImageBitmap | HTMLCanvasElement | OffscreenCanvas;\n    width?: number;\n    height?: number;\n    depth?: number;\n    sourceX?: number;\n    sourceY?: number;\n    mipLevel?: number;\n    x?: number;\n    y?: number;\n    z?: number;\n    aspect?: 'all' | 'stencil-only' | 'depth-only';\n    colorSpace?: 'srgb';\n    premultipliedAlpha?: boolean;\n  }): this {\n    const {\n      source,\n      width = options.source.width,\n      height = options.source.height,\n      depth = 1,\n      sourceX = 0,\n      sourceY = 0,\n      mipLevel = 0,\n      x = 0,\n      y = 0,\n      z = 0,\n      aspect = 'all',\n      colorSpace = 'srgb',\n      premultipliedAlpha = false\n    } = options;\n\n    // TODO - max out width\n\n    this.device.handle.queue.copyExternalImageToTexture(\n      // source: GPUImageCopyExternalImage\n      {\n        source,\n        origin: [sourceX, sourceY]\n      },\n      // destination: GPUImageCopyTextureTagged\n      {\n        texture: this.handle,\n        origin: [x, y, z],\n        mipLevel,\n        aspect,\n        colorSpace,\n        premultipliedAlpha\n      },\n      // copySize: GPUExtent3D\n      [\n        width,\n        height,\n        depth\n      ]\n    );\n    return this;\n  }\n\n  /*\n  async readPixels() {\n    const readbackBuffer = device.createBuffer({\n        usage: Buffer.COPY_DST | Buffer.MAP_READ,\n        size: 4 * textureWidth * textureHeight,\n    });\n\n    // Copy data from the texture to the buffer.\n    const encoder = device.createCommandEncoder();\n    encoder.copyTextureToBuffer(\n        { texture },\n        { buffer, rowPitch: textureWidth * 4 },\n        [textureWidth, textureHeight],\n    );\n    device.submit([encoder.finish()]);\n\n    // Get the data on the CPU.\n    await buffer.mapAsync(GPUMapMode.READ);\n    saveScreenshot(buffer.getMappedRange());\n    buffer.unmap();\n  }\n\n  setImageData(imageData, usage): this {\n    let data = null;\n\n    const bytesPerRow = Math.ceil((img.width * 4) / 256) * 256;\n    if (bytesPerRow == img.width * 4) {\n      data = imageData.data;\n    } else {\n      data = new Uint8Array(bytesPerRow * img.height);\n      let imagePixelIndex = 0;\n      for (let y = 0; y < img.height; ++y) {\n        for (let x = 0; x < img.width; ++x) {\n          const i = x * 4 + y * bytesPerRow;\n          data[i] = imageData.data[imagePixelIndex];\n          data[i + 1] = imageData.data[imagePixelIndex + 1];\n          data[i + 2] = imageData.data[imagePixelIndex + 2];\n          data[i + 3] = imageData.data[imagePixelIndex + 3];\n          imagePixelIndex += 4;\n        }\n      }\n    }\n    return this;\n  }\n\n  setData(data): this {\n    const textureDataBuffer = this.device.handle.createBuffer({\n      size: data.byteLength,\n      usage: Buffer.COPY_DST | Buffer.COPY_SRC,\n      mappedAtCreation: true\n    });\n    new Uint8Array(textureDataBuffer.getMappedRange()).set(data);\n    textureDataBuffer.unmap();\n\n    this.setBuffer(textureDataBuffer);\n\n    textureDataBuffer.destroy();\n    return this;\n  }\n\n  setBuffer(textureDataBuffer, {bytesPerRow}): this {\n    const commandEncoder = this.device.handle.createCommandEncoder();\n    commandEncoder.copyBufferToTexture(\n      {\n        buffer: textureDataBuffer,\n        bytesPerRow\n      },\n      {\n        texture: this.handle\n      },\n      {\n        width,\n        height,\n        depth\n      }\n    );\n\n    this.device.handle.defaultQueue.submit([commandEncoder.finish()]);\n    return this;\n  }\n  */\n}\n"],"mappings":"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"}

package/dist/adapter/webgpu-canvas-context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@webgpu/types" />
+/// <reference types="dist" />
 import type { Texture, TextureFormat, CanvasContextProps } from '@luma.gl/api';
 import { CanvasContext } from '@luma.gl/api';
 import WebGPUDevice from './webgpu-device';

package/dist/adapter/webgpu-canvas-context.js

@@ -1,83 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { CanvasContext, log } from '@luma.gl/api';
-import { getWebGPUTextureFormat } from './helpers/convert-texture-format.js';
-import WEBGPUFramebuffer from './resources/webgpu-framebuffer.js';
-/**
- * Holds a WebGPU Canvas Context which handles resizing etc
- */
+import { getWebGPUTextureFormat } from "./helpers/convert-texture-format.js";
+import WEBGPUFramebuffer from "./resources/webgpu-framebuffer.js";
 export default class WebGPUCanvasContext extends CanvasContext {
-    constructor(device, adapter, props) {
-        super(props);
-        this.depthStencilFormat = 'depth24plus';
-        this.sampleCount = 1;
+  constructor(device, adapter, props) {
+    super(props);
+    _defineProperty(this, "device", void 0);
+    _defineProperty(this, "gpuCanvasContext", void 0);
+    _defineProperty(this, "format", void 0);
+    _defineProperty(this, "depthStencilFormat", 'depth24plus');
+    _defineProperty(this, "sampleCount", 1);
+    _defineProperty(this, "depthStencilAttachment", null);
+    this.device = device;
+    this.width = -1;
+    this.height = -1;
+    this._setAutoCreatedCanvasId("".concat(this.device.id, "-canvas"));
+    this.gpuCanvasContext = this.canvas.getContext('webgpu');
+    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+  }
+  destroy() {
+    this.gpuCanvasContext.unconfigure();
+  }
+  getCurrentFramebuffer() {
+    this.update();
+    const currentColorAttachment = this.device.createTexture({
+      id: 'default-render-target',
+      handle: this.gpuCanvasContext.getCurrentTexture(),
+      format: this.format,
+      width: this.width,
+      height: this.height
+    });
+    this._createDepthStencilAttachment();
+    return new WEBGPUFramebuffer(this.device, {
+      colorAttachments: [currentColorAttachment],
+      depthStencilAttachment: this.depthStencilAttachment
+    });
+  }
+  update() {
+    const [width, height] = this.getPixelSize();
+    const sizeChanged = width !== this.width || height !== this.height;
+    if (sizeChanged) {
+      this.width = width;
+      this.height = height;
+      if (this.depthStencilAttachment) {
+        this.depthStencilAttachment.destroy();
         this.depthStencilAttachment = null;
-        this.device = device;
-        // TODO - hack to trigger resize?
-        this.width = -1;
-        this.height = -1;
-        this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-        this.gpuCanvasContext = this.canvas.getContext('webgpu');
-        // @ts-expect-error TODO this has been replaced
-        this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+      }
+      this.gpuCanvasContext.configure({
+        device: this.device.handle,
+        format: getWebGPUTextureFormat(this.format),
+        colorSpace: this.props.colorSpace,
+        alphaMode: this.props.alphaMode
+      });
+      log.log(1, "Resized to ".concat(this.width, "x").concat(this.height, "px"))();
     }
-    destroy() {
-        this.gpuCanvasContext.unconfigure();
-    }
-    /** Update framebuffer with properly resized "swap chain" texture views */
-    getCurrentFramebuffer() {
-        // Ensure the canvas context size is updated
-        this.update();
-        // Wrap the current canvas context texture in a luma.gl texture 
-        const currentColorAttachment = this.device.createTexture({
-            id: 'default-render-target',
-            handle: this.gpuCanvasContext.getCurrentTexture(),
-            format: this.format,
-            width: this.width,
-            height: this.height
-        });
-        // Resize the depth stencil attachment
-        this._createDepthStencilAttachment();
-        return new WEBGPUFramebuffer(this.device, {
-            colorAttachments: [currentColorAttachment],
-            depthStencilAttachment: this.depthStencilAttachment
-        });
-    }
-    /** Resizes and updates render targets if necessary */
-    update() {
-        const [width, height] = this.getPixelSize();
-        const sizeChanged = width !== this.width || height !== this.height;
-        if (sizeChanged) {
-            this.width = width;
-            this.height = height;
-            if (this.depthStencilAttachment) {
-                this.depthStencilAttachment.destroy();
-                this.depthStencilAttachment = null;
-            }
-            // Reconfigure the canvas size.
-            // https://www.w3.org/TR/webgpu/#canvas-configuration
-            this.gpuCanvasContext.configure({
-                device: this.device.handle,
-                format: getWebGPUTextureFormat(this.format),
-                // size: [this.width, this.height],
-                colorSpace: this.props.colorSpace,
-                alphaMode: this.props.alphaMode
-            });
-            log.log(1, `Resized to ${this.width}x${this.height}px`)();
-        }
-    }
-    resize(options) {
-        this.update();
-    }
-    /** We build render targets on demand (i.e. not when size changes but when about to render) */
-    _createDepthStencilAttachment() {
-        if (!this.depthStencilAttachment) {
-            this.depthStencilAttachment = this.device.createTexture({
-                id: 'depth-stencil-target',
-                format: this.depthStencilFormat,
-                width: this.width,
-                height: this.height,
-                usage: GPUTextureUsage.RENDER_ATTACHMENT
-            });
-        }
-        return this.depthStencilAttachment;
+  }
+  resize(options) {
+    this.update();
+  }
+  _createDepthStencilAttachment() {
+    if (!this.depthStencilAttachment) {
+      this.depthStencilAttachment = this.device.createTexture({
+        id: 'depth-stencil-target',
+        format: this.depthStencilFormat,
+        width: this.width,
+        height: this.height,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
     }
+    return this.depthStencilAttachment;
+  }
 }
+//# sourceMappingURL=webgpu-canvas-context.js.map

package/dist/adapter/webgpu-canvas-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgpu-canvas-context.js","names":["CanvasContext","log","getWebGPUTextureFormat","WEBGPUFramebuffer","WebGPUCanvasContext","constructor","device","adapter","props","_defineProperty","width","height","_setAutoCreatedCanvasId","concat","id","gpuCanvasContext","canvas","getContext","format","getPreferredFormat","destroy","unconfigure","getCurrentFramebuffer","update","currentColorAttachment","createTexture","handle","getCurrentTexture","_createDepthStencilAttachment","colorAttachments","depthStencilAttachment","getPixelSize","sizeChanged","configure","colorSpace","alphaMode","resize","options","depthStencilFormat","usage","GPUTextureUsage","RENDER_ATTACHMENT"],"sources":["../../src/adapter/webgpu-canvas-context.ts"],"sourcesContent":["import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/api';\nimport {CanvasContext, log} from '@luma.gl/api';\nimport {getWebGPUTextureFormat} from './helpers/convert-texture-format';\nimport WebGPUDevice from './webgpu-device';\nimport WEBGPUFramebuffer from './resources/webgpu-framebuffer';\n\n/** \n * Holds a WebGPU Canvas Context which handles resizing etc \n */\nexport default class WebGPUCanvasContext extends CanvasContext {\n  readonly device: WebGPUDevice;\n  readonly gpuCanvasContext: GPUCanvasContext;\n  readonly format: TextureFormat;\n  depthStencilFormat: TextureFormat = 'depth24plus';\n  sampleCount: number = 1;\n\n  private depthStencilAttachment: Texture | null = null;\n\n  constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {\n    super(props);\n    this.device = device;\n    // TODO - hack to trigger resize?\n    this.width = -1;\n    this.height = -1;\n  \n    this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);\n    this.gpuCanvasContext = this.canvas.getContext('webgpu') as GPUCanvasContext;\n    // @ts-expect-error TODO this has been replaced\n    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);\n  }\n\n  destroy(): void {\n    this.gpuCanvasContext.unconfigure();\n  }\n\n  /** Update framebuffer with properly resized \"swap chain\" texture views */\n  getCurrentFramebuffer(): WEBGPUFramebuffer {\n    // Ensure the canvas context size is updated\n    this.update();\n\n    // Wrap the current canvas context texture in a luma.gl texture \n    const currentColorAttachment = this.device.createTexture({\n      id: 'default-render-target',\n      handle: this.gpuCanvasContext.getCurrentTexture(),\n      format: this.format,\n      width: this.width,\n      height: this.height\n    });\n\n    // Resize the depth stencil attachment\n    this._createDepthStencilAttachment();\n\n    return new WEBGPUFramebuffer(this.device, {\n      colorAttachments: [currentColorAttachment],\n      depthStencilAttachment: this.depthStencilAttachment\n    });\n  }\n\n  /** Resizes and updates render targets if necessary */\n  update() {\n    const [width, height] = this.getPixelSize();\n\n    const sizeChanged = width !== this.width || height !== this.height;\n\n    if (sizeChanged) {\n      this.width = width;\n      this.height = height;\n\n      if (this.depthStencilAttachment) {\n        this.depthStencilAttachment.destroy();\n        this.depthStencilAttachment = null;\n      }\n\n      // Reconfigure the canvas size.\n      // https://www.w3.org/TR/webgpu/#canvas-configuration\n      this.gpuCanvasContext.configure({\n        device: this.device.handle,\n        format: getWebGPUTextureFormat(this.format),\n        // size: [this.width, this.height],\n        colorSpace: this.props.colorSpace,\n        alphaMode: this.props.alphaMode\n      });\n\n      log.log(1, `Resized to ${this.width}x${this.height}px`)();\n    }\n\n  }\n\n  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {\n    this.update();\n  }\n\n  /** We build render targets on demand (i.e. not when size changes but when about to render) */\n  _createDepthStencilAttachment() {\n    if (!this.depthStencilAttachment) {\n      this.depthStencilAttachment = this.device.createTexture({\n        id: 'depth-stencil-target',\n        format: this.depthStencilFormat,\n        width: this.width,\n        height: this.height,\n        usage: GPUTextureUsage.RENDER_ATTACHMENT\n      });\n    }\n    return this.depthStencilAttachment;\n  }\n}\n"],"mappings":"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"}

package/dist/adapter/webgpu-device.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@webgpu/types" />
+/// <reference types="dist" />
 import type { DeviceProps, DeviceInfo, DeviceLimits, DeviceFeature, CanvasContextProps, BufferProps, SamplerProps, ShaderProps, TextureProps, TextureFormat, ExternalTextureProps, FramebufferProps, RenderPipelineProps, ComputePipelineProps, RenderPassProps, ComputePassProps } from '@luma.gl/api';
 import { Device } from '@luma.gl/api';
 import WebGPUBuffer from './resources/webgpu-buffer';

package/dist/adapter/webgpu-device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgpu-device.d.ts","sourceRoot":"","sources":["../../src/adapter/webgpu-device.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webgpu-device.d.ts","sourceRoot":"","sources":["../../src/adapter/webgpu-device.ts"],"names":[],"mappings":"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"}