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

package/dist/index.d.ts

@@ -5,4 +5,6 @@ export { WebGPUBuffer } from "./adapter/resources/webgpu-buffer.js";
 export { WebGPUTexture } from "./adapter/resources/webgpu-texture.js";
 export { WebGPUSampler } from "./adapter/resources/webgpu-sampler.js";
 export { WebGPUShader } from "./adapter/resources/webgpu-shader.js";
+export { WebGPUFence } from "./adapter/resources/webgpu-fence.js";
+export { getShaderLayoutFromWGSL } from "./wgsl/get-shader-layout-wgsl.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EAAC,aAAa,EAAC,oCAAiC;AAC5D,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAGvD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EAAC,aAAa,EAAC,oCAAiC;AAC5D,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAGvD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAE7D,OAAO,EAAC,uBAAuB,EAAC,yCAAsC"}

package/dist/index.js

@@ -8,4 +8,6 @@ export { WebGPUBuffer } from "./adapter/resources/webgpu-buffer.js";
 export { WebGPUTexture } from "./adapter/resources/webgpu-texture.js";
 export { WebGPUSampler } from "./adapter/resources/webgpu-sampler.js";
 export { WebGPUShader } from "./adapter/resources/webgpu-shader.js";
+export { WebGPUFence } from "./adapter/resources/webgpu-fence.js";
+export { getShaderLayoutFromWGSL } from "./wgsl/get-shader-layout-wgsl.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAEvD,mDAAmD;AACnD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAEvD,mDAAmD;AACnD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAE7D,OAAO,EAAC,uBAAuB,EAAC,yCAAsC"}

package/dist/wgsl/get-shader-layout-wgsl.d.ts

@@ -0,0 +1,8 @@
+import { ShaderLayout } from '@luma.gl/core';
+/**
+ * Parse a ShaderLayout from WGSL shader source code.
+ * @param source WGSL source code (can contain both @vertex and @fragment entry points)
+ * @returns
+ */
+export declare function getShaderLayoutFromWGSL(source: string): ShaderLayout;
+//# sourceMappingURL=get-shader-layout-wgsl.d.ts.map

package/dist/wgsl/get-shader-layout-wgsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-shader-layout-wgsl.d.ts","sourceRoot":"","sources":["../../src/wgsl/get-shader-layout-wgsl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAsB,YAAY,EAA4B,MAAM,eAAe,CAAC;AAG3F;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAuEpE"}

package/dist/wgsl/get-shader-layout-wgsl.js

@@ -0,0 +1,136 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log } from '@luma.gl/core';
+import { 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) {
+    const shaderLayout = { attributes: [], bindings: [] };
+    let parsedWGSL;
+    try {
+        parsedWGSL = parseWGSL(source);
+    }
+    catch (error) {
+        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 = {
+            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) {
+    // @ts-expect-error WgslReflect type checks needed
+    return type?.format ? `${type.name}<${type.format.name}>` : type.name;
+}
+function parseWGSL(source) {
+    try {
+        return new WgslReflect(source);
+    }
+    catch (error) {
+        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 for a texture
+opts // optional: if you know the runtime format
+) {
+    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;
+    // viewDimension
+    const viewDimension = 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;
+    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 };
+}
+//# sourceMappingURL=get-shader-layout-wgsl.js.map

package/dist/wgsl/get-shader-layout-wgsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-shader-layout-wgsl.js","sourceRoot":"","sources":["../../src/wgsl/get-shader-layout-wgsl.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgpu",
-  "version": "9.2.6",
+  "version": "9.3.0-alpha.4",
   "description": "WebGPU adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -37,11 +37,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "~9.2.0"
+    "@luma.gl/core": "9.2.0-alpha.6"
   },
   "dependencies": {
-    "@probe.gl/env": "^4.0.8",
-    "@webgpu/types": "^0.1.34"
+    "@probe.gl/env": "^4.1.1",
+    "@webgpu/types": "^0.1.34",
+    "wgsl_reflect": "^1.2.1"
   },
-  "gitHead": "9c7a3adc09c7b23800df3f916762445ebc1fa924"
+  "gitHead": "7486e7b0377fb6ab961b4499828681bede60f3b1"
 }

package/src/adapter/helpers/get-bind-group.ts

@@ -3,10 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 import type {ComputeShaderLayout, BindingDeclaration, Binding} from '@luma.gl/core';
-import {Buffer, Sampler, Texture, log} from '@luma.gl/core';
+import {Buffer, Sampler, Texture, TextureView, log} from '@luma.gl/core';
 import type {WebGPUBuffer} from '../resources/webgpu-buffer';
 import type {WebGPUSampler} from '../resources/webgpu-sampler';
 import type {WebGPUTexture} from '../resources/webgpu-texture';
