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

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

@@ -1,111 +1,108 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+// luma.gl, MIT license
 import { Texture } from '@luma.gl/api';
-import { getWebGPUTextureFormat } from '../helpers/convert-texture-format';
-import WebGPUSampler from './webgpu-sampler';
+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 {
-  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');
+    // 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;
+        });
     }
-
-    this.device = device;
-    this.handle = this.props.handle || this.createHandle();
-
-    if (this.props.data) {
-      this.setData({
-        data: this.props.data
-      });
+    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.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');
+    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;
     }
-
-    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/webgpu-canvas-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgpu-canvas-context.d.ts","sourceRoot":"","sources":["../../src/adapter/webgpu-canvas-context.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAM,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,aAAa;IAC5D,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAC5C,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,kBAAkB,EAAE,aAAa,CAAiB;IAClD,WAAW,EAAE,MAAM,CAAK;IAExB,OAAO,CAAC,sBAAsB,CAAwB;gBAE1C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB;IAYhF,OAAO,IAAI,IAAI;IAIf,0EAA0E;IAC1E,qBAAqB,IAAI,iBAAiB;IAsB1C,sDAAsD;IACtD,MAAM;IA6BN,MAAM,CAAC,OAAO,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;KAAC,GAAG,IAAI;IAI7F,8FAA8F;IAC9F,6BAA6B;CAY9B"}
+{"version":3,"file":"webgpu-canvas-context.d.ts","sourceRoot":"","sources":["../../src/adapter/webgpu-canvas-context.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAM,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,aAAa;IAC5D,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAC5C,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,kBAAkB,EAAE,aAAa,CAAiB;IAClD,WAAW,EAAE,MAAM,CAAK;IAExB,OAAO,CAAC,sBAAsB,CAAwB;gBAE1C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB;IAahF,OAAO,IAAI,IAAI;IAIf,0EAA0E;IAC1E,qBAAqB,IAAI,iBAAiB;IAsB1C,sDAAsD;IACtD,MAAM;IA6BN,MAAM,CAAC,OAAO,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;KAAC,GAAG,IAAI;IAI7F,8FAA8F;IAC9F,6BAA6B;CAY9B"}

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

@@ -1,96 +1,83 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { CanvasContext, log } from '@luma.gl/api';
-import { getWebGPUTextureFormat } from './helpers/convert-texture-format';
-import WEBGPUFramebuffer from './resources/webgpu-framebuffer';
+import { getWebGPUTextureFormat } from './helpers/convert-texture-format.js';
+import WEBGPUFramebuffer from './resources/webgpu-framebuffer.js';
+/**
+ * Holds a WebGPU Canvas Context which handles resizing etc
+ */
 export default class WebGPUCanvasContext extends CanvasContext {
-  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();
+    constructor(device, adapter, props) {
+        super(props);
+        this.depthStencilFormat = 'depth24plus';
+        this.sampleCount = 1;
         this.depthStencilAttachment = null;
-      }
-
-      this.gpuCanvasContext.configure({
-        device: this.device.handle,
-        format: getWebGPUTextureFormat(this.format),
-        size: [this.width, this.height],
-        colorSpace: this.props.colorSpace,
-        compositingAlphaMode: this.props.compositingAlphaMode
-      });
-      log.log(1, "Resized to ".concat(this.width, "x").concat(this.height, "px"))();
+        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);
     }
-  }
-
-  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
-      });
+    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;
     }
-
-    return this.depthStencilAttachment;
-  }
-
 }
-//# sourceMappingURL=webgpu-canvas-context.js.map