Use texture shorthands instead of view when possible

package.json

@@ -42,7 +42,7 @@
     "@types/showdown": "^2.0.6",
     "@types/stats.js": "^0.17.4",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@webgpu/types": "^0.1.61",
+    "@webgpu/types": "^0.1.64",
     "chokidar": "^4.0.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.10.0",

sample/a-buffer/main.ts

@@ -365,10 +365,6 @@ const configure = () => {
     label: 'depthTexture',
   });
 
-  const depthTextureView = depthTexture.createView({
-    label: 'depthTextureView',
-  });
-
   // Determines how much memory is allocated to store linked-list elements
   const averageLayersPerFragment = 4;
 
@@ -466,7 +462,7 @@ const configure = () => {
       },
       {
         binding: 3,
-        resource: depthTextureView,
+        resource: depthTexture,
       },
       {
         binding: 4,
@@ -510,7 +506,7 @@ const configure = () => {
     ],
   });
 
-  opaquePassDescriptor.depthStencilAttachment.view = depthTextureView;
+  opaquePassDescriptor.depthStencilAttachment.view = depthTexture;
 
   // Rotates the camera around the origin based on time.
   function getCameraViewProjMatrix() {
@@ -552,10 +548,10 @@ const configure = () => {
     }
 
     const commandEncoder = device.createCommandEncoder();
-    const textureView = context.getCurrentTexture().createView();
+    const canvasTexture = context.getCurrentTexture();
 
     // Draw the opaque objects
-    opaquePassDescriptor.colorAttachments[0].view = textureView;
+    opaquePassDescriptor.colorAttachments[0].view = canvasTexture;
     const opaquePassEncoder =
       commandEncoder.beginRenderPass(opaquePassDescriptor);
     opaquePassEncoder.setPipeline(opaquePipeline);
@@ -577,7 +573,7 @@ const configure = () => {
         slice * sliceHeight;
 
       // Draw the translucent objects
-      translucentPassDescriptor.colorAttachments[0].view = textureView;
+      translucentPassDescriptor.colorAttachments[0].view = canvasTexture;
       const translucentPassEncoder = commandEncoder.beginRenderPass(
         translucentPassDescriptor
       );
@@ -600,7 +596,7 @@ const configure = () => {
       translucentPassEncoder.end();
 
       // Composite the opaque and translucent objects
-      compositePassDescriptor.colorAttachments[0].view = textureView;
+      compositePassDescriptor.colorAttachments[0].view = canvasTexture;
       const compositePassEncoder = commandEncoder.beginRenderPass(
         compositePassDescriptor
       );

sample/animometer/main.ts

@@ -298,9 +298,7 @@ function configure() {
     uniformTime[0] = (timestamp - startTime) / 1000;
     device.queue.writeBuffer(uniformBuffer, timeOffset, uniformTime.buffer);
 
-    renderPassDescriptor.colorAttachments[0].view = context
-      .getCurrentTexture()
-      .createView();
+    renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture();
 
     const commandEncoder = device.createCommandEncoder();
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

sample/bitonicSort/main.ts

@@ -717,9 +717,8 @@ SampleInitFactoryWebGPU(
 
       device.queue.writeBuffer(computeUniformsBuffer, 8, stepDetails);
 
-      renderPassDescriptor.colorAttachments[0].view = context
-        .getCurrentTexture()
-        .createView();
+      renderPassDescriptor.colorAttachments[0].view =
+        context.getCurrentTexture();
 
       const commandEncoder = device.createCommandEncoder();
       bitonicDisplayRenderer.startRun(commandEncoder, {

sample/blending/main.ts

@@ -193,7 +193,7 @@ const srcBindGroupUnpremultipliedAlpha = device.createBindGroup({
   layout: bindGroupLayout,
   entries: [
     { binding: 0, resource: sampler },
-    { binding: 1, resource: srcTextureUnpremultipliedAlpha.createView() },
+    { binding: 1, resource: srcTextureUnpremultipliedAlpha },
     { binding: 2, resource: { buffer: srcUniform.buffer } },
   ],
 });
@@ -202,7 +202,7 @@ const dstBindGroupUnpremultipliedAlpha = device.createBindGroup({
   layout: bindGroupLayout,
   entries: [
     { binding: 0, resource: sampler },
-    { binding: 1, resource: dstTextureUnpremultipliedAlpha.createView() },
+    { binding: 1, resource: dstTextureUnpremultipliedAlpha },
     { binding: 2, resource: { buffer: dstUniform.buffer } },
   ],
 });
@@ -211,7 +211,7 @@ const srcBindGroupPremultipliedAlpha = device.createBindGroup({
   layout: bindGroupLayout,
   entries: [
     { binding: 0, resource: sampler },
-    { binding: 1, resource: srcTexturePremultipliedAlpha.createView() },
+    { binding: 1, resource: srcTexturePremultipliedAlpha },
     { binding: 2, resource: { buffer: srcUniform.buffer } },
   ],
 });
@@ -220,7 +220,7 @@ const dstBindGroupPremultipliedAlpha = device.createBindGroup({
   layout: bindGroupLayout,
   entries: [
     { binding: 0, resource: sampler },
-    { binding: 1, resource: dstTexturePremultipliedAlpha.createView() },
+    { binding: 1, resource: dstTexturePremultipliedAlpha },
     { binding: 2, resource: { buffer: dstUniform.buffer } },
   ],
 });
@@ -518,7 +518,7 @@ function render() {
   const canvasTexture = context.getCurrentTexture();
   // Get the current texture from the canvas context and
   // set it as the texture to render to.
-  renderPassDescriptor.colorAttachments[0].view = canvasTexture.createView();
+  renderPassDescriptor.colorAttachments[0].view = canvasTexture;
 
   // Apply the clearValue, pre-multiplying or not it based on the settings.
   {

sample/cameras/main.ts

@@ -167,7 +167,7 @@ const uniformBindGroup = device.createBindGroup({
     },
     {
       binding: 2,
-      resource: cubeTexture.createView(),
+      resource: cubeTexture,
     },
   ],
 });
@@ -183,7 +183,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
     },
   ],
   depthStencilAttachment: {
-    view: depthTexture.createView(),
+    view: depthTexture,
 
     depthClearValue: 1.0,
     depthLoadOp: 'clear',
@@ -217,9 +217,7 @@ function frame() {
     modelViewProjection.byteOffset,
     modelViewProjection.byteLength
   );
-  renderPassDescriptor.colorAttachments[0].view = context
-    .getCurrentTexture()
-    .createView();
+  renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture();
 
   const commandEncoder = device.createCommandEncoder();
   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

sample/computeBoids/main.ts

@@ -259,9 +259,7 @@ let computePassDurationSum = 0;
 let renderPassDurationSum = 0;
 let timerSamples = 0;
 function frame() {
-  renderPassDescriptor.colorAttachments[0].view = context
-    .getCurrentTexture()
-    .createView();
+  renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture();
 
   const commandEncoder = device.createCommandEncoder();
   {

sample/cornell/radiosity.ts

@@ -119,7 +119,7 @@ export default class Radiosity {
         {
           // lightmap
           binding: 1,
-          resource: this.lightmap.createView(),
+          resource: this.lightmap,
         },
         {
           // radiosity_uniforms

sample/cornell/rasterizer.ts

@@ -35,14 +35,14 @@ export default class Rasterizer {
       label: 'RasterizerRenderer.renderPassDescriptor',
       colorAttachments: [
         {
-          view: framebuffer.createView(),
+          view: framebuffer,
           clearValue: [0.1, 0.2, 0.3, 1],
           loadOp: 'clear',
           storeOp: 'store',
         },
       ],
       depthStencilAttachment: {
-        view: depthTexture.createView(),
+        view: depthTexture,
         depthClearValue: 1.0,
         depthLoadOp: 'clear',
         depthStoreOp: 'store',
@@ -74,7 +74,7 @@ export default class Rasterizer {
         {
           // lightmap
           binding: 0,
-          resource: radiosity.lightmap.createView(),
+          resource: radiosity.lightmap,
         },
         {
           // sampler

sample/cornell/raytracer.ts

@@ -57,7 +57,7 @@ export default class Raytracer {
       entries: [
         {
           binding: 0,
-          resource: radiosity.lightmap.createView(),
+          resource: radiosity.lightmap,
         },
         {
           binding: 1,
@@ -71,7 +71,7 @@ export default class Raytracer {
         },
         {
           binding: 2,
-          resource: framebuffer.createView(),
+          resource: framebuffer,
         },
       ],
     });

sample/cornell/tonemapper.ts

@@ -51,12 +51,12 @@ export default class Tonemapper {
         {
           // input
           binding: 0,
-          resource: input.createView(),
+          resource: input,
         },
         {
           // output
           binding: 1,
-          resource: output.createView(),
+          resource: output,
         },
       ],
     });

sample/cubemap/main.ts

@@ -186,7 +186,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
     },
   ],
   depthStencilAttachment: {
-    view: depthTexture.createView(),
+    view: depthTexture,
 
     depthClearValue: 1.0,
     depthLoadOp: 'clear',
@@ -234,9 +234,7 @@ function frame() {
     modelViewProjectionMatrix.byteLength
   );
 
-  renderPassDescriptor.colorAttachments[0].view = context
-    .getCurrentTexture()
-    .createView();
+  renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture();
 
   const commandEncoder = device.createCommandEncoder();
   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

sample/deferredRendering/main.ts

@@ -87,10 +87,10 @@ const depthTexture = device.createTexture({
   usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
 });
 
-const gBufferTextureViews = [
-  gBufferTexture2DFloat16.createView(),
-  gBufferTextureAlbedo.createView(),
-  depthTexture.createView(),
+const gBufferTextures = [
+  gBufferTexture2DFloat16,
+  gBufferTextureAlbedo,
+  depthTexture,
 ];
 
 const vertexBuffers: Iterable<GPUVertexBufferLayout> = [
@@ -257,22 +257,22 @@ const deferredRenderPipeline = device.createRenderPipeline({
 const writeGBufferPassDescriptor: GPURenderPassDescriptor = {
   colorAttachments: [
     {
-      view: gBufferTextureViews[0],
+      view: gBufferTextures[0],
 
       clearValue: [0.0, 0.0, 1.0, 1.0],
       loadOp: 'clear',
       storeOp: 'store',
     },
     {
-      view: gBufferTextureViews[1],
+      view: gBufferTextures[1],
 
       clearValue: [0, 0, 0, 1],
       loadOp: 'clear',
       storeOp: 'store',
     },
   ],
   depthStencilAttachment: {
-    view: depthTexture.createView(),
+    view: depthTexture,
 
     depthClearValue: 1.0,
     depthLoadOp: 'clear',
@@ -354,15 +354,15 @@ const gBufferTexturesBindGroup = device.createBindGroup({
   entries: [
     {
       binding: 0,
-      resource: gBufferTextureViews[0],
+      resource: gBufferTextures[0],
     },
     {
       binding: 1,
-      resource: gBufferTextureViews[1],
+      resource: gBufferTextures[1],
     },
     {
       binding: 2,
-      resource: gBufferTextureViews[2],
+      resource: gBufferTextures[2],
     },
   ],
 });
@@ -551,9 +551,8 @@ function frame() {
       // Left: depth
       // Middle: normal
       // Right: albedo (use uv to mimic a checkerboard texture)
-      textureQuadPassDescriptor.colorAttachments[0].view = context
-        .getCurrentTexture()
-        .createView();
+      textureQuadPassDescriptor.colorAttachments[0].view =
+        context.getCurrentTexture();
       const debugViewPass = commandEncoder.beginRenderPass(
         textureQuadPassDescriptor
       );
@@ -563,9 +562,8 @@ function frame() {
       debugViewPass.end();
     } else {
       // Deferred rendering
-      textureQuadPassDescriptor.colorAttachments[0].view = context
-        .getCurrentTexture()
-        .createView();
+      textureQuadPassDescriptor.colorAttachments[0].view =
+        context.getCurrentTexture();
       const deferredRenderingPass = commandEncoder.beginRenderPass(
         textureQuadPassDescriptor
       );