Skip to content

Add labels to deferred renderer for better debugging #538

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 17, 2025
Merged

Add labels to deferred renderer for better debugging #538

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions sample/deferredRendering/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ context.configure({
// Create the model vertex buffer.
const kVertexStride = 8;
const vertexBuffer = device.createBuffer({
label: 'model vertex buffer',
// position: vec3, normal: vec3, uv: vec2
size: mesh.positions.length * kVertexStride * Float32Array.BYTES_PER_ELEMENT,
usage: GPUBufferUsage.VERTEX,
Expand All @@ -58,6 +59,7 @@ const vertexBuffer = device.createBuffer({
// Create the model index buffer.
const indexCount = mesh.triangles.length * 3;
const indexBuffer = device.createBuffer({
label: 'model index buffer',
size: indexCount * Uint16Array.BYTES_PER_ELEMENT,
usage: GPUBufferUsage.INDEX,
mappedAtCreation: true,
Expand Down Expand Up @@ -88,9 +90,9 @@ const depthTexture = device.createTexture({
});

const gBufferTextureViews = [
gBufferTexture2DFloat16.createView(),
gBufferTextureAlbedo.createView(),
depthTexture.createView(),
gBufferTexture2DFloat16.createView({ label: 'gbuffer texture normal' }),
gBufferTextureAlbedo.createView({ label: 'gbuffer texture albedo' }),
depthTexture.createView({ label: 'depth normal' }),
];

const vertexBuffers: Iterable<GPUVertexBufferLayout> = [
Expand Down Expand Up @@ -125,6 +127,7 @@ const primitive: GPUPrimitiveState = {
};

const writeGBuffersPipeline = device.createRenderPipeline({
label: 'write gbuffers',
layout: 'auto',
vertex: {
module: device.createShaderModule({
Expand Down Expand Up @@ -204,6 +207,7 @@ const lightsBufferBindGroupLayout = device.createBindGroupLayout({
});

const gBuffersDebugViewPipeline = device.createRenderPipeline({
label: 'debug view',
layout: device.createPipelineLayout({
bindGroupLayouts: [gBufferTexturesBindGroupLayout],
}),
Expand All @@ -230,6 +234,7 @@ const gBuffersDebugViewPipeline = device.createRenderPipeline({
});

const deferredRenderPipeline = device.createRenderPipeline({
label: 'deferred final',
layout: device.createPipelineLayout({
bindGroupLayouts: [
gBufferTexturesBindGroupLayout,
Expand Down Expand Up @@ -272,7 +277,7 @@ const writeGBufferPassDescriptor: GPURenderPassDescriptor = {
},
],
depthStencilAttachment: {
view: depthTexture.createView(),
view: gBufferTextureViews[2],

depthClearValue: 1.0,
depthLoadOp: 'clear',
Expand All @@ -299,6 +304,7 @@ const settings = {
};
const configUniformBuffer = (() => {
const buffer = device.createBuffer({
label: 'config uniforms',
size: Uint32Array.BYTES_PER_ELEMENT,
mappedAtCreation: true,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
Expand All @@ -322,11 +328,13 @@ gui
});

const modelUniformBuffer = device.createBuffer({
label: 'model matrix uniform',
size: 4 * 16 * 2, // two 4x4 matrix
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});

const cameraUniformBuffer = device.createBuffer({
label: 'camera matrix uniform',
size: 4 * 16 * 2, // two 4x4 matrix
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
Expand Down Expand Up @@ -374,6 +382,7 @@ const lightDataStride = 8;
const bufferSizeInByte =
Float32Array.BYTES_PER_ELEMENT * lightDataStride * kMaxNumLights;
const lightsBuffer = device.createBuffer({
label: 'lights storage',
size: bufferSizeInByte,
usage: GPUBufferUsage.STORAGE,
mappedAtCreation: true,
Expand Down Expand Up @@ -404,6 +413,7 @@ for (let i = 0; i < kMaxNumLights; i++) {
lightsBuffer.unmap();

const lightExtentBuffer = device.createBuffer({
label: 'light extent uniform',
size: 4 * 8,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
Expand All @@ -419,6 +429,7 @@ device.queue.writeBuffer(
);

const lightUpdateComputePipeline = device.createComputePipeline({
label: 'light update',
layout: 'auto',
compute: {
module: device.createShaderModule({
Expand Down