When multiple pipelines share resources, an explicit GPUBindGroupLayout and GPUPipelineLayout must replace the auto-generated layout

Using layout: 'auto' auto-generates a bind group layout private to that pipeline, which cannot be shared with a compute pipeline. When a render pipeline and a compute pipeline must share bind groups, create a GPUBindGroupLayout explicitly via device.createBindGroupLayout({ entries }), specifying each binding’s index, visibility (shader stages), and resource type. Then create a GPUPipelineLayout from it, and pass both to the respective pipeline creation calls. This allows one bind group to serve both pipelines with different visibility scopes per binding.

Examples

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE, buffer: {} },
    { binding: 1, visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' } },
    { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } },
  ]
});
const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });

Assessment

Why does layout: 'auto' fail when you need one bind group used by both a render and a compute pipeline? What three objects replace it?