@luma.gl/webgpu 9.1.0-alpha.1 → 9.1.0-alpha.9

package/src/adapter/resources/webgpu-texture.ts

@@ -14,7 +14,8 @@ import type {
   Texture3DData,
   TextureCubeData,
   TextureArrayData,
-  TextureCubeArrayData
+  TextureCubeArrayData,
+  ExternalImage
 } from '@luma.gl/core';
 import {Texture} from '@luma.gl/core';
 
@@ -82,7 +83,11 @@ export class WebGPUTexture extends Texture {
     this.handle.label ||= this.id;
 
     if (this.props.data) {
-      this.setData({data: this.props.data});
+      if (Texture.isExternalImage(this.props.data)) {
+        this.setImage({source: this.props.data});
+      } else {
+        this.setData({data: this.props.data});
+      }
     }
 
     this.width = this.handle.width;
@@ -177,13 +182,36 @@ export class WebGPUTexture extends Texture {
     throw new Error('not implemented');
   }
 
-  setData(options: {data: any}) {
-    return this.setImage({source: options.data});
+  setData(options: {data: any}): {width: number; height: number} {
+    let source = options.data;
+
+    if (ArrayBuffer.isView(options.data)) {
+      const clampedArray = new Uint8ClampedArray(options.data.buffer);
+      // TODO - pass through src data color space as ImageData Options?
+      source = new ImageData(clampedArray, this.width, this.height);
+    }
+
+    return this.setImage({source});
   }
 
+  // setDataFromTypedArray(data): this {
+  //   const textureDataBuffer = this.device.handle.createBuffer({
+  //     size: data.byteLength,
+  //     usage: Buffer.COPY_DST | Buffer.COPY_SRC,
+  //     mappedAtCreation: true
+  //   });
+  //   new Uint8Array(textureDataBuffer.getMappedRange()).set(data);
+  //   textureDataBuffer.unmap();
+
+  //   this.setBuffer(textureDataBuffer);
+
+  //   textureDataBuffer.destroy();
+  //   return this;
+  // }
+
   /** Set image */
   setImage(options: {
-    source: ImageBitmap | HTMLCanvasElement | OffscreenCanvas;
+    source: ExternalImage;
     width?: number;
     height?: number;
     depth?: number;
@@ -197,10 +225,11 @@ export class WebGPUTexture extends Texture {
     colorSpace?: 'srgb';
     premultipliedAlpha?: boolean;
   }): {width: number; height: number} {
+    const size = Texture.getExternalImageSize(options.source);
     const {
       source,
-      width = options.source.width,
-      height = options.source.height,
+      width = size.width,
+      height = size.height,
       depth = 1,
       sourceX = 0,
       sourceY = 0,
@@ -283,21 +312,6 @@ export class WebGPUTexture extends Texture {
     return this;
   }
 
-  setData(data): this {
-    const textureDataBuffer = this.device.handle.createBuffer({
-      size: data.byteLength,
-      usage: Buffer.COPY_DST | Buffer.COPY_SRC,
-      mappedAtCreation: true
-    });
-    new Uint8Array(textureDataBuffer.getMappedRange()).set(data);
-    textureDataBuffer.unmap();
-
-    this.setBuffer(textureDataBuffer);
-
-    textureDataBuffer.destroy();
-    return this;
-  }
-
   setBuffer(textureDataBuffer, {bytesPerRow}): this {
     const commandEncoder = this.device.handle.createCommandEncoder();
     commandEncoder.copyBufferToTexture(

package/src/adapter/webgpu-adapter.ts

@@ -0,0 +1,93 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Adapter, DeviceProps, CanvasContext, log} from '@luma.gl/core';
+import {WebGPUDevice} from './webgpu-device';
+
+// / <reference types="@webgpu/types" />
+
+export class WebGPUAdapter extends Adapter {
+  /** type of device's created by this adapter */
+  readonly type: WebGPUDevice['type'] = 'webgpu';
+
+  constructor() {
+    super();
+    // @ts-ignore For backwards compatibility luma.registerDevices
+    WebGPUDevice.adapter = this;
+  }
+
+  /** Check if WebGPU is available */
+  isSupported(): boolean {
+    return Boolean(typeof navigator !== 'undefined' && navigator.gpu);
+  }
+
+  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'
+      );
+    }
+    log.groupCollapsed(1, 'WebGPUDevice created')();
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: 'high-performance'
+      // forceSoftware: false
+    });
+
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
+
+    const adapterInfo = await adapter.requestAdapterInfo();
+    log.probe(2, 'Adapter available', adapterInfo)();
+
+    const requiredFeatures: GPUFeatureName[] = [];
+    const requiredLimits: Record<string, number> = {};
+
+    if (props.requestMaxLimits) {
+      // Require all features
+      requiredFeatures.push(...(Array.from(adapter.features) as GPUFeatureName[]));
+
+      // Require all limits
+      // Filter out chrome specific keys (avoid crash)
+      const limits = Object.keys(adapter.limits).filter(
+        key => !['minSubgroupSize', 'maxSubgroupSize'].includes(key)
+      );
+      for (const key of limits) {
+        const limit = key as keyof GPUSupportedLimits;
+        const value = adapter.limits[limit];
+        if (typeof value === 'number') {
+          requiredLimits[limit] = value;
+        }
+      }
+    }
+
+    const gpuDevice = await adapter.requestDevice({
+      requiredFeatures,
+      requiredLimits
+    });
+
+    log.probe(1, 'GPUDevice available')();
+
+    if (typeof props.canvas === 'string') {
+      await CanvasContext.pageLoaded;
+      log.probe(1, 'DOM is loaded')();
+    }
+
+    const device = new WebGPUDevice(props, gpuDevice, adapter, adapterInfo);
+
+    log.probe(
+      1,
+      'Device created. For more info, set chrome://flags/#enable-webgpu-developer-features'
+    )();
+    log.table(1, device.info)();
+    log.groupEnd(1)();
+    return device;
+  }
+
+  async attach(handle: GPUDevice): Promise<WebGPUDevice> {
+    throw new Error('WebGPUAdapter.attach() not implemented');
+  }
+}
+
+export const webgpuAdapter = new WebGPUAdapter();

package/src/adapter/webgpu-device.ts

@@ -30,7 +30,7 @@ import type {
   QuerySet,
   QuerySetProps
 } from '@luma.gl/core';
-import {Device, DeviceFeatures, CanvasContext, log} from '@luma.gl/core';
+import {Device, DeviceFeatures} from '@luma.gl/core';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
 import {WebGPUTexture} from './resources/webgpu-texture';
 import {WebGPUExternalTexture} from './resources/webgpu-external-texture';
@@ -49,8 +49,6 @@ import {WebGPUQuerySet} from './resources/webgpu-query-set';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
-  static type: string = 'webgpu';
-
   /** type of this device */
   readonly type = 'webgpu';
 
@@ -72,78 +70,11 @@ export class WebGPUDevice extends Device {
   commandEncoder: GPUCommandEncoder | null = null;
   renderPass: WebGPURenderPass | null = null;
 
-  /** Check if WebGPU is available */
-  static isSupported(): boolean {
-    return Boolean(typeof navigator !== 'undefined' && navigator.gpu);
-  }
-
-  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'
-      );
-    }
-    log.groupCollapsed(1, 'WebGPUDevice created')();
-    const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: 'high-performance'
-      // forceSoftware: false
-    });
-    if (!adapter) {
-      throw new Error('Failed to request WebGPU adapter');
-    }
-
-    const adapterInfo = await adapter.requestAdapterInfo();
-    log.probe(2, 'Adapter available', adapterInfo)();
-
-    const requiredFeatures: GPUFeatureName[] = [];
-    const requiredLimits: Record<string, number> = {};
-
-    if (props.requestMaxLimits) {
-      // Require all features
-      requiredFeatures.push(...(Array.from(adapter.features) as GPUFeatureName[]));
-
-      // Require all limits
-      // Filter out chrome specific keys (avoid crash)
-      const limits = Object.keys(adapter.limits).filter(
-        key => !['minSubgroupSize', 'maxSubgroupSize'].includes(key)
-      );
-      for (const key of limits) {
-        const limit = key as keyof GPUSupportedLimits;
-        const value = adapter.limits[limit];
-        if (typeof value === 'number') {
-          requiredLimits[limit] = value;
-        }
-      }
-    }
-
-    const gpuDevice = await adapter.requestDevice({
-      requiredFeatures,
-      requiredLimits
-    });
-
-    log.probe(1, 'GPUDevice available')();
-
-    if (typeof props.canvas === 'string') {
-      await CanvasContext.pageLoaded;
-      log.probe(1, 'DOM is loaded')();
-    }
-
-    const device = new WebGPUDevice(gpuDevice, adapter, adapterInfo, props);
-
-    log.probe(
-      1,
-      'Device created. For more info, set chrome://flags/#enable-webgpu-developer-features'
-    )();
-    log.table(1, device.info)();
-    log.groupEnd(1)();
-    return device;
-  }
-
   constructor(
+    props: DeviceProps,
     device: GPUDevice,
     adapter: GPUAdapter,
-    adapterInfo: GPUAdapterInfo,
-    props: DeviceProps
+    adapterInfo: GPUAdapterInfo
   ) {
     super({...props, id: props.id || 'webgpu-device'});
     this.handle = device;

package/src/index.ts

@@ -3,9 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 // WEBGPU ADAPTER
-export {WebGPUDevice} from './adapter/webgpu-device';
+export type {WebGPUAdapter} from './adapter/webgpu-adapter';
+export {webgpuAdapter} from './adapter/webgpu-adapter';
 
 // WEBGPU CLASSES (typically not accessed directly)
+export {WebGPUDevice} from './adapter/webgpu-device';
 export {WebGPUBuffer} from './adapter/resources/webgpu-buffer';
 export {WebGPUTexture} from './adapter/resources/webgpu-texture';
 export {WebGPUSampler} from './adapter/resources/webgpu-sampler';