@luma.gl/webgpu 9.3.0-alpha.4 → 9.3.0-alpha.8

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

@@ -0,0 +1,180 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// prettier-ignore
+// / <reference types="@webgpu/types" />
+
+import type {PresentationContextProps, TextureFormatDepthStencil} from '@luma.gl/core';
+import {PresentationContext, Texture, log} from '@luma.gl/core';
+import type {WebGPUDevice} from './webgpu-device';
+import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
+import {WebGPUTexture} from './resources/webgpu-texture';
+import {getCpuHotspotProfiler, getTimestamp} from './helpers/cpu-hotspot-profiler';
+
+/**
+ * A WebGPU PresentationContext renders directly into its destination canvas.
+ */
+export class WebGPUPresentationContext extends PresentationContext {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUCanvasContext;
+
+  private colorAttachment: WebGPUTexture | null = null;
+  private depthStencilAttachment: WebGPUTexture | null = null;
+  private framebuffer: WebGPUFramebuffer | null = null;
+
+  get [Symbol.toStringTag](): string {
+    return 'WebGPUPresentationContext';
+  }
+
+  constructor(device: WebGPUDevice, props: PresentationContextProps = {}) {
+    super(props);
+    const contextLabel = `${this[Symbol.toStringTag]}(${this.id})`;
+
+    const context = this.canvas.getContext('webgpu');
+    if (!context) {
+      throw new Error(`${contextLabel}: Failed to create WebGPU presentation context`);
+    }
+    this.device = device;
+    this.handle = context;
+
+    this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+    this._configureDevice();
+    this._startObservers();
+  }
+
+  override destroy(): void {
+    if (this.framebuffer) {
+      this.framebuffer.destroy();
+      this.framebuffer = null;
+    }
+    if (this.colorAttachment) {
+      this.colorAttachment.destroy();
+      this.colorAttachment = null;
+    }
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
+    this.handle.unconfigure();
+    super.destroy();
+  }
+
+  present(): void {
+    this.device.submit();
+  }
+
+  protected override _configureDevice(): void {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
+
+    this.handle.configure({
+      device: this.device.handle,
+      format: this.device.preferredColorFormat,
+      colorSpace: this.props.colorSpace,
+      alphaMode: this.props.alphaMode
+    });
+
+    this._createDepthStencilAttachment(this.device.preferredDepthFormat);
+  }
+
+  protected override _getCurrentFramebuffer(
+    options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
+      depthStencilFormat: 'depth24plus'
+    }
+  ): WebGPUFramebuffer {
+    const profiler = getCpuHotspotProfiler(this.device);
+    const startTime = profiler ? getTimestamp() : 0;
+    if (profiler) {
+      profiler.framebufferAcquireCount = (profiler.framebufferAcquireCount || 0) + 1;
+    }
+
+    try {
+      const currentColorAttachment = this._getCurrentTexture();
+      if (
+        currentColorAttachment.width !== this.drawingBufferWidth ||
+        currentColorAttachment.height !== this.drawingBufferHeight
+      ) {
+        const [oldWidth, oldHeight] = this.getDrawingBufferSize();
+        this.drawingBufferWidth = currentColorAttachment.width;
+        this.drawingBufferHeight = currentColorAttachment.height;
+        log.log(
+          1,
+          `${this[Symbol.toStringTag]}(${this.id}): Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
+        )();
+      }
+
+      if (options?.depthStencilFormat) {
+        this._createDepthStencilAttachment(options.depthStencilFormat);
+      }
+
+      this.framebuffer ||= new WebGPUFramebuffer(this.device, {
+        id: `${this.id}#framebuffer`,
+        colorAttachments: [currentColorAttachment],
+        depthStencilAttachment: null
+      });
+      this.framebuffer._reinitialize(
+        currentColorAttachment.view,
+        options?.depthStencilFormat ? this.depthStencilAttachment?.view || null : null
+      );
+      return this.framebuffer;
+    } finally {
+      if (profiler) {
+        profiler.framebufferAcquireTimeMs =
+          (profiler.framebufferAcquireTimeMs || 0) + (getTimestamp() - startTime);
+      }
+    }
+  }
+
+  private _getCurrentTexture(): WebGPUTexture {
+    const profiler = getCpuHotspotProfiler(this.device);
+    const currentTextureStartTime = profiler ? getTimestamp() : 0;
+    const handle = this.handle.getCurrentTexture();
+    if (profiler) {
+      profiler.currentTextureAcquireCount = (profiler.currentTextureAcquireCount || 0) + 1;
+      profiler.currentTextureAcquireTimeMs =
+        (profiler.currentTextureAcquireTimeMs || 0) + (getTimestamp() - currentTextureStartTime);
+    }
+    if (!this.colorAttachment) {
+      this.colorAttachment = this.device.createTexture({
+        id: `${this.id}#color-texture`,
+        handle,
+        format: this.device.preferredColorFormat,
+        width: handle.width,
+        height: handle.height
+      });
+      return this.colorAttachment;
+    }
+
+    this.colorAttachment._reinitialize(handle, {
+      handle,
+      format: this.device.preferredColorFormat,
+      width: handle.width,
+      height: handle.height
+    });
+    return this.colorAttachment;
+  }
+
+  private _createDepthStencilAttachment(
+    depthStencilFormat: TextureFormatDepthStencil
+  ): WebGPUTexture {
+    const needsNewDepthStencilAttachment =
+      !this.depthStencilAttachment ||
+      this.depthStencilAttachment.width !== this.drawingBufferWidth ||
+      this.depthStencilAttachment.height !== this.drawingBufferHeight ||
+      this.depthStencilAttachment.format !== depthStencilFormat;
+    if (needsNewDepthStencilAttachment) {
+      this.depthStencilAttachment?.destroy();
+      this.depthStencilAttachment = this.device.createTexture({
+        id: `${this.id}#depth-stencil-texture`,
+        usage: Texture.RENDER_ATTACHMENT,
+        format: depthStencilFormat,
+        width: this.drawingBufferWidth,
+        height: this.drawingBufferHeight
+      });
+    }
+    return this.depthStencilAttachment!;
+  }
+}