+import type {WebGPUTextureView} from '../resources/webgpu-texture-view';
 
 /**
  * Create a WebGPU "bind group layout" from an array of luma.gl bindings
@@ -76,7 +77,7 @@ function getBindGroupEntries(
   for (const [bindingName, value] of Object.entries(bindings)) {
     let bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
     if (bindingLayout) {
-      const entry = getBindGroupEntry(value, bindingLayout.location);
+      const entry = getBindGroupEntry(value, bindingLayout.location, undefined, bindingName);
       if (entry) {
         entries.push(entry);
       }
@@ -88,7 +89,12 @@ function getBindGroupEntries(
         ignoreWarnings: true
       });
       if (bindingLayout) {
-        const entry = getBindGroupEntry(value, bindingLayout.location, {sampler: true});
+        const entry = getBindGroupEntry(
+          value,
+          bindingLayout.location,
+          {sampler: true},
+          bindingName
+        );
         if (entry) {
           entries.push(entry);
         }
@@ -102,7 +108,8 @@ function getBindGroupEntries(
 function getBindGroupEntry(
   binding: Binding,
   index: number,
-  options?: {sampler?: boolean}
+  options?: {sampler?: boolean},
+  bindingName: string = 'unknown'
 ): GPUBindGroupEntry | null {
   if (binding instanceof Buffer) {
     return {
@@ -118,6 +125,12 @@ function getBindGroupEntry(
       resource: (binding as WebGPUSampler).handle
     };
   }
+  if (binding instanceof TextureView) {
+    return {
+      binding: index,
+      resource: (binding as WebGPUTextureView).handle
+    };
+  }
   if (binding instanceof Texture) {
     if (options?.sampler) {
       return {
@@ -130,6 +143,6 @@ function getBindGroupEntry(
       resource: (binding as WebGPUTexture).view.handle
     };
   }
-  log.warn(`invalid binding ${name}`, binding);
+  log.warn(`invalid binding ${bindingName}`, binding);
   return null;
 }

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

@@ -5,20 +5,28 @@
 import {log, Buffer, type BufferProps, type BufferMapCallback} from '@luma.gl/core';
 import {type WebGPUDevice} from '../webgpu-device';
 
+/**
+ * WebGPU implementation of Buffer
+ * For byte alignment requirements see:
+ * @see https://www.w3.org/TR/webgpu/#dom-gpubuffer-mapasync
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/GPUBuffer/mapAsync
+ */
 export class WebGPUBuffer extends Buffer {
   readonly device: WebGPUDevice;
   readonly handle: GPUBuffer;
   readonly byteLength: number;
+  readonly paddedByteLength: number;
 
   constructor(device: WebGPUDevice, props: BufferProps) {
     super(device, props);
     this.device = device;
 
     this.byteLength = props.byteLength || props.data?.byteLength || 0;
+    this.paddedByteLength = Math.ceil(this.byteLength / 4) * 4;
     const mappedAtCreation = Boolean(this.props.onMapped || props.data);
 
     // WebGPU buffers must be aligned to 4 bytes
-    const size = Math.ceil(this.byteLength / 4) * 4;
+    const size = this.paddedByteLength;
 
     this.device.pushErrorScope('out-of-memory');
     this.device.pushErrorScope('validation');
@@ -92,10 +100,11 @@ export class WebGPUBuffer extends Buffer {
     byteOffset: number = 0,
     byteLength: number = this.byteLength - byteOffset
   ): Promise<void> {
+    const alignedByteLength = Math.ceil(byteLength / 4) * 4;
     // Unless the application created and supplied a mappable buffer, a staging buffer is needed
     const isMappable = (this.usage & Buffer.MAP_WRITE) !== 0;
     const mappableBuffer: WebGPUBuffer | null = !isMappable
-      ? this._getMappableBuffer(Buffer.MAP_WRITE | Buffer.COPY_SRC, 0, this.byteLength)
+      ? this._getMappableBuffer(Buffer.MAP_WRITE | Buffer.COPY_SRC, 0, this.paddedByteLength)
       : null;
 
     const writeBuffer = mappableBuffer || this;
@@ -105,13 +114,15 @@ export class WebGPUBuffer extends Buffer {
     this.device.pushErrorScope('validation');
     try {
       await this.device.handle.queue.onSubmittedWorkDone();
-      await writeBuffer.handle.mapAsync(GPUMapMode.WRITE, byteOffset, byteLength);
-      const arrayBuffer = writeBuffer.handle.getMappedRange(byteOffset, byteLength);
+      await writeBuffer.handle.mapAsync(GPUMapMode.WRITE, byteOffset, alignedByteLength);
+      const mappedRange = writeBuffer.handle.getMappedRange(byteOffset, alignedByteLength);
+      const arrayBuffer = mappedRange.slice(0, byteLength);
       // eslint-disable-next-line @typescript-eslint/await-thenable
       await callback(arrayBuffer, 'mapped');
+      new Uint8Array(mappedRange).set(new Uint8Array(arrayBuffer), 0);
       writeBuffer.handle.unmap();
       if (mappableBuffer) {
-        this._copyBuffer(mappableBuffer, byteOffset, byteLength);
+        this._copyBuffer(mappableBuffer, byteOffset, alignedByteLength);
       }
     } finally {
       this.device.popErrorScope((error: GPUError) => {
@@ -138,17 +149,33 @@ export class WebGPUBuffer extends Buffer {
     byteOffset = 0,
     byteLength = this.byteLength - byteOffset
   ): Promise<T> {
+    const requestedEnd = byteOffset + byteLength;
+    if (requestedEnd > this.byteLength) {
+      throw new Error('Mapping range exceeds buffer size');
+    }
+
+    let mappedByteOffset = byteOffset;
+    let mappedByteLength = byteLength;
+    let sliceByteOffset = 0;
+    let lifetime: 'mapped' | 'copied' = 'mapped';
+
+    // WebGPU mapAsync requires 8-byte offsets and 4-byte lengths.
     if (byteOffset % 8 !== 0 || byteLength % 4 !== 0) {
-      throw new Error('byteOffset must be multiple of 8 and byteLength multiple of 4');
+      mappedByteOffset = Math.floor(byteOffset / 8) * 8;
+      const alignedEnd = Math.ceil(requestedEnd / 4) * 4;
+      mappedByteLength = alignedEnd - mappedByteOffset;
+      sliceByteOffset = byteOffset - mappedByteOffset;
+      lifetime = 'copied';
     }
-    if (byteOffset + byteLength > this.handle.size) {
+
+    if (mappedByteOffset + mappedByteLength > this.paddedByteLength) {
       throw new Error('Mapping range exceeds buffer size');
     }
 
     // Unless the application created and supplied a mappable buffer, a staging buffer is needed
     const isMappable = (this.usage & Buffer.MAP_READ) !== 0;
     const mappableBuffer: WebGPUBuffer | null = !isMappable
-      ? this._getMappableBuffer(Buffer.MAP_READ | Buffer.COPY_DST, 0, this.byteLength)
+      ? this._getMappableBuffer(Buffer.MAP_READ | Buffer.COPY_DST, 0, this.paddedByteLength)
       : null;
 
     const readBuffer = mappableBuffer || this;
@@ -158,12 +185,16 @@ export class WebGPUBuffer extends Buffer {
     try {
       await this.device.handle.queue.onSubmittedWorkDone();
       if (mappableBuffer) {
-        mappableBuffer._copyBuffer(this);
+        mappableBuffer._copyBuffer(this, mappedByteOffset, mappedByteLength);
       }
-      await readBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
-      const arrayBuffer = readBuffer.handle.getMappedRange(byteOffset, byteLength);
+      await readBuffer.handle.mapAsync(GPUMapMode.READ, mappedByteOffset, mappedByteLength);
+      const arrayBuffer = readBuffer.handle.getMappedRange(mappedByteOffset, mappedByteLength);
+      const mappedRange =
+        lifetime === 'mapped'
+          ? arrayBuffer
+          : arrayBuffer.slice(sliceByteOffset, sliceByteOffset + byteLength);
       // eslint-disable-next-line @typescript-eslint/await-thenable
-      const result = await callback(arrayBuffer, 'mapped');
+      const result = await callback(mappedRange, lifetime);
       readBuffer.handle.unmap();
       return result;
     } finally {

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

@@ -0,0 +1,30 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+
+/** WebGPU fence implemented by waiting for submitted work */
+export class WebGPUFence extends Fence {
+  readonly device: WebGPUDevice;
+  readonly handle: null = null;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGPUDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.signaled = device.handle.queue.onSubmittedWorkDone().then(() => {
+      this._signaled = true;
+    });
+  }
+
+  isSignaled(): boolean {
+    return this._signaled;
+  }
+
+  override destroy(): void {
+    // Nothing to release for WebGPU fence
+  }
+}

package/src/adapter/resources/webgpu-pipeline-layout.ts

@@ -47,8 +47,7 @@ export class WebGPUPipelineLayout extends PipelineLayout {
     // TODO (kaapp): This only supports the first group, but so does the rest of the code
     const bindGroupEntries: GPUBindGroupLayoutEntry[] = [];
 
-    for (let i = 0; i < this.props.shaderLayout.bindings.length; i++) {
-      const binding = this.props.shaderLayout.bindings[i];
+    for (const binding of this.props.shaderLayout.bindings) {
       const bindingTypeInfo: Omit<GPUBindGroupLayoutEntry, 'binding' | 'visibility'> = {};
 
       switch (binding.type) {