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

package/src/adapter/webgpu-canvas-context.ts

@@ -1,36 +1,40 @@
 import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/api';
 import {CanvasContext, log} from '@luma.gl/api';
 import {getWebGPUTextureFormat} from './helpers/convert-texture-format';
-import WebGPUDevice from './webgpu-device';
-import WEBGPUFramebuffer from './resources/webgpu-framebuffer';
+import {WebGPUDevice} from './webgpu-device';
+import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 
 /** 
  * Holds a WebGPU Canvas Context which handles resizing etc 
  */
-export default class WebGPUCanvasContext extends CanvasContext {
+export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
   readonly gpuCanvasContext: GPUCanvasContext;
   readonly format: TextureFormat;
-  width: number = -1;
-  height: number = -1;
   depthStencilFormat: TextureFormat = 'depth24plus';
   sampleCount: number = 1;
 
-  private depthStencilAttachment: Texture;
+  private depthStencilAttachment: Texture | null = null;
 
   constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
     super(props);
     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') as GPUCanvasContext;
+    // @ts-expect-error TODO this has been replaced
     this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
   }
 
-  destroy() {
+  destroy(): void {
     this.gpuCanvasContext.unconfigure();
   }
 
   /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer(): WEBGPUFramebuffer {
+  getCurrentFramebuffer(): WebGPUFramebuffer {
     // Ensure the canvas context size is updated
     this.update();
 
@@ -46,7 +50,7 @@ export default class WebGPUCanvasContext extends CanvasContext {
     // Resize the depth stencil attachment
     this._createDepthStencilAttachment();
 
-    return new WEBGPUFramebuffer(this.device, {
+    return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
       depthStencilAttachment: this.depthStencilAttachment
     });
@@ -64,7 +68,7 @@ export default class WebGPUCanvasContext extends CanvasContext {
 
       if (this.depthStencilAttachment) {
         this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = undefined;
+        this.depthStencilAttachment = null;
       }
 
       // Reconfigure the canvas size.
@@ -72,9 +76,9 @@ export default class WebGPUCanvasContext extends CanvasContext {
       this.gpuCanvasContext.configure({
         device: this.device.handle,
         format: getWebGPUTextureFormat(this.format),
-        size: [this.width, this.height],
+        // size: [this.width, this.height],
         colorSpace: this.props.colorSpace,
-        compositingAlphaMode: this.props.compositingAlphaMode
+        alphaMode: this.props.alphaMode
       });
 
       log.log(1, `Resized to ${this.width}x${this.height}px`)();

package/src/adapter/webgpu-device.ts

@@ -1,4 +1,5 @@
-/// <reference types="@webgpu/types" />
+// prettier-ignore
+// / <reference types="@webgpu/types" />
 
 import type {
   DeviceProps,
@@ -18,30 +19,30 @@ import type {
   RenderPassProps,
   ComputePassProps
 } from '@luma.gl/api';
-import {Device, CanvasContext, log, cast} from '@luma.gl/api';
-import WebGPUBuffer from './resources/webgpu-buffer';
-import WebGPUTexture from './resources/webgpu-texture';
-import WebGPUExternalTexture from './resources/webgpu-external-texture';
-import WebGPUSampler from './resources/webgpu-sampler';
-import WebGPUShader from './resources/webgpu-shader';
-import WebGPURenderPipeline from './resources/webgpu-render-pipeline';
-import WebGPUFramebuffer from './resources/webgpu-framebuffer';
-import WebGPUComputePipeline from './resources/webgpu-compute-pipeline';
-import WebGPURenderPass from './resources/webgpu-render-pass';
-import WebGPUComputePass from './resources/webgpu-compute-pass';
-
-import WebGPUCanvasContext from './webgpu-canvas-context';
+import {Device, CanvasContext, log, uid} from '@luma.gl/api';
+import {WebGPUBuffer} from './resources/webgpu-buffer';
+import {WebGPUTexture} from './resources/webgpu-texture';
+import {WebGPUExternalTexture} from './resources/webgpu-external-texture';
+import {WebGPUSampler} from './resources/webgpu-sampler';
+import {WebGPUShader} from './resources/webgpu-shader';
+import {WebGPURenderPipeline} from './resources/webgpu-render-pipeline';
+import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
+import {WebGPUComputePipeline} from './resources/webgpu-compute-pipeline';
+import {WebGPURenderPass} from './resources/webgpu-render-pass';
+import {WebGPUComputePass} from './resources/webgpu-compute-pass';
+
+import {WebGPUCanvasContext} from './webgpu-canvas-context';
 // import {loadGlslangModule} from '../glsl/glslang';
 
 /** WebGPU Device implementation */
-export default class WebGPUDevice extends Device {
+export class WebGPUDevice extends Device {
   readonly handle: GPUDevice;
   readonly adapter: GPUAdapter;
-  readonly lost: Promise<{reason: 'destroyed', message: string}>;
-  canvasContext: WebGPUCanvasContext | undefined;
+  readonly lost: Promise<{reason: 'destroyed'; message: string}>;
+  canvasContext: WebGPUCanvasContext | null = null;
 
-  commandEncoder: GPUCommandEncoder;
-  renderPass: WebGPURenderPass;
+  commandEncoder: GPUCommandEncoder | null = null;
+  renderPass: WebGPURenderPass | null = null;
 
   private _info: DeviceInfo;
   private _isLost: boolean = false;
@@ -55,42 +56,48 @@ export default class WebGPUDevice extends Device {
 
   static async create(props: DeviceProps): Promise<WebGPUDevice> {
     if (!navigator.gpu) {
-      throw new Error('WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu');
+      throw new Error(
+        'WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu'
+      );
     }
     log.groupCollapsed(1, 'WebGPUDevice created')();
     const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: "high-performance"
+      powerPreference: 'high-performance'
       // forceSoftware: false
     });
-    log.probe(1, "Adapter available")();
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
+
+    log.probe(1, 'Adapter available')();
 
     const gpuDevice = await adapter.requestDevice({
-      requiredFeatures: adapter.features as ReadonlySet<GPUFeatureName>,
+      requiredFeatures: adapter.features as ReadonlySet<GPUFeatureName>
       // TODO ensure we obtain best limits
       // requiredLimits: adapter.limits
     });
-    log.probe(1, "GPUDevice available")();
+    log.probe(1, 'GPUDevice available')();
 
     if (typeof props.canvas === 'string') {
       await CanvasContext.pageLoaded;
-      log.probe(1, "DOM is loaded")();
+      log.probe(1, 'DOM is loaded')();
     }
 
     const device = new WebGPUDevice(gpuDevice, adapter, props);
-    log.probe(1, "Device created", device.info)();
+    log.probe(1, 'Device created', device.info)();
     log.table(1, device.info)();
     log.groupEnd(1)();
     return device;
   }
 
   constructor(device: GPUDevice, adapter: GPUAdapter, props: DeviceProps) {
-    super(props);
+    super({...props, id: props.id || uid('webgpu-device')});
     this.handle = device;
     this.adapter = adapter;
 
     this._info = {
       type: 'webgpu',
-      vendor: this.adapter.name,
+      vendor: this.adapter.__brand,
       renderer: '',
       version: '',
       gpu: 'unknown', // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
@@ -103,9 +110,11 @@ export default class WebGPUDevice extends Device {
       rendererMasked: ''
     };
 
-    this.lost = this.handle.lost;
-    this.lost.then(_ => {
+    // "Context" loss handling
+    this.lost = new Promise<{reason: 'destroyed'; message: string}>(async (resolve) => {
+      const lostInfo = await this.handle.lost;
       this._isLost = true;
+      resolve({reason: 'destroyed', message: lostInfo.message});
     });
 
     // Note: WebGPU devices can be created without a canvas, for compute shader purposes
@@ -121,7 +130,7 @@ export default class WebGPUDevice extends Device {
   // const {glsl = true} = props;
   // this.glslang = glsl && await loadGlslangModule();
 
-  destroy() {
+  destroy(): void {
     this.handle.destroy();
   }
 
@@ -141,12 +150,12 @@ export default class WebGPUDevice extends Device {
 
   /** @todo implement proper check? */
   isTextureFormatFilterable(format: TextureFormat): boolean {
-    return this.isTextureFormatSupported(format); 
+    return this.isTextureFormatSupported(format);
   }
 
   /** @todo implement proper check? */
   isTextureFormatRenderable(format: TextureFormat): boolean {
-    return this.isTextureFormatSupported(format); 
+    return this.isTextureFormatSupported(format);
   }
 
   get isLost(): boolean {
@@ -187,40 +196,44 @@ export default class WebGPUDevice extends Device {
 
   // WebGPU specifics
 
-  /** 
+  /**
    * Allows a render pass to begin against a canvas context
    * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
    */
-  beginRenderPass(props?: RenderPassProps): WebGPURenderPass {
+  beginRenderPass(props: RenderPassProps): WebGPURenderPass {
     this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
     return new WebGPURenderPass(this, props);
   }
 
-  beginComputePass(props?: ComputePassProps): WebGPUComputePass {
+  beginComputePass(props: ComputePassProps): WebGPUComputePass {
     this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
     return new WebGPUComputePass(this, props);
   }
 
-  createCanvasContext(props?: CanvasContextProps): WebGPUCanvasContext {
+  createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
 
-  /** 
+  /**
    * Gets default renderpass encoder.
-   * Creates a new encoder against default canvasContext if not already created 
+   * Creates a new encoder against default canvasContext if not already created
    * @note Called internally by Model.
    */
   getDefaultRenderPass(): WebGPURenderPass {
-    this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: this.canvasContext.getCurrentFramebuffer()
-    });
+    this.renderPass =
+      this.renderPass ||
+      this.beginRenderPass({
+        framebuffer: this.canvasContext?.getCurrentFramebuffer()
+      });
     return this.renderPass;
   }
 
   submit(): void {
-    this.renderPass.endPass();
-    const commandBuffer = this.commandEncoder.finish();
-    this.handle.queue.submit([commandBuffer]);
+    this.renderPass?.end();
+    const commandBuffer = this.commandEncoder?.finish();
+    if (commandBuffer) {
+      this.handle.queue.submit([commandBuffer]);
+    }
     this.commandEncoder = null;
     this.renderPass = null;
   }
@@ -253,24 +266,24 @@ export default class WebGPUDevice extends Device {
     features.add('index-uint32-webgl1');
     features.add('blend-minmax-webgl1');
     features.add('texture-blend-float-webgl1');
-  
+
     // TEXTURES, RENDERBUFFERS
     features.add('texture-formats-srgb-webgl1');
-  
+
     // TEXTURES
     features.add('texture-formats-depth-webgl1');
     features.add('texture-formats-float32-webgl1');
     features.add('texture-formats-float16-webgl1');
-  
+
     features.add('texture-filter-linear-float32-webgl');
     features.add('texture-filter-linear-float16-webgl');
     features.add('texture-filter-anisotropic-webgl');
-  
+
     // FRAMEBUFFERS, TEXTURES AND RENDERBUFFERS
     features.add('texture-renderable-rgba32float-webgl');
     features.add('texture-renderable-float32-webgl');
     features.add('texture-renderable-float16-webgl');
-  
+
     // GLSL extensions
     features.add('glsl-frag-data');
     features.add('glsl-frag-depth');

package/src/index.ts

@@ -1,13 +1,10 @@
-
-// Initialize any global state
-import '@luma.gl/api';
-import './init'
+// luma.gl, MIT license
 
 // WEBGPU ADAPTER
-export {default as WebGPUDevice} from './adapter/webgpu-device';
+export {WebGPUDevice} from './adapter/webgpu-device';
 
 // WEBGPU CLASSES (typically not accessed directly)
-export {default as WebGPUBuffer} from './adapter/resources/webgpu-buffer';
-export {default as WebGPUTexture} from './adapter/resources/webgpu-texture';
-export {default as WebGPUSampler} from './adapter/resources/webgpu-sampler';
-export {default as WebGPUShader} from './adapter/resources/webgpu-shader';
+export {WebGPUBuffer} from './adapter/resources/webgpu-buffer';
+export {WebGPUTexture} from './adapter/resources/webgpu-texture';
+export {WebGPUSampler} from './adapter/resources/webgpu-sampler';
+export {WebGPUShader} from './adapter/resources/webgpu-shader';

package/dist/bundle.d.ts

@@ -1,2 +0,0 @@
-declare const moduleExports: any;
-//# sourceMappingURL=bundle.d.ts.map

package/dist/bundle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../src/bundle.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,aAAa,KAAqB,CAAC"}

package/dist/bundle.js

@@ -1,5 +0,0 @@
-const moduleExports = require('./index');
-
-globalThis.luma = globalThis.luma || {};
-module.exports = Object.assign(globalThis.luma, moduleExports);
-//# sourceMappingURL=bundle.js.map

package/dist/bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/bundle.ts"],"names":["moduleExports","require","globalThis","luma","module","exports","Object","assign"],"mappings":"AACA,MAAMA,aAAa,GAAGC,OAAO,CAAC,SAAD,CAA7B;;AACAC,UAAU,CAACC,IAAX,GAAkBD,UAAU,CAACC,IAAX,IAAmB,EAArC;AACAC,MAAM,CAACC,OAAP,GAAiBC,MAAM,CAACC,MAAP,CAAcL,UAAU,CAACC,IAAzB,EAA+BH,aAA/B,CAAjB","sourcesContent":["// @ts-nocheck\nconst moduleExports = require('./index');\nglobalThis.luma = globalThis.luma || {};\nmodule.exports = Object.assign(globalThis.luma, moduleExports);\n"],"file":"bundle.js"}

package/dist/init.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=init.d.ts.map

package/dist/init.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":""}

package/dist/init.js

@@ -1,4 +0,0 @@
-import { luma } from '@luma.gl/api';
-import WebGPUDevice from './adapter/webgpu-device';
-luma.registerDevices([WebGPUDevice]);
-//# sourceMappingURL=init.js.map

package/dist/init.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/init.ts"],"names":["luma","WebGPUDevice","registerDevices"],"mappings":"AAAA,SAAQA,IAAR,QAAmB,cAAnB;AACA,OAAOC,YAAP,MAAyB,yBAAzB;AAEAD,IAAI,CAACE,eAAL,CAAqB,CAACD,YAAD,CAArB","sourcesContent":["import {luma} from '@luma.gl/api';\nimport WebGPUDevice from './adapter/webgpu-device';\n\nluma.registerDevices([WebGPUDevice]);\n"],"file":"init.js"}

package/src/bundle.ts

@@ -1,4 +0,0 @@
-// @ts-nocheck
-const moduleExports = require('./index');
-globalThis.luma = globalThis.luma || {};
-module.exports = Object.assign(globalThis.luma, moduleExports);

package/src/init.ts

@@ -1,4 +0,0 @@
-import {luma} from '@luma.gl/api';
-import WebGPUDevice from './adapter/webgpu-device';
-
-luma.registerDevices([WebGPUDevice]);