[WebGPU] Fix up demos on and add compute demo to webkit.org/demos
[WebKit-https.git] / 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>