Add labels to deferred renderer for better debugging (#538)

* Add labels to objects for better debugging in xcode capturing
* Remove a seemingly redundant `depthTexture.createView()`

Author: shrekshao

sample/deferredRendering/main.ts

@@ -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,
@@ -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,
@@ -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> = [
@@ -125,6 +127,7 @@ const primitive: GPUPrimitiveState = {
 };
 
 const writeGBuffersPipeline = device.createRenderPipeline({
+  label: 'write gbuffers',
   layout: 'auto',
   vertex: {
     module: device.createShaderModule({
@@ -204,6 +207,7 @@ const lightsBufferBindGroupLayout = device.createBindGroupLayout({
 });
 
 const gBuffersDebugViewPipeline = device.createRenderPipeline({
+  label: 'debug view',
   layout: device.createPipelineLayout({
     bindGroupLayouts: [gBufferTexturesBindGroupLayout],
   }),
@@ -230,6 +234,7 @@ const gBuffersDebugViewPipeline = device.createRenderPipeline({
 });
 
 const deferredRenderPipeline = device.createRenderPipeline({
+  label: 'deferred final',
   layout: device.createPipelineLayout({
     bindGroupLayouts: [
       gBufferTexturesBindGroupLayout,
@@ -272,7 +277,7 @@ const writeGBufferPassDescriptor: GPURenderPassDescriptor = {
     },
   ],
   depthStencilAttachment: {
-    view: depthTexture.createView(),
+    view: gBufferTextureViews[2],
 
     depthClearValue: 1.0,
     depthLoadOp: 'clear',
@@ -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,
@@ -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,
 });
@@ -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,
@@ -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,
 });
@@ -419,6 +429,7 @@ device.queue.writeBuffer(
 );
 
 const lightUpdateComputePipeline = device.createComputePipeline({
+  label: 'light update',
   layout: 'auto',
   compute: {
     module: device.createShaderModule({