webgpu
diff --git a/‎main.js‎
Lines changed: 13 additions & 1 deletion b/‎main.js‎
Lines changed: 13 additions & 1 deletion
diff --git a/‎main.js.map‎
Lines changed: 1 addition & 1 deletion b/‎main.js.map‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎sample/alphaToCoverage/index.html‎
Lines changed: 30 additions & 0 deletions b/‎sample/alphaToCoverage/index.html‎
Lines changed: 30 additions & 0 deletions
@@ -63,6 +63,17 @@ var aBuffer = {
     ],
 };
 
+var alphaToCoverage = {
+    name: 'Alpha-to-Coverage',
+    description: 'Visualizes how alpha-to-coverage translates alpha values into sample coverage on your device. This varies per device; for example, not all devices guarantee that once a sample pops in, it will stay; some devices repeat at 2x2 pixels, others at 4x4; etc. The circles show the 4 samples of each pixel; the background checkerboard shows where the pixels are.',
+    filename: "sample/alphaToCoverage",
+    sources: [
+        { path: 'main.ts' },
+        { path: './renderWithAlphaToCoverage.wgsl' },
+        { path: './showMultisampleTexture.wgsl' },
+    ],
+};
+
 var animometer = {
     name: 'Animometer',
     description: 'A WebGPU port of the Animometer MotionMark benchmark.',
@@ -614,10 +625,11 @@ const pageCategories = [
         title: 'WebGPU Features',
         description: 'Highlights of important WebGPU features.',
         samples: {
-            samplerParameters,
             reversedZ,
             renderBundles,
             occlusionQuery,
+            samplerParameters,
+            alphaToCoverage,
         },
     },
     // Samples that demonstrate the GPGPU functionality of WebGPU. These samples generally provide some
 
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>webgpu-samples: alphaToCoverage</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      html, body {
+        margin: 0;      /* remove default margin */
+        height: 100%;   /* make body fill the browser window */
+        display: flex;
+        place-content: center center;
+      }
+      canvas {
+        width: min(100vw, 100vh);
+        height: min(100vw, 100vh);
+        display: block;
+      }
+    </style>
+    <script src="../../third_party/gif.js/gif.js"></script>
+    <script defer type="module" src="main.js"></script>
+    <script defer type="module" src="../../js/iframe-helper.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+  </body>
+</html>