<!-- This demo loosely based off of https://github.com/d3dcoder/d3d12book/tree/master/Chapter%2013%20The%20Compute%20Shader/Blur -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=600">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>WebGPU Compute</title>
<link rel="stylesheet" href="css/style.css">
<style>
body {
    font-family: system-ui;
    color: #f7f7ff;
    background-color: rgb(13, 77, 153);
    text-align: center;
}
canvas {
    margin: 0 auto;
}
p {
    margin: 0 auto 1em;
    width: 600px;
    position: relative;
}

.slider {
    -webkit-appearance: none;
    width: 50%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgb(66, 200, 255);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgb(66, 200, 255);
    cursor: pointer;
}
</style>
</head>
<body>
<div id="contents">
    <h1>Compute Demo</h1>
    <p>
        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.
    </p>
    <p>
        <div class="slidecontainer">
            Blur radius: 
            <input type="range" min="0" max="32" value="0" class="slider" id="radiusSlider">
        </div>
    </p>
    <div id="demo">
        <canvas></canvas>
    </div>
</div>
<div id="error">
    <h2>WebGPU not available</h2>
    <p>
        Make sure you are on a system with WebGPU enabled. In
        Safari, first make sure the Developer Menu is visible (Preferences >
        Advanced), then Develop > Experimental Features > WebGPU.
    </p>
    <p>
        In addition, you must be using Safari Technology Preview 92 or above.
        You can get the latest STP <a href="https://developer.apple.com/safari/download/">here</a>.
    </p>
</div>
<script src="scripts/compute-blur.js"></script>
</body>
</html>