helloTriangleMSAA: avoid creating a texture every frame

sample/helloTriangleMSAA/main.ts

@@ -55,26 +55,42 @@ const pipeline = device.createRenderPipeline({
   },
 });
 
-function frame() {
-  let usage = GPUTextureUsage.RENDER_ATTACHMENT;
-  if (settings.transientAttachment) {
-    usage |= GPUTextureUsage.TRANSIENT_ATTACHMENT;
-  }
-
-  const texture = device.createTexture({
-    size: [canvas.width, canvas.height],
-    sampleCount,
-    format: presentationFormat,
-    usage,
-  });
-  const view = texture.createView();
+const getMSAATempTextureView = (() => {
+  let texture: GPUTexture | undefined;
+  let view: GPUTextureView | undefined;
+  return () => {
+    let usage = GPUTextureUsage.RENDER_ATTACHMENT;
+    if (settings.transientAttachment) {
+      usage |= GPUTextureUsage.TRANSIENT_ATTACHMENT;
+    }
+
+    if (texture?.usage !== usage) {
+      console.log(`Reallocating with usage ${usage}`);
+
+      if (texture) {
+        texture.destroy();
+      }
+
+      texture = device.createTexture({
+        size: [canvas.width, canvas.height],
+        sampleCount,
+        format: presentationFormat,
+        usage,
+      });
+      view = texture.createView();
+    }
+
+    return view!;
+  };
+})();
 
+function frame() {
   const commandEncoder = device.createCommandEncoder();
 
   const renderPassDescriptor: GPURenderPassDescriptor = {
     colorAttachments: [
       {
-        view,
+        view: getMSAATempTextureView(),
         resolveTarget: context.getCurrentTexture().createView(),
         clearValue: [0, 0, 0, 0], // Clear to transparent
         loadOp: 'clear',