Websites/webkit.org/demos/webgpu/compute-blur.html

   1 <!-- This demo loosely based off of https://github.com/d3dcoder/d3d12book/tree/master/Chapter%2013%20The%20Compute%20Shader/Blur -->
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5 <meta name="viewport" content="width=600">
   6 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   7 <title>WebGPU Compute</title>
   8 <link rel="stylesheet" href="css/style.css">
   9 <style>
  10 body {
  11     font-family: system-ui;
  12     color: #f7f7ff;
  13     background-color: rgb(13, 77, 153);
  14     text-align: center;
  15 }
  16 canvas {
  17     margin: 0 auto;
  18 }
  19 p {
  20     margin: 0 auto 1em;
  21     width: 600px;
  22     position: relative;
  23 }
  24
  25 .slider {
  26     -webkit-appearance: none;
  27     width: 50%;
  28     height: 10px;
  29     border-radius: 5px;
  30     background: #d3d3d3;
  31     outline: none;
  32     opacity: 0.7;
  33     -webkit-transition: .2s;
  34     transition: opacity .2s;
  35 }
  36
  37 .slider:hover {
  38     opacity: 1;
  39 }
  40
  41 .slider::-webkit-slider-thumb {
  42     -webkit-appearance: none;
  43     appearance: none;
  44     width: 25px;
  45     height: 25px;
  46     border-radius: 50%;
  47     background: rgb(66, 200, 255);
  48     cursor: pointer;
  49 }
  50
  51 .slider::-moz-range-thumb {
  52     width: 25px;
  53     height: 25px;
  54     border-radius: 50%;
  55     background: rgb(66, 200, 255);
  56     cursor: pointer;
  57 }
  58 </style>
  59 </head>
  60 <body>
  61 <div id="contents">
  62     <h1>Compute Demo</h1>
  63     <p>
  64         This demo uses the WebGPU compute pipeline to perform a Gaussian blur of the source image data. Use the slider to set the blur radius.
  65     </p>
  66     <p>
  67         <div class="slidecontainer">
  68             Blur radius:
  69             <input type="range" min="0" max="32" value="0" class="slider" id="radiusSlider">
  70         </div>
  71     </p>
  72     <div id="demo">
  73         <canvas></canvas>
  74     </div>
  75 </div>
  76 <div id="error">
  77     <h2>WebGPU not available</h2>
  78     <p>
  79         Make sure you are on a system with WebGPU enabled. In
  80         Safari, first make sure the Developer Menu is visible (Preferences →
  81         Advanced), then Develop → Experimental Features → WebGPU.
  82     </p>
  83 </div>
  84 <script src="scripts/compute-blur.js"></script>
  85 </body>
  86 </html>