@luma.gl/webgpu 9.0.0-alpha.2

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

@@ -0,0 +1,243 @@
+// luma.gl, MIT license
+import {Texture, TextureProps, Sampler, SamplerProps, assert} from '@luma.gl/api';
+import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
+import type WebGPUDevice from '../webgpu-device';
+import WebGPUSampler from './webgpu-sampler';
+
+const BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {
+  '1d': '1d',
+  '2d': '2d',
+  '2d-array': '2d',
+  'cube': '2d',
+  'cube-array': '2d',
+  '3d': '3d'
+};
+
+export default class WebGPUTexture extends Texture {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUTexture;
+  readonly view: GPUTextureView;
+  sampler: WebGPUSampler;
+
+  // static async createFromImageURL(src, usage = 0) {
+  //   const img = document.createElement('img');
+  //   img.src = src;
+  //   await img.decode();
+  //   return WebGPUTexture(img, usage);
+  // }
+
+  constructor(device: WebGPUDevice, props: TextureProps) {
+    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);
+
+    // 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;
+    });
+  }
+
+  protected createHandle(): GPUTexture {
+    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
+    });
+  }
+
+  destroy(): void {
+    this.handle.destroy();
+  }
+
+  /**
+   * Set default sampler
+   * Accept a sampler instance or set of props;
+   */
+  setSampler(sampler: Sampler | SamplerProps): this {
+    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    return this;
+  }
+
+  setData(options: {
+    data: any;
+  }) {
+    return this.setImage({source: options.data});
+  }
+
+  /** Set image */
+  setImage(options: {
+    source: ImageBitmap | HTMLCanvasElement | OffscreenCanvas;
+    width?: number;
+    height?: number;
+    depth?: number;
+    sourceX?: number;
+    sourceY?: number;
+    mipLevel?: number;
+    x?: number;
+    y?: number;
+    z?: number;
+    aspect?: 'all' | 'stencil-only' | 'depth-only';
+    colorSpace?: 'srgb';
+    premultipliedAlpha?: boolean;
+  }): this {
+    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;
+  }
+
+  /*
+  async readPixels() {
+    const readbackBuffer = device.createBuffer({
+        usage: Buffer.COPY_DST | Buffer.MAP_READ,
+        size: 4 * textureWidth * textureHeight,
+    });
+
+    // Copy data from the texture to the buffer.
+    const encoder = device.createCommandEncoder();
+    encoder.copyTextureToBuffer(
+        { texture },
+        { buffer, rowPitch: textureWidth * 4 },
+        [textureWidth, textureHeight],
+    );
+    device.submit([encoder.finish()]);
+
+    // Get the data on the CPU.
+    await buffer.mapAsync(GPUMapMode.READ);
+    saveScreenshot(buffer.getMappedRange());
+    buffer.unmap();
+  }
+
+  setImageData(imageData, usage): this {
+    let data = null;
+
+    const bytesPerRow = Math.ceil((img.width * 4) / 256) * 256;
+    if (bytesPerRow == img.width * 4) {
+      data = imageData.data;
+    } else {
+      data = new Uint8Array(bytesPerRow * img.height);
+      let imagePixelIndex = 0;
+      for (let y = 0; y < img.height; ++y) {
+        for (let x = 0; x < img.width; ++x) {
+          const i = x * 4 + y * bytesPerRow;
+          data[i] = imageData.data[imagePixelIndex];
+          data[i + 1] = imageData.data[imagePixelIndex + 1];
+          data[i + 2] = imageData.data[imagePixelIndex + 2];
+          data[i + 3] = imageData.data[imagePixelIndex + 3];
+          imagePixelIndex += 4;
+        }
+      }
+    }
+    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(
+      {
+        buffer: textureDataBuffer,
+        bytesPerRow
+      },
+      {
+        texture: this.handle
+      },
+      {
+        width,
+        height,
+        depth
+      }
+    );
+
+    this.device.handle.defaultQueue.submit([commandEncoder.finish()]);
+    return this;
+  }
+  */
+}

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

@@ -0,0 +1,102 @@
+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';
+
+/** 
+ * Holds a WebGPU Canvas Context which handles resizing etc 
+ */
+export default 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;
+
+  constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
+    super(props);
+    this.device = device;
+    this.gpuCanvasContext = this.canvas.getContext('webgpu') as GPUCanvasContext;
+    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+  }
+
+  destroy() {
+    this.gpuCanvasContext.unconfigure();
+  }
+
+  /** Update framebuffer with properly resized "swap chain" texture views */
+  getCurrentFramebuffer(): WEBGPUFramebuffer {
+    // 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 = undefined;
+      }
+
+      // 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,
+        compositingAlphaMode: this.props.compositingAlphaMode
+      });
+
+      log.log(1, `Resized to ${this.width}x${this.height}px`)();
+    }
+
+  }
+
+  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
+    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;
+  }
+}

package/src/adapter/webgpu-device.ts

