Function makeBindGroupLayoutDescriptors

Gets GPUBindGroupLayoutDescriptors for the given pipeline.

Important: Assumes your pipeline is valid (it doesn't check for errors).

Note: In WebGPU some layouts must be specified manually. For example an unfiltered-float sampler can not be derived since it is unknown at compile time pipeline creation time which texture you'll use.

import {
  makeShaderDataDefinitions,
  makeBindGroupLayoutDescriptors,
} from 'webgpu-utils';

const code = `
@group(0) @binding(0) var<uniform> mat: mat4x4f;

struct MyVSOutput {
  @builtin(position) position: vec4f,
  @location(1) texcoord: vec2f,
};

@vertex
fn myVSMain(v: MyVSInput) -> MyVSOutput {
  var vsOut: MyVSOutput;
  vsOut.position = mat * v.position;
  vsOut.texcoord = v.texcoord;
  return vsOut;
}

@group(0) @binding(2) var diffuseSampler: sampler;
@group(0) @binding(3) var diffuseTexture: texture_2d<f32>;

@fragment
fn myFSMain(v: MyVSOutput) -> @location(0) vec4f {
  return textureSample(diffuseTexture, diffuseSampler, v.texcoord);
}
`;

const module = device.createShaderModule({code});
const defs = wgh.makeShaderDataDefinitions(code);

const pipelineDesc = {
  vertex: {
    module,
    entryPoint: 'myVSMain',
    buffers: bufferLayouts,
  },
  fragment: {
    module,
    entryPoint: 'myFSMain',
    targets: [
      {format: 'rgba8unorm'},
    ],
  },
};

const descriptors = wgh.makeBindGroupLayoutDescriptors(defs, pipelineDesc);
const bindGroupLayouts = descriptors.map(desc => device.createBindGroupLayout(desc));
const layout = device.createPipelineLayout({ bindGroupLayouts });
const pipeline = device.createRenderPipeline({
  layout,
  ...pipelineDesc,
});
Copy