@luma.gl/webgpu 9.2.6 → 9.3.0-alpha.2

package/src/adapter/webgpu-adapter.ts

@@ -35,62 +35,60 @@ export class WebGPUAdapter extends Adapter {
       throw new Error('WebGPU not available. Recent Chrome browsers should work.');
     }
 
-    log.groupCollapsed(1, 'WebGPUDevice created')();
-    try {
-      const adapter = await navigator.gpu.requestAdapter({
-        powerPreference: 'high-performance'
-        // forceSoftware: false
-      });
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: 'high-performance'
+      // forceSoftware: false
+    });
 
-      if (!adapter) {
-        throw new Error('Failed to request WebGPU adapter');
-      }
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
 
-      //  Note: adapter.requestAdapterInfo() has been replaced with adapter.info. Fall back in case adapter.info is not available
-      const adapterInfo =
-        adapter.info ||
-        // @ts-ignore
-        (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;
-          }
+    //  Note: adapter.requestAdapterInfo() has been replaced with adapter.info. Fall back in case adapter.info is not available
+    const adapterInfo =
+      adapter.info ||
+      // @ts-ignore
+      (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
-      });
+    const gpuDevice = await adapter.requestDevice({
+      requiredFeatures,
+      requiredLimits
+    });
 
-      log.probe(1, 'GPUDevice available')();
+    // log.probe(1, 'GPUDevice available')();
 
-      const {WebGPUDevice} = await import('./webgpu-device');
+    const {WebGPUDevice} = await import('./webgpu-device');
 
+    log.groupCollapsed(1, 'WebGPUDevice created')();
+    try {
       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)();
-
       return device;
     } finally {
       log.groupEnd(1)();

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

@@ -38,7 +38,7 @@ export class WebGPUCanvasContext extends CanvasContext {
 
     // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this._updateDevice();
+    this._configureDevice();
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
@@ -47,14 +47,34 @@ export class WebGPUCanvasContext extends CanvasContext {
     super.destroy();
   }
 
+  // IMPLEMENTATION OF ABSTRACT METHODS
+
+  /** @see https://www.w3.org/TR/webgpu/#canvas-configuration */
+  _configureDevice(): void {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
+
+    // Reconfigure the canvas size.
+    this.handle.configure({
+      device: this.device.handle,
+      format: this.device.preferredColorFormat,
+      // Can be used to define e.g. -srgb views
+      // viewFormats: [...]
+      colorSpace: this.props.colorSpace,
+      alphaMode: this.props.alphaMode
+    });
+  }
+
   /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer(
+  _getCurrentFramebuffer(
     options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
       depthStencilFormat: 'depth24plus'
     }
   ): WebGPUFramebuffer {
     // Wrap the current canvas context texture in a luma.gl texture
-    const currentColorAttachment = this.getCurrentTexture();
+    const currentColorAttachment = this._getCurrentTexture();
     // TODO - temporary debug code
     if (
       currentColorAttachment.width !== this.drawingBufferWidth ||
@@ -80,28 +100,10 @@ export class WebGPUCanvasContext extends CanvasContext {
     });
   }
 
-  // IMPLEMENTATION OF ABSTRACT METHODS
-
-  _updateDevice(): void {
-    if (this.depthStencilAttachment) {
-      this.depthStencilAttachment.destroy();
-      this.depthStencilAttachment = null;
-    }
-
-    // Reconfigure the canvas size.
-    // https://www.w3.org/TR/webgpu/#canvas-configuration
-    this.handle.configure({
-      device: this.device.handle,
-      format: this.device.preferredColorFormat,
-      // Can be used to define e.g. -srgb views
-      // viewFormats: [...]
-      colorSpace: this.props.colorSpace,
-      alphaMode: this.props.alphaMode
-    });
-  }
+  // PRIMARY METHODS
 
   /** Wrap the current canvas context texture in a luma.gl texture */
-  getCurrentTexture(): WebGPUTexture {
+  _getCurrentTexture(): WebGPUTexture {
     const handle = this.handle.getCurrentTexture();
     return this.device.createTexture({
       id: `${this.id}#color-texture`,

package/src/adapter/webgpu-device.ts

@@ -45,6 +45,9 @@ import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
 import {WebGPUCommandBuffer} from './resources/webgpu-command-buffer';
 import {WebGPUQuerySet} from './resources/webgpu-query-set';
 import {WebGPUPipelineLayout} from './resources/webgpu-pipeline-layout';
+import {WebGPUFence} from './resources/webgpu-fence';
+
+import {getShaderLayoutFromWGSL} from '../wgsl/get-shader-layout-wgsl';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
@@ -136,15 +139,15 @@ export class WebGPUDevice extends Device {
     return this._isLost;
   }
 
+  getShaderLayout(source: string) {
+    return getShaderLayoutFromWGSL(source);
+  }
+
   override isVertexFormatSupported(format: VertexFormat): boolean {
     const info = this.getVertexFormatInfo(format);
     return !info.webglOnly;
   }
 
-  getTextureByteAlignment(): number {
-    return 1;
-  }
-
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
     const newProps = this._normalizeBufferProps(props);
     return new WebGPUBuffer(this, newProps);
@@ -196,6 +199,10 @@ export class WebGPUDevice extends Device {
     return new WebGPUQuerySet(this, props);
   }
 
+  override createFence(): WebGPUFence {
+    return new WebGPUFence(this);
+  }
+
   createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
@@ -278,6 +285,14 @@ export class WebGPUDevice extends Device {
       features.add('texture-compression-bc5-webgl');
     }
 
+    if (this.handle.features.has('chromium-experimental-norm16-texture-formats')) {
+      features.add('norm16-renderable-webgl');
+    }
+
+    if (this.handle.features.has('chromium-experimental-snorm16-texture-formats')) {
+      features.add('snorm16-renderable-webgl');
+    }
+
     const WEBGPU_ALWAYS_FEATURES: DeviceFeature[] = [
       'timer-query-webgl',
       'compilation-status-async-webgl',

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,156 @@
+// 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 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};
+}