feat: Create explicit pipeline layouts from shaderLayout (#2355)

Author: Kaapp

modules/core/src/adapter/resources/pipeline-layout.ts

@@ -0,0 +1,26 @@
+import {Device} from '../device';
+import {ShaderLayout} from '../types/shader-layout';
+import {Resource, ResourceProps} from './resource';
+
+export type PipelineLayoutProps = ResourceProps & {
+  shaderLayout: ShaderLayout;
+};
+
+/** Immutable PipelineLayout object */
+export abstract class PipelineLayout extends Resource<PipelineLayoutProps> {
+  get [Symbol.toStringTag](): string {
+    return 'PipelineLayout';
+  }
+
+  constructor(device: Device, props: PipelineLayoutProps) {
+    super(device, props, PipelineLayout.defaultProps);
+  }
+
+  static override defaultProps: Required<PipelineLayoutProps> = {
+    ...Resource.defaultProps,
+    shaderLayout: {
+      attributes: [],
+      bindings: []
+    }
+  };
+}

modules/core/src/adapter/types/shader-layout.ts

@@ -110,7 +110,7 @@ export type StorageBufferBindingLayout = {
   minBindingSize?: number;
 };
 
-type TextureBindingLayout = {
+export type TextureBindingLayout = {
   type: 'texture';
   /** Name of the binding. Used by luma to map bindings by name */
   name: string;
@@ -125,7 +125,7 @@ type TextureBindingLayout = {
   multisampled?: boolean;
 };
 
-type SamplerBindingLayout = {
+export type SamplerBindingLayout = {
   type: 'sampler';
   /** Name of the binding. Used by luma to map bindings by name */
   name: string;
@@ -138,7 +138,7 @@ type SamplerBindingLayout = {
   samplerType?: 'filtering' | 'non-filtering' | 'comparison'; // default: filtering
 };
 
-type StorageTextureBindingLayout = {
+export type StorageTextureBindingLayout = {
   type: 'storage';
   /** Name of the binding. Used by luma to map bindings by name */
   name: string;

modules/core/src/index.ts

@@ -72,6 +72,9 @@ export {TransformFeedback} from './adapter/resources/transform-feedback';
 export type {QuerySetProps} from './adapter/resources/query-set';
 export {QuerySet} from './adapter/resources/query-set';
 
+export type {PipelineLayoutProps} from './adapter/resources/pipeline-layout';
+export {PipelineLayout} from './adapter/resources/pipeline-layout';
+
 // PORTABLE API - UNIFORM BUFFERS
 export {UniformBufferLayout} from './portable/uniform-buffer-layout';
 export {UniformBlock} from './portable/uniform-block';
@@ -122,7 +125,12 @@ export type {
   ComputeShaderLayout,
   AttributeDeclaration,
   BindingDeclaration,
-  Binding
+  Binding,
+  UniformBufferBindingLayout,
+  StorageBufferBindingLayout,
+  TextureBindingLayout,
+  SamplerBindingLayout,
+  StorageTextureBindingLayout
 } from './adapter/types/shader-layout';
 export type {BufferLayout, BufferAttributeLayout} from './adapter/types/buffer-layout';
 export type {

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

@@ -0,0 +1,125 @@
+import {
+  PipelineLayout,
+  PipelineLayoutProps,
+  StorageBufferBindingLayout,
+  StorageTextureBindingLayout
+} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+
+const VISIBILITY_ALL = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE;
+
+export class WebGPUPipelineLayout extends PipelineLayout {
+  device: WebGPUDevice;
+  handle: GPUPipelineLayout;
+
+  constructor(device: WebGPUDevice, props: PipelineLayoutProps) {
+    super(device, props);
+
+    this.device = device;
+
+    const bindGroupEntries = this.mapShaderLayoutToBindGroupEntries();
+
+    this.handle = this.device.handle.createPipelineLayout({
+      label: props?.id ?? 'unnamed-pipeline-layout',
+      bindGroupLayouts: [
+        // TODO (kaapp): We can cache these to re-use them across
+        // layers, particularly if using a separate group for injected
+        // bindings (e.g. project/lighting)
+        this.device.handle.createBindGroupLayout({
+          label: 'bind-group-layout',
+          entries: bindGroupEntries
+        })
+      ]
+    });
+  }
+
+  override destroy(): void {
+    // WebGPUPipelineLayout has no destroy method.
+    // @ts-expect-error
+    this.handle = null;
+  }
+
+  protected mapShaderLayoutToBindGroupEntries(): GPUBindGroupLayoutEntry[] {
+    // Set up the pipeline layout
+    // 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];
+      const bindingTypeInfo: Omit<GPUBindGroupLayoutEntry, 'binding' | 'visibility'> = {};
+
+      switch (binding.type) {
+        case 'uniform': {
+          bindingTypeInfo.buffer = {
+            type: 'uniform',
+            hasDynamicOffset: binding.hasDynamicOffset,
+            minBindingSize: binding.minBindingSize
+          };
+          break;
+        }
+
+        case 'read-only-storage': {
+          bindingTypeInfo.buffer = {
+            type: 'read-only-storage',
+            hasDynamicOffset: binding.hasDynamicOffset,
+            minBindingSize: binding.minBindingSize
+          };
+          break;
+        }
+
+        case 'sampler': {
+          bindingTypeInfo.sampler = {
+            type: binding.samplerType
+          };
+          break;
+        }
+
+        case 'storage': {
+          if (isStorageTextureBindingLayout(binding)) {
+            bindingTypeInfo.storageTexture = {
+              // TODO (kaapp): Not all formats in the binding layout are supported
+              // by WebGPU, but at least it will provide a clear error for now.
+              format: binding.format as GPUTextureFormat,
+              access: binding.access,
+              viewDimension: binding.viewDimension
+            };
+          } else {
+            bindingTypeInfo.buffer = {
+              type: 'storage',
+              hasDynamicOffset: binding.hasDynamicOffset,
+              minBindingSize: binding.minBindingSize
+            };
+          }
+          break;
+        }
+
+        case 'texture': {
+          bindingTypeInfo.texture = {
+            multisampled: binding.multisampled,
+            sampleType: binding.sampleType,
+            viewDimension: binding.viewDimension
+          };
+          break;
+        }
+
+        default: {
+          console.warn('unhandled binding type when creating pipeline descriptor');
+        }
+      }
+
+      bindGroupEntries.push({
+        binding: binding.location,
+        visibility: binding.visibility || VISIBILITY_ALL,
+        ...bindingTypeInfo
+      });
+    }
+
+    return bindGroupEntries;
+  }
+}
+
+const isStorageTextureBindingLayout = (
+  maybe: StorageBufferBindingLayout | StorageTextureBindingLayout
+): maybe is StorageTextureBindingLayout => {
+  return (maybe as StorageTextureBindingLayout).format !== undefined;
+};

modules/webgpu/src/adapter/resources/webgpu-render-pipeline.ts

@@ -168,14 +168,18 @@ export class WebGPURenderPipeline extends RenderPipeline {
       ]
     };
 
+    const layout = this.device.createPipelineLayout({
+      shaderLayout: this.shaderLayout
+    });
+
     // Create a partially populated descriptor
     const descriptor: GPURenderPipelineDescriptor = {
       vertex,
       fragment,
       primitive: {
         topology: this.props.topology
       },
-      layout: 'auto'
+      layout: layout.handle
     };
 
     if (this.props.parameters.depthWriteEnabled && this.props.parameters.depthCompare) {

modules/webgpu/src/adapter/webgpu-device.ts

@@ -28,7 +28,9 @@ import type {
   TransformFeedbackProps,
   QuerySet,
   QuerySetProps,
-  DeviceProps
+  DeviceProps,
+  CommandEncoderProps,
+  PipelineLayoutProps,
 } from '@luma.gl/core';
 import {Device, DeviceFeatures} from '@luma.gl/core';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
@@ -46,6 +48,7 @@ import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
 
 import {WebGPUCanvasContext} from './webgpu-canvas-context';
 import {WebGPUQuerySet} from './resources/webgpu-query-set';
+import {WebGPUPipelineLayout} from './resources/webgpu-pipeline-layout';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
@@ -194,6 +197,10 @@ export class WebGPUDevice extends Device {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
 
+  createPipelineLayout(props: PipelineLayoutProps): WebGPUPipelineLayout {
+    return new WebGPUPipelineLayout(this, props);
+  }
+
   submit(): void {
     const commandBuffer = this.commandEncoder?.finish();
     if (commandBuffer) {
@@ -205,7 +212,6 @@ export class WebGPUDevice extends Device {
         }
       });
     }
-    this.commandEncoder = null;
   }
 
   // PRIVATE METHODS