@@ -0,0 +1,282 @@
+/// <reference types="@webgpu/types" />
+
+import type {
+  DeviceProps,
+  DeviceInfo,
+  DeviceLimits,
+  DeviceFeature,
+  CanvasContextProps,
+  BufferProps,
+  SamplerProps,
+  ShaderProps,
+  TextureProps,
+  TextureFormat,
+  ExternalTextureProps,
+  FramebufferProps,
+  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';
+// import {loadGlslangModule} from '../glsl/glslang';
+
+/** WebGPU Device implementation */
+export default class WebGPUDevice extends Device {
+  readonly handle: GPUDevice;
+  readonly adapter: GPUAdapter;
+  readonly lost: Promise<{reason: 'destroyed', message: string}>;
+  canvasContext: WebGPUCanvasContext | undefined;
+
+  commandEncoder: GPUCommandEncoder;
+  renderPass: WebGPURenderPass;
+
+  private _info: DeviceInfo;
+  private _isLost: boolean = false;
+
+  static type: string = 'webgpu';
+
+  /** 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
+    });
+    log.probe(1, "Adapter available")();
+
+    const gpuDevice = await adapter.requestDevice({
+      requiredFeatures: adapter.features as ReadonlySet<GPUFeatureName>,
+      // TODO ensure we obtain best limits
+      // requiredLimits: adapter.limits
+    });
+    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, props);
+    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);
+    this.handle = device;
+    this.adapter = adapter;
+
+    this._info = {
+      type: 'webgpu',
+      vendor: this.adapter.name,
+      renderer: '',
+      version: '',
+      gpu: 'unknown', // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
+      shadingLanguages: ['glsl', 'wgsl'],
+      shadingLanguageVersions: {
+        glsl: '450',
+        wgsl: '100'
+      },
+      vendorMasked: '',
+      rendererMasked: ''
+    };
+
+    this.lost = this.handle.lost;
+    this.lost.then(_ => {
+      this._isLost = true;
+    });
+
+    // 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});
+    }
+
+    this.features = this._getFeatures();
+  }
+
+  // TODO
+  // Load the glslang module now so that it is available synchronously when compiling shaders
+  // const {glsl = true} = props;
+  // this.glslang = glsl && await loadGlslangModule();
+
+  destroy() {
+    this.handle.destroy();
+  }
+
+  get info(): DeviceInfo {
+    return this._info;
+  }
+
+  features: Set<DeviceFeature>;
+
+  get limits(): DeviceLimits {
+    return this.handle.limits;
+  }
+
+  isTextureFormatSupported(format: TextureFormat): boolean {
+    return !format.includes('webgl');
+  }
+
+  /** @todo implement proper check? */
+  isTextureFormatFilterable(format: TextureFormat): boolean {
+    return this.isTextureFormatSupported(format); 
+  }
+
+  /** @todo implement proper check? */
+  isTextureFormatRenderable(format: TextureFormat): boolean {
+    return this.isTextureFormatSupported(format); 
+  }
+
+  get isLost(): boolean {
+    return this._isLost;
+  }
+
+  _createBuffer(props: BufferProps): WebGPUBuffer {
+    return new WebGPUBuffer(this, props);
+  }
+
+  _createTexture(props: TextureProps): WebGPUTexture {
+    return new WebGPUTexture(this, props);
+  }
+
+  createExternalTexture(props: ExternalTextureProps): WebGPUExternalTexture {
+    return new WebGPUExternalTexture(this, props);
+  }
+
+  createShader(props: ShaderProps): WebGPUShader {
+    return new WebGPUShader(this, props);
+  }
+
+  createSampler(props: SamplerProps): WebGPUSampler {
+    return new WebGPUSampler(this, props);
+  }
+
+  createRenderPipeline(props: RenderPipelineProps): WebGPURenderPipeline {
+    return new WebGPURenderPipeline(this, props);
+  }
+
+  createFramebuffer(props: FramebufferProps): WebGPUFramebuffer {
+    throw new Error('Not implemented');
+  }
+
+  createComputePipeline(props: ComputePipelineProps): WebGPUComputePipeline {
+    return new WebGPUComputePipeline(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 {
+    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
+    return new WebGPURenderPass(this, props);
+  }
+
+  beginComputePass(props?: ComputePassProps): WebGPUComputePass {
+    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
+    return new WebGPUComputePass(this, props);
+  }
+
+  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 
+   * @note Called internally by Model.
+   */
+  getDefaultRenderPass(): WebGPURenderPass {
+    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.commandEncoder = null;
+    this.renderPass = null;
+  }
+
+  _getFeatures() {
+    // WebGPU Features
+    const features = new Set<DeviceFeature>(this.handle.features as Set<DeviceFeature>);
+
+    // Fixups for pre-standard names: https://github.com/webgpu-native/webgpu-headers/issues/133
+    // @ts-expect-error Chrome Canary v99
+    if (features.has('depth-clamping')) {
+      // @ts-expect-error Chrome Canary v99
+      features.delete('depth-clamping');
+      features.add('depth-clip-control');
+    }
+
+    // Add subsets
+    if (features.has('texture-compression-bc')) {
+      features.add('texture-compression-bc5-webgl');
+    }
+
+    features.add('webgpu');
+
+    features.add('timer-query-webgl');
+
+    // WEBGL1 SUPPORT
+    features.add('vertex-array-object-webgl1');
+    features.add('instanced-rendering-webgl1');
+    features.add('multiple-render-targets-webgl1');
+    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');
+    features.add('glsl-derivatives');
+    features.add('glsl-texture-lod');
+
+    return features;
+  }
+}

package/src/bundle.ts

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

package/src/glsl/glsllang.ts

@@ -0,0 +1,14 @@
+// Inspired by webgpu samples at https://github.com/austinEng/webgpu-samples/blob/master/src/glslang.ts
+// under BSD 3-clause license
+
+let glslang: unknown;
+
+/** Dynamically load the GLSL compiler */
+export async function loadGlslangModule() {
+  if (!glslang) {
+    // @ts-ignore
+    const glslangModule = await import(/* webpackIgnore: true */ 'https://unpkg.com/@webgpu/glslang@0.0.15/dist/web-devel/glslang.js');
+    glslang = await glslangModule.default();
+  }
+  return glslang;
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+
+// Initialize any global state
+import '@luma.gl/api';
+import './init'
+
+// WEBGPU ADAPTER
+export {default as 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';

package/src/init.ts

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