@luma.gl/webgpu 9.2.5 → 9.3.0-alpha.10

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/index.ts

@@ -12,3 +12,6 @@ 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';
+export {WebGPUFence} from './adapter/resources/webgpu-fence';
+
+export {getShaderLayoutFromWGSL} from './wgsl/get-shader-layout-wgsl';

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

@@ -0,0 +1,165 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {AttributeShaderType, ShaderLayout, TextureBindingLayout, log} from '@luma.gl/core';
+import {TypeInfo, VariableInfo, WgslReflect, ResourceType} from 'wgsl_reflect';
+
+/**
+ * Parse a ShaderLayout from WGSL shader source code.
+ * @param source WGSL source code (can contain both @vertex and @fragment entry points)
+ * @returns
+ */
+export function getShaderLayoutFromWGSL(source: string): ShaderLayout {
+  const shaderLayout: ShaderLayout = {attributes: [], bindings: []};
+
+  let parsedWGSL: WgslReflect;
+  try {
+    parsedWGSL = parseWGSL(source);
+  } catch (error: any) {
+    log.error(error.message)();
+    return shaderLayout;
+  }
+
+  for (const uniform of parsedWGSL.uniforms) {
+    const members = [];
+    // @ts-expect-error
+    for (const attribute of uniform.type?.members || []) {
+      members.push({
+        name: attribute.name,
+        type: getType(attribute.type)
+      });
+    }
+
+    shaderLayout.bindings.push({
+      type: 'uniform',
+      name: uniform.name,
+      group: uniform.group,
+      location: uniform.binding,
+      // @ts-expect-error TODO - unused for now but needs fixing
+      members
+    });
+  }
+
+  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',
+      name: texture.name,
+      group: texture.group,
+      location: texture.binding,
+      ...getTextureBindingFromReflect(texture)
+    };
+
+    shaderLayout.bindings.push(bindingDeclaration);
+  }
+
+  for (const sampler of parsedWGSL.samplers) {
+    shaderLayout.bindings.push({
+      type: 'sampler',
+      name: sampler.name,
+      group: sampler.group,
+      location: sampler.binding
+    });
+  }
+
+  const vertex = parsedWGSL.entry.vertex[0]; // "main"
+
+  // Vertex shader inputs
+  const attributeCount = vertex?.inputs.length || 0; // inputs to "main"
+  for (let i = 0; i < attributeCount; i++) {
+    const wgslAttribute = vertex.inputs[i];
+
+    // locationType can be "builtin"
+    if (wgslAttribute.locationType === 'location') {
+      const type = getType(wgslAttribute.type);
+
+      shaderLayout.attributes.push({
+        name: wgslAttribute.name,
+        location: Number(wgslAttribute.location),
+        type
+      });
+    }
+  }
+  return shaderLayout;
+}
+
+/** Get a valid shader attribute type string from a wgsl-reflect type */
+function getType(type: TypeInfo | null): AttributeShaderType {
+  // @ts-expect-error WgslReflect type checks needed
+  return type?.format ? `${type.name}<${type.format.name}>` : type.name;
+}
+
+function parseWGSL(source: string): WgslReflect {
+  try {
+    return new WgslReflect(source);
+  } catch (error: any) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    let message = 'WGSL parse error';
+    if (typeof error === 'object' && error?.message) {
+      message += `: ${error.message} `;
+    }
+    if (typeof error === 'object' && error?.token) {
+      message += error.token.line || '';
+    }
+    throw new Error(message, {cause: error});
+  }
+}
+
+function getTextureBindingFromReflect(
+  v: VariableInfo, // VariableInfo for a texture
+  opts?: {format?: GPUTextureFormat} // optional: if you know the runtime format
+): {
+  viewDimension: GPUTextureViewDimension;
+  /** @note sampleType float vs unfilterable-float cannot be determined without checking texture format and features */
+  sampleType: GPUTextureSampleType;
+  multisampled: boolean;
+} {
+  if (v.resourceType !== ResourceType.Texture) {
+    throw new Error('Not a texture binding');
+  }
+
+  const typeName = v.type.name; // e.g. "texture_2d", "texture_cube_array", "texture_multisampled_2d"
+  // @ts-expect-error v.type.format is not always defined
+  const component = v.type.format?.name as 'f32' | 'i32' | 'u32' | undefined;
+
+  // viewDimension
+  const viewDimension: GPUTextureViewDimension = typeName.includes('cube_array')
+    ? 'cube-array'
+    : typeName.includes('cube')
+      ? 'cube'
+      : typeName.includes('2d_array')
+        ? '2d-array'
+        : typeName.includes('3d')
+          ? '3d'
+          : typeName.includes('1d')
+            ? '1d'
+            : '2d';
+
+  // multisampled
+  const multisampled = typeName === 'texture_multisampled_2d';
+
+  // sampleType
+  let sampleType: GPUTextureSampleType;
+  if (typeName.startsWith('texture_depth')) {
+    sampleType = 'depth';
+  } else if (component === 'i32') {
+    sampleType = 'sint';
+  } else if (component === 'u32') {
+    sampleType = 'uint';
+  } else {
+    sampleType = 'float'; // default to float
+  }
+
+  return {viewDimension, sampleType, multisampled};
+}

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');
-}
-*/