WIP

webgpu · Oct 23, 2024 · 7316efc · 7316efc
1 parent e65e384
commit 7316efc
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 57 deletions.
diff --git a/sample/alphaToCoverage/emulatedAlphaToCoverage.ts b/sample/alphaToCoverage/emulatedAlphaToCoverage.ts
@@ -23,8 +23,8 @@ type Mask = number;
 export const kEmulatedAlphaToCoverage = {
   'Apple M1 Pro': `\
     fn emulatedAlphaToCoverage(alpha: f32, x: u32, y: u32) -> u32 {
-      let u = x % 2;
-      let v = y % 2;
+      let u = x % 2u;
+      let v = y % 2u;
       if (alpha < 0.5 / 16) { return ${0b0000}; }
       // FIXME returning values out of an array is not working, always returns 0
       if (alpha < 1.5 / 16) { return array(array(${0b0001}u, ${0b0000}), array(${0b0000}, ${0b0000}))[v][u]; }

diff --git a/sample/alphaToCoverage/main.ts b/sample/alphaToCoverage/main.ts
@@ -17,14 +17,15 @@ quitIfWebGPUNotAvailable(adapter, device);
 
 const kInitConfig = {
   scene: 'solid_colors',
-  emulatedDevice: 'none',
+  leftDevice: 'no emulation',
+  rightDevice: 'Apple M1 Pro',
   sizeLog2: 3,
-  showResolvedColor: true,
+  showResolvedColor: false,
   color1: 0x0000ff,
-  alpha1: 127,
+  alpha1: 0,
   color2: 0xff0000,
   alpha2: 16,
-  pause: false,
+  animate: false,
 };
 const config = { ...kInitConfig };
 
@@ -38,29 +39,41 @@ gui.width = 300;
     },
   };
 
-  gui.add(config, 'scene', ['solid_colors']);
-  gui.add(config, 'emulatedDevice', [
-    'none',
-    ...Object.keys(kEmulatedAlphaToCoverage),
-  ]);
+  gui.add(buttons, 'initial').name('reset all settings');
+
+  gui.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**');
+
+  const leftPanel = gui.addFolder('Left hand side + resolved color');
+  leftPanel.open();
+  leftPanel.add(config, 'leftDevice', ['no emulation']).name('emulated device');
+  leftPanel.add(config, 'showResolvedColor', true);
+
+  const rightPanel = gui.addFolder('Right hand side');
+  rightPanel.open();
+  rightPanel
+    .add(config, 'rightDevice', [
+      'no emulation',
+      ...Object.keys(kEmulatedAlphaToCoverage),
+    ])
+    .name('emulated device');
 
-  const settings = gui.addFolder('Settings');
-  settings.open();
-  settings.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**');
-  settings.add(config, 'showResolvedColor', true);
+  const scenes = gui.addFolder('Scenes');
+  scenes.open();
+  scenes.add(config, 'scene', ['solid_colors']);
 
-  const draw1Panel = gui.addFolder('solid_colors Draw 1');
+  const solidColors = scenes.addFolder('solid_colors scene options');
+  solidColors.open();
+
+  const draw1Panel = solidColors.addFolder('Draw 1');
   draw1Panel.open();
   draw1Panel.addColor(config, 'color1').name('color');
   draw1Panel.add(config, 'alpha1', 0, 255).name('alpha');
 
-  const draw2Panel = gui.addFolder('solid_colors Draw 2');
+  const draw2Panel = solidColors.addFolder('Draw 2');
   draw2Panel.open();
   draw2Panel.addColor(config, 'color2').name('color');
   draw2Panel.add(config, 'alpha2', 0, 255).name('alpha');
-  draw2Panel.add(config, 'pause', false);
-
-  gui.add(buttons, 'initial').name('reset to initial');
+  draw2Panel.add(config, 'animate', false);
 }
 
 //
@@ -94,8 +107,8 @@ let actualMSTexture: GPUTexture, actualMSTextureView: GPUTextureView;
 let emulatedMSTexture: GPUTexture, emulatedMSTextureView: GPUTextureView;
 let resolveTexture: GPUTexture, resolveTextureView: GPUTextureView;
 let lastSize = 0;
-let renderWithEmulatedAlphaToCoveragePipeline: GPURenderPipeline | null;
-let lastEmulatedDevice = 'none';
+let renderWithEmulatedAlphaToCoveragePipeline: GPURenderPipeline | null = null;
+let lastEmulatedDevice = 'no emulation';
 function resetConfiguredObjects() {
   const size = 2 ** config.sizeLog2;
   if (lastSize !== size) {
@@ -131,38 +144,42 @@ function resetConfiguredObjects() {
     lastSize = size;
   }
 
-  if (
-    config.emulatedDevice !== 'none' &&
-    lastEmulatedDevice !== config.emulatedDevice
-  ) {
-    // Pipeline to render to a multisampled texture using *emulated* alpha-to-coverage
-    const renderWithEmulatedAlphaToCoverageModule = device.createShaderModule({
-      code:
-        renderWithEmulatedAlphaToCoverageWGSL +
-        kEmulatedAlphaToCoverage[config.emulatedDevice],
-    });
-    renderWithEmulatedAlphaToCoveragePipeline = device.createRenderPipeline({
-      label: 'renderWithEmulatedAlphaToCoveragePipeline',
-      layout: 'auto',
-      vertex: {
-        module: renderWithEmulatedAlphaToCoverageModule,
-        buffers: [
-          {
-            stepMode: 'instance',
-            arrayStride: 4,
-            attributes: [{ shaderLocation: 0, format: 'unorm8x4', offset: 0 }],
-          },
-        ],
-      },
-      fragment: {
-        module: renderWithEmulatedAlphaToCoverageModule,
-        targets: [{ format: 'rgba8unorm' }],
-      },
-      multisample: { count: 4, alphaToCoverageEnabled: false },
-      primitive: { topology: 'triangle-list' },
-    });
-  } else {
-    renderWithEmulatedAlphaToCoveragePipeline = null;
+  if (lastEmulatedDevice !== config.rightDevice) {
+    if (config.rightDevice === 'no emulation') {
+      renderWithEmulatedAlphaToCoveragePipeline = null;
+    } else {
+      // Pipeline to render to a multisampled texture using *emulated* alpha-to-coverage
+      const renderWithEmulatedAlphaToCoverageModule = device.createShaderModule(
+        {
+          code:
+            renderWithEmulatedAlphaToCoverageWGSL +
+            kEmulatedAlphaToCoverage[config.rightDevice],
+        }
+      );
+      renderWithEmulatedAlphaToCoveragePipeline = device.createRenderPipeline({
+        label: 'renderWithEmulatedAlphaToCoveragePipeline',
+        layout: 'auto',
+        vertex: {
+          module: renderWithEmulatedAlphaToCoverageModule,
+          buffers: [
+            {
+              stepMode: 'instance',
+              arrayStride: 4,
+              attributes: [
+                { shaderLocation: 0, format: 'unorm8x4', offset: 0 },
+              ],
+            },
+          ],
+        },
+        fragment: {
+          module: renderWithEmulatedAlphaToCoverageModule,
+          targets: [{ format: 'rgba8unorm' }],
+        },
+        multisample: { count: 4, alphaToCoverageEnabled: false },
+        primitive: { topology: 'triangle-list' },
+      });
+    }
+    lastEmulatedDevice = config.rightDevice;
   }
 }
 
@@ -248,11 +265,14 @@ function render() {
   const showMultisampleTextureBG = device.createBindGroup({
     layout: showMultisampleTextureBGL,
     entries: [
-      { binding: 0, resource: actualMSTextureView },
+      {
+        binding: 0,
+        resource: actualMSTextureView,
+      },
       {
         binding: 1,
         resource:
-          config.emulatedDevice === 'none'
+          config.rightDevice === 'no emulation'
             ? actualMSTextureView
             : emulatedMSTextureView,
       },
@@ -337,7 +357,7 @@ function render() {
 }
 
 function frame() {
-  if (!config.pause) {
+  if (config.animate) {
     // scrub alpha2 over 15 seconds
     let alpha = ((performance.now() / 15000) % 1) * (255 + 20) - 10;
     alpha = Math.max(0, Math.min(alpha, 255));