more size options, fix another redundantly allocated texture

Author: kainino0x

sample/alphaToCoverage/main.ts

@@ -14,8 +14,7 @@ quitIfWebGPUNotAvailable(adapter, device);
 //
 
 const kInitConfig = {
-  width: 8,
-  height: 8,
+  sizeLog2: 3,
   showResolvedColor: true,
   color1: 0x0000ff,
   alpha1: 127,
@@ -37,8 +36,7 @@ gui.width = 300;
 
   const settings = gui.addFolder('Settings');
   settings.open();
-  settings.add(config, 'width', 1, 16, 1);
-  settings.add(config, 'height', 1, 16, 1);
+  settings.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**');
   settings.add(config, 'showResolvedColor', true);
 
   const draw1Panel = gui.addFolder('Draw 1');
@@ -83,25 +81,36 @@ const bufInstanceColors = device.createBuffer({
   size: 8,
 });
 
-let multisampleTexture, multisampleTextureView;
+let multisampleTexture: GPUTexture, multisampleTextureView: GPUTextureView;
+let resolveTexture: GPUTexture, resolveTextureView: GPUTextureView;
+let lastSize = 0;
 function resetMultisampleTexture() {
-  if (
-    !multisampleTexture ||
-    multisampleTexture.width !== config.width ||
-    multisampleTexture.height !== config.height
-  ) {
+  const size = 2 ** config.sizeLog2;
+  if (lastSize !== size) {
     if (multisampleTexture) {
       multisampleTexture.destroy();
     }
-    console.log('recreate');
     multisampleTexture = device.createTexture({
       format: 'rgba8unorm',
       usage:
         GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      size: [config.width, config.height],
+      size: [size, size],
       sampleCount: 4,
     });
     multisampleTextureView = multisampleTexture.createView();
+
+    if (resolveTexture) {
+      resolveTexture.destroy();
+    }
+    resolveTexture = device.createTexture({
+      format: 'rgba8unorm',
+      usage:
+        GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+      size: [size, size],
+    });
+    resolveTextureView = resolveTexture.createView();
+
+    lastSize = size;
   }
 }
 
@@ -175,13 +184,6 @@ const showMultisampleTextureBGL =
 function render() {
   applyConfig();
 
-  const resolveTexture = device.createTexture({
-    format: 'rgba8unorm',
-    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-    size: [config.width, config.height],
-  });
-  const resolveTextureView = resolveTexture.createView();
-
   const showMultisampleTextureBG = device.createBindGroup({
     layout: showMultisampleTextureBGL,
     entries: [

sample/alphaToCoverage/showMultisampleTexture.wgsl

@@ -49,28 +49,26 @@ fn fmain(vary: Varying) -> @location(0) vec4f {
   let xyInt = vec2u(xy);
   let xyFrac = xy % vec2f(1, 1);
 
-  if xyInt.x >= dim.x || xyInt.y >= dim.y {
-    return vec4f(0, 0, 0, 1);
-  }
+  // Show the visualization only if the resolution is large enough to see it
+  if (dpdx(xy.x) < kGridEdgeHalfWidth) & (dpdy(xy.y) < kGridEdgeHalfWidth) {
+    // Check if we're close to a sample; if so, visualize the sample value
+    for (var sampleIndex = 0; sampleIndex < kSampleCount; sampleIndex += 1) {
+      let distanceFromSample = distance(xyFrac, kSamplePositions[sampleIndex]);
+      if distanceFromSample < kSampleInnerRadius {
+        // Draw a circle for the sample value
+        let val = textureLoad(tex, xyInt, sampleIndex).rgb;
+        return vec4f(val, 1);
+      } else if distanceFromSample < kSampleOuterRadius {
+        // Draw a ring around the circle
+        return vec4f(0, 0, 0, 1);
+      }
+    }
 
-  // Check if we're close to a sample, and return it
-  for (var sampleIndex = 0; sampleIndex < kSampleCount; sampleIndex += 1) {
-    let distanceFromSample = distance(xyFrac, kSamplePositions[sampleIndex]);
-    if distanceFromSample < kSampleInnerRadius {
-      // Draw a circle for the sample value
-      let val = textureLoad(tex, xyInt, sampleIndex).rgb;
-      return vec4f(val, 1);
-    } else if distanceFromSample < kSampleOuterRadius {
-      // Draw a ring around the circle
+    // If close to a grid edge, render the grid
+    let distanceToGridEdge = abs((xyFrac + 0.5) % 1 - 0.5);
+    if min(distanceToGridEdge.x, distanceToGridEdge.y) < kGridEdgeHalfWidth {
       return vec4f(0, 0, 0, 1);
     }
-
-  }
-
-  // If close to a grid edge, render the grid
-  let distanceToGridEdge = abs((xyFrac + 0.5) % 1 - 0.5);
-  if min(distanceToGridEdge.x, distanceToGridEdge.y) < kGridEdgeHalfWidth {
-    return vec4f(0, 0, 0, 1);
   }
 
   // Otherwise, show the multisample-resolved result as the background