package/src/wgsl/get-shader-layout-wgsl.ts

@@ -41,6 +41,15 @@ export function getShaderLayoutFromWGSL(source: string): ShaderLayout {
     });
   }
 
+  for (const storageBuffer of parsedWGSL.storage) {
+    shaderLayout.bindings.push({
+      type: storageBuffer.access === 'read' ? 'read-only-storage' : 'storage',
+      name: storageBuffer.name,
+      group: storageBuffer.group,
+      location: storageBuffer.binding
+    });
+  }
+
   for (const texture of parsedWGSL.textures) {
     const bindingDeclaration: TextureBindingLayout = {
       type: 'texture',

package/dist/adapter/helpers/accessor-to-format.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=accessor-to-format.d.ts.map

package/dist/adapter/helpers/accessor-to-format.d.ts.map

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

package/dist/adapter/helpers/accessor-to-format.js

@@ -1,105 +0,0 @@
-"use strict";
-// luma.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-/*
-import {assert} from '@luma.gl/core';
-
-type Accessor = Record<string, any>;
-
-const FORMAT_TO_ACCESSOR: Record<GPUVertexFormat, Accessor> = {
-  uchar2: {type: 'uchar', size: 2},
-  uchar4: {type: 'uchar', size: 4},
-  char2: {type: 'char', size: 2},
-  char4: {type: 'char', size: 4},
-  uchar2norm: {type: 'uchar', size: 2, normalized: true},
-  uchar4norm: {type: 'uchar', size: 4, normalized: true},
-  char2norm: {type: 'char', size: 2, normalized: true},
-  char4norm: {type: 'char', size: 4, normalized: true},
-  ushort2: {type: 'ushort', size: 2},
-  ushort4: {type: 'ushort', size: 4},
-  short2: {type: 'short', size: 2},
-  short4: {type: 'short', size: 4},
-  ushort2norm: {type: 'ushort', size: 2, normalized: true},
-  ushort4norm: {type: 'ushort', size: 4, normalized: true},
-  short2norm: {type: 'short', size: 1, normalized: true},
-  short4norm: {type: 'short', size: 1, normalized: true},
-  half2: {type: 'half', size: 2},
-  half4: {type: 'half', size: 4},
-  float: {type: 'float', size: 1},
-  float2: {type: 'float', size: 2},
-  float3: {type: 'float', size: 3},
-  float4: {type: 'float', size: 4},
-  uint: {type: 'uint', size: 1, integer: true},
-  uint2: {type: 'uint', size: 2, integer: true},
-  uint3: {type: 'uint', size: 3, integer: true},
-  uint4: {type: 'uint', size: 4, integer: true},
-  int: {type: 'int', size: 1, integer: true},
-  int2: {type: 'int', size: 2, integer: true},
-  int3: {type: 'int', size: 3, integer: true},
-  int4: {type: 'int', size: 4, integer: true}
-};
-
-/**
- * Convert from WebGPU attribute format strings to accessor {type, size, normalized, integer}
- * @param {*} format
- *
-export function mapWebGPUFormatToAccessor(format) {
-  const accessorDefinition = FORMAT_TO_ACCESSOR[format];
-  assert(accessorDefinition, 'invalid attribute format');
-  return Object.freeze(accessorDefinition);
-}
-
-/**
- * Convert from accessor {type, size, normalized, integer} to WebGPU attribute format strings
- * @param {*} format
- *
-export function mapAccessorToWebGPUFormat(accessor) {
-  const {type = GL.FLOAT, size = 1, normalized = false, integer = false} = accessor;
-  assert(size >=1 && size <=4);
-  // `norm` suffix (uchar4norm)
-  const norm = normalized ? 'norm' : '';
-  // size 1 is ommitted in format names (float vs float2)
-  const count = size === 1 ? '' : size;
-  switch (type) {
-    case GL.UNSIGNED_BYTE:
-      switch (size) {
-        case 2:
-        case 4:
-          return `uchar${count}${norm}`;
-      }
-    case GL.BYTE:
-      switch (size) {
-        case 2:
-        case 4:
-          return `char${count}${norm}`;
-      }
-    case GL.UNSIGNED_SHORT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `ushort${count}${norm}`;
-      }
-    case GL.SHORT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `short${count}${norm}`;
-      }
-    case GL.HALF_FLOAT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `half${count}`;
-      }
-    case GL.FLOAT:
-      return `float${count}`;
-    case GL.UNSIGNED_INT:
-      return `uint${count}`;
-    case GL.INT:
-      return `int${count}`;
-  }
-  throw new Error('illegal accessor');
-}
-*/
-//# sourceMappingURL=accessor-to-format.js.map

package/dist/adapter/helpers/accessor-to-format.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accessor-to-format.js","sourceRoot":"","sources":["../../../src/adapter/helpers/accessor-to-format.ts"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmGE"}

package/src/adapter/helpers/accessor-to-format.ts

@@ -1,104 +0,0 @@
-// luma.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-/*
-import {assert} from '@luma.gl/core';
-
-type Accessor = Record<string, any>;
-
-const FORMAT_TO_ACCESSOR: Record<GPUVertexFormat, Accessor> = {
-  uchar2: {type: 'uchar', size: 2},
-  uchar4: {type: 'uchar', size: 4},
-  char2: {type: 'char', size: 2},
-  char4: {type: 'char', size: 4},
-  uchar2norm: {type: 'uchar', size: 2, normalized: true},
-  uchar4norm: {type: 'uchar', size: 4, normalized: true},
-  char2norm: {type: 'char', size: 2, normalized: true},
-  char4norm: {type: 'char', size: 4, normalized: true},
-  ushort2: {type: 'ushort', size: 2},
-  ushort4: {type: 'ushort', size: 4},
-  short2: {type: 'short', size: 2},
-  short4: {type: 'short', size: 4},
-  ushort2norm: {type: 'ushort', size: 2, normalized: true},
-  ushort4norm: {type: 'ushort', size: 4, normalized: true},
-  short2norm: {type: 'short', size: 1, normalized: true},
-  short4norm: {type: 'short', size: 1, normalized: true},
-  half2: {type: 'half', size: 2},
-  half4: {type: 'half', size: 4},
-  float: {type: 'float', size: 1},
-  float2: {type: 'float', size: 2},
-  float3: {type: 'float', size: 3},
-  float4: {type: 'float', size: 4},
-  uint: {type: 'uint', size: 1, integer: true},
-  uint2: {type: 'uint', size: 2, integer: true},
-  uint3: {type: 'uint', size: 3, integer: true},
-  uint4: {type: 'uint', size: 4, integer: true},
-  int: {type: 'int', size: 1, integer: true},
-  int2: {type: 'int', size: 2, integer: true},
-  int3: {type: 'int', size: 3, integer: true},
-  int4: {type: 'int', size: 4, integer: true}
-};
-
-/**
- * Convert from WebGPU attribute format strings to accessor {type, size, normalized, integer}
- * @param {*} format
- *
-export function mapWebGPUFormatToAccessor(format) {
-  const accessorDefinition = FORMAT_TO_ACCESSOR[format];
-  assert(accessorDefinition, 'invalid attribute format');
-  return Object.freeze(accessorDefinition);
-}
-
-/**
- * Convert from accessor {type, size, normalized, integer} to WebGPU attribute format strings
- * @param {*} format
- *
-export function mapAccessorToWebGPUFormat(accessor) {
-  const {type = GL.FLOAT, size = 1, normalized = false, integer = false} = accessor;
-  assert(size >=1 && size <=4);
-  // `norm` suffix (uchar4norm)
-  const norm = normalized ? 'norm' : '';
-  // size 1 is ommitted in format names (float vs float2)
-  const count = size === 1 ? '' : size;
-  switch (type) {
-    case GL.UNSIGNED_BYTE:
-      switch (size) {
-        case 2:
-        case 4:
-          return `uchar${count}${norm}`;
-      }
-    case GL.BYTE:
-      switch (size) {
-        case 2:
-        case 4:
-          return `char${count}${norm}`;
-      }
-    case GL.UNSIGNED_SHORT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `ushort${count}${norm}`;
-      }
-    case GL.SHORT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `short${count}${norm}`;
-      }
-    case GL.HALF_FLOAT:
-      switch (size) {
-        case 2:
-        case 4:
-          return `half${count}`;
-      }
-    case GL.FLOAT:
-      return `float${count}`;
-    case GL.UNSIGNED_INT:
-      return `uint${count}`;
-    case GL.INT:
-      return `int${count}`;
-  }
-  throw new Error('illegal accessor');
-}
-*/