add gif capture button

webgpu · Sep 20, 2024 · 87e5054 · 87e5054
1 parent 142276f
commit 87e5054
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 19 deletions.
diff --git a/sample/alphaToCoverage/index.html b/sample/alphaToCoverage/index.html
@@ -19,11 +19,20 @@
         height: min(100vw, 100vh);
         display: block;
       }
+      #imggif {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        width: min(20vw, 20vh);
+        height: min(20vw, 20vh);
+      }
     </style>
-    <script defer src="main.js" type="module"></script>
+    <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>
+    <img id=imggif></img>
   </body>
 </html>
diff --git a/sample/alphaToCoverage/main.ts b/sample/alphaToCoverage/main.ts
@@ -4,6 +4,8 @@ import showMultisampleTextureWGSL from './showMultisampleTexture.wgsl';
 import renderWithAlphaToCoverageWGSL from './renderWithAlphaToCoverage.wgsl';
 import { quitIfWebGPUNotAvailable } from '../util';
 
+declare const GIF: any; // from gif.js
+
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const adapter = await navigator.gpu?.requestAdapter();
 const device = await adapter?.requestDevice();
@@ -13,20 +15,17 @@ quitIfWebGPUNotAvailable(adapter, device);
 // GUI controls
 //
 
+const kAlphaSteps = 64;
+
 const kInitConfig = {
   width: 8,
   height: 8,
-  alpha: 0,
+  alpha: 4,
   pause: false,
 };
 const config = { ...kInitConfig };
-const updateAlpha = () => {
-  if (!config.pause) {
-    config.alpha = ((performance.now() / 10000) % 1.2) - 0.1;
-    gui.updateDisplay();
-  }
-
-  const data = new Float32Array([config.alpha]);
+const updateConfig = () => {
+  const data = new Float32Array([config.alpha / kAlphaSteps]);
   device.queue.writeBuffer(bufConfig, 0, data);
 };
 
@@ -37,26 +36,37 @@ const gui = new GUI();
       Object.assign(config, kInitConfig);
       gui.updateDisplay();
     },
+    captureGif() {
+      void captureGif();
+    },
   };
-  const presets = gui.addFolder('Presets');
-  presets.open();
-  presets.add(buttons, 'initial').name('reset to initial');
 
   const settings = gui.addFolder('Settings');
   settings.open();
   settings.add(config, 'width', 1, 16, 1);
   settings.add(config, 'height', 1, 16, 1);
-  settings.add(config, 'alpha', -0.1, 1.1, 0.01);
-  settings.add(config, 'pause', false);
+
+  const alphaPanel = gui.addFolder('Alpha');
+  alphaPanel.open();
+  alphaPanel
+    .add(config, 'alpha', -2, kAlphaSteps + 2, 1)
+    .name(`alpha (of ${kAlphaSteps})`);
+  alphaPanel.add(config, 'pause', false);
+
+  gui.add(buttons, 'initial').name('reset to initial');
+  gui.add(buttons, 'captureGif').name('capture gif (right click gif to save)');
 }
 
 //
 // Canvas setup
 //
 
-const devicePixelRatio = window.devicePixelRatio;
-canvas.width = canvas.clientWidth * devicePixelRatio;
-canvas.height = canvas.clientHeight * devicePixelRatio;
+function updateCanvasSize() {
+  const devicePixelRatio = window.devicePixelRatio;
+  canvas.width = canvas.clientWidth * devicePixelRatio;
+  canvas.height = canvas.clientHeight * devicePixelRatio;
+}
+updateCanvasSize();
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
@@ -121,8 +131,8 @@ const showMultisampleTexturePipeline = device.createRenderPipeline({
 const showMultisampleTextureBGL =
   showMultisampleTexturePipeline.getBindGroupLayout(0);
 
-function frame() {
-  updateAlpha();
+function render() {
+  updateConfig();
 
   const multisampleTexture = device.createTexture({
     format: 'rgba16float',
@@ -177,8 +187,54 @@ function frame() {
   device.queue.submit([commandEncoder.finish()]);
 
   multisampleTexture.destroy();
+}
 
+function frame() {
+  if (!config.pause) {
+    config.alpha = ((performance.now() / 10000) % 1) * (kAlphaSteps + 4) - 2;
+    gui.updateDisplay();
+  }
+  updateCanvasSize();
+  render();
   requestAnimationFrame(frame);
 }
 
 requestAnimationFrame(frame);
+
+async function captureGif() {
+  const size = Math.max(config.width, config.height) * 32;
+  const gif = new GIF({
+    workers: 4,
+    workerScript: 'third_party/gif.js/gif.worker.js',
+    width: size,
+    height: size,
+    debug: true,
+  });
+
+  canvas.width = canvas.height = size;
+  const frames = [];
+  // Loop through all alpha values and render a frame
+  for (let alpha = 0; alpha <= kAlphaSteps; ++alpha) {
+    config.alpha = alpha;
+    render();
+    const dataURL = canvas.toDataURL();
+    // Only save the frame into the gif if it's different from the last one
+    if (dataURL !== frames[frames.length - 1]) {
+      frames.push(dataURL);
+    }
+  }
+  for (let i = 0; i < frames.length; ++i) {
+    const img = new Image();
+    img.src = frames[i];
+    gif.addFrame(img, {
+      delay: i == 0 || i == frames.length - 1 ? 2000 : 1000,
+    });
+  }
+
+  gif.on('finished', (blob) => {
+    const imggif = document.querySelector('#imggif') as HTMLImageElement;
+    imggif.src = URL.createObjectURL(blob);
+    console.log(imggif.src);
+  });
+  gif.render();
+}
diff --git a/sample/alphaToCoverage/third_party/gif.js/LICENSE.txt b/sample/alphaToCoverage/third_party/gif.js/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2018 Johan Nordberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/sample/alphaToCoverage/third_party/gif.js/gif.js b/sample/alphaToCoverage/third_party/gif.js/gif.js