@luma.gl/webgpu 9.0.0-alpha.5 → 9.0.0-alpha.50

package/src/adapter/webgpu-device.ts

@@ -1,4 +1,5 @@
-/// <reference types="@webgpu/types" />
+// prettier-ignore
+// / <reference types="@webgpu/types" />
 
 import type {
   DeviceProps,
@@ -9,6 +10,7 @@ import type {
   BufferProps,
   SamplerProps,
   ShaderProps,
+  Texture,
   TextureProps,
   TextureFormat,
   ExternalTextureProps,
@@ -16,32 +18,38 @@ import type {
   RenderPipelineProps,
   ComputePipelineProps,
   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';
+  ComputePassProps,
+  // CommandEncoderProps,
+  VertexArrayProps,
+  TransformFeedback,
+  TransformFeedbackProps
+} from '@luma.gl/core';
+import {Device, CanvasContext, log, uid} from '@luma.gl/core';
+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 {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
+import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
+
+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,63 +63,74 @@ 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');
+    }
+
+    const adapterInfo = await adapter.requestAdapterInfo();
+    log.probe(1, 'Adapter available', adapterInfo)();
 
     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',
-      shadingLanguages: ['glsl', 'wgsl'],
-      shadingLanguageVersions: {
-        glsl: '450',
-        wgsl: '100'
-      },
+      shadingLanguage: 'wgsl',
+      shadingLanguageVersion: 100,
       vendorMasked: '',
       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
-    if (props.canvas) {
-      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, {canvas: props.canvas});
-    }
+    // if (props.canvas) {
+    this.canvasContext = new WebGPUCanvasContext(this, this.adapter, {
+      canvas: props.canvas,
+      height: props.height,
+      width: props.width,
+      container: props.container
+    });
+    // }
 
     this.features = this._getFeatures();
   }
@@ -121,7 +140,7 @@ export default class WebGPUDevice extends Device {
   // const {glsl = true} = props;
   // this.glslang = glsl && await loadGlslangModule();
 
-  destroy() {
+  destroy(): void {
     this.handle.destroy();
   }
 
@@ -141,20 +160,21 @@ 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 {
     return this._isLost;
   }
 
-  _createBuffer(props: BufferProps): WebGPUBuffer {
-    return new WebGPUBuffer(this, props);
+  createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
+    const newProps = this._getBufferProps(props);
+    return new WebGPUBuffer(this, newProps);
   }
 
   _createTexture(props: TextureProps): WebGPUTexture {
@@ -185,44 +205,62 @@ export default class WebGPUDevice extends Device {
     return new WebGPUComputePipeline(this, props);
   }
 
+  createVertexArray(props: VertexArrayProps): WebGPUVertexArray {
+    return new WebGPUVertexArray(this, props);
+  }
+
   // 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 {
+  // createCommandEncoder(props: CommandEncoderProps): WebGPUCommandEncoder {
+  //   return new WebGPUCommandEncoder(this, props);
+  // }
+
+  createTransformFeedback(props: TransformFeedbackProps): TransformFeedback {
+    throw new Error('Transform feedback not supported in WebGPU');
+  }
+
+  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.
+   * @deprecated Create explicit pass with device.beginRenderPass
    */
   getDefaultRenderPass(): WebGPURenderPass {
-    this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: this.canvasContext.getCurrentFramebuffer()
-    });
-    return this.renderPass;
+    // this.renderPass =
+    //   this.renderPass ||
+    //   this.beginRenderPass({
+    //     framebuffer: this.canvasContext?.getCurrentFramebuffer()
+    //   });
+    // return this.renderPass;
+    throw new Error('a');
   }
 
   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;
+    // this.renderPass = null;
   }
 
   _getFeatures() {
@@ -253,24 +291,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');
@@ -279,4 +317,60 @@ export default class WebGPUDevice extends Device {
 
     return features;
   }
+
+  copyExternalImageToTexture(options: {
+    texture: Texture;
+    mipLevel?: number;
+    aspect?: 'all' | 'stencil-only' | 'depth-only';
+    colorSpace?: 'display-p3' | 'srgb';
+    premultipliedAlpha?: boolean;
+
+    source: ImageBitmap | HTMLVideoElement | HTMLCanvasElement | OffscreenCanvas;
+    sourceX?: number;
+    sourceY?: number;
+
+    width?: number;
+    height?: number;
+    depth?: number;
+  }): void {
+    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 as WebGPUTexture;
+
+    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]
+    );
+  }
 }

package/src/index.ts

@@ -1,13 +1,11 @@
-
-// Initialize any global state
-import '@luma.gl/api';
-import './init'
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
 
 // 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]);