From 3e85a6385a5b458307c8c4dfaccb67cc28b58db3 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 16 Oct 2025 14:19:26 +0100 Subject: [PATCH 1/2] Add details and example for null bindGroupLayouts entries --- .../gpudevice/createpipelinelayout/index.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/gpudevice/createpipelinelayout/index.md b/files/en-us/web/api/gpudevice/createpipelinelayout/index.md index 2c01a59dcca0546..a6cd1db338c8b44 100644 --- a/files/en-us/web/api/gpudevice/createpipelinelayout/index.md +++ b/files/en-us/web/api/gpudevice/createpipelinelayout/index.md @@ -22,7 +22,9 @@ createPipelineLayout(descriptor) - `descriptor` - : An object containing the following properties: - `bindGroupLayouts` - - : An array of {{domxref("GPUBindGroupLayout")}} objects (which are in turn created via calls to {{domxref("GPUDevice.createBindGroupLayout()")}}). Each one corresponds to a [`@group`](https://gpuweb.github.io/gpuweb/wgsl/#attribute-binding) attribute in the shader code contained in the {{domxref("GPUShaderModule")}} used in a related pipeline. + - : An array of values representing the bind group layouts for a pipeline. Each value can be: + - A {{domxref("GPUBindGroupLayout")}} object, created via a call to {{domxref("GPUDevice.createBindGroupLayout()")}}. Each object corresponds to a [`@group`](https://gpuweb.github.io/gpuweb/wgsl/#attribute-binding) attribute in the shader code contained in the {{domxref("GPUShaderModule")}} used in a related pipeline. + - `null`, which represents an empty bind group layout. `null` values are ignored when creating a pipeline layout. - `label` {{optional_inline}} - : A string providing a label that can be used to identify the object, for example in {{domxref("GPUError")}} messages or console warnings. @@ -79,6 +81,21 @@ const pipelineLayout = device.createPipelineLayout({ // … ``` +### Specifying an empty bind group layout + +In this snippet, we create three bind group layouts, with bind group layout 1 representing fragment data and bind group layout 2 representing vertex data. If we want to create a pipeline that uses only bind group layouts 0 and 2, we can pass `null` for bind group layout 1 and then render without a fragment shader. + +```js +const bgl0 = myDevice.createBindGroupLayout({ entries: myGlobalEntries }); +const bgl1 = myDevice.createBindGroupLayout({ entries: myFragmentEntries }); +const bgl2 = myDevice.createBindGroupLayout({ entries: myVertexEntries }); + +// pipeline layout can be used to render without a fragment shader +const myPipelineLayout = myDevice.createPipelineLayout({ + bindGroupLayouts: [bgl0, null, bgl2], +}); +``` + ## Specifications {{Specifications}} From 8c5975db7d90ec1b33ccbce2563a451dd88cd486 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 17 Oct 2025 14:22:37 +0100 Subject: [PATCH 2/2] Update object names to match first example --- .../en-us/web/api/gpudevice/createpipelinelayout/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/gpudevice/createpipelinelayout/index.md b/files/en-us/web/api/gpudevice/createpipelinelayout/index.md index a6cd1db338c8b44..1aa2943940bedbd 100644 --- a/files/en-us/web/api/gpudevice/createpipelinelayout/index.md +++ b/files/en-us/web/api/gpudevice/createpipelinelayout/index.md @@ -86,12 +86,12 @@ const pipelineLayout = device.createPipelineLayout({ In this snippet, we create three bind group layouts, with bind group layout 1 representing fragment data and bind group layout 2 representing vertex data. If we want to create a pipeline that uses only bind group layouts 0 and 2, we can pass `null` for bind group layout 1 and then render without a fragment shader. ```js -const bgl0 = myDevice.createBindGroupLayout({ entries: myGlobalEntries }); -const bgl1 = myDevice.createBindGroupLayout({ entries: myFragmentEntries }); -const bgl2 = myDevice.createBindGroupLayout({ entries: myVertexEntries }); +const bgl0 = device.createBindGroupLayout({ entries: myGlobalEntries }); +const bgl1 = device.createBindGroupLayout({ entries: myFragmentEntries }); +const bgl2 = device.createBindGroupLayout({ entries: myVertexEntries }); // pipeline layout can be used to render without a fragment shader -const myPipelineLayout = myDevice.createPipelineLayout({ +const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bgl0, null, bgl2], }); ```