<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>WebGPU demos</title>
<link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;v=1">
<style>
* {
    --back: rgb(130, 130, 126);
    --dark: rgb(65, 65, 63);
    --sub-highlight: rgb(148, 176, 83);
    --highlight: rgb(189, 235, 7);
    --body: rgb(224, 224, 224);
    --body-darker: rgb(204, 204, 204);
}

body {
    background-color: var(--body);
    color: var(--dark);
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

header {
    position: relative;
    height: 20vw;
    background-color: var(--back);
    overflow: hidden;
    border-bottom: none;
}

header * {
    position: absolute;
    top: 0;
    left: 30vw;
}

header img {
    width: 40vw;
    height: 40vw;
    animation: spin 60s infinite linear;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

h1 {
    top: 10vw;
    width: 40vw;
    margin: 0 auto;
    font-size: 5vw;
    text-align: center;
    font-weight: bold;
    color: var(--dark);
    line-height: 1.0;
    text-shadow: 0px 2px 0px var(--back);
}

section.demos {
    display: grid;
    margin: 5vw 20vw;
    grid-template-columns: 16vw 16vw 16vw;
    grid-gap: 6vw;
}

section p {
    padding: 12px 20px;
    color: var(--dark);
}

section p a {
    text-decoration: none;
    color: var(--sub-highlight);
    font-weight: bold;
}

.intro {
    grid-column: 1 / 4;
    grid-row: 1;
}

.howto {
    grid-column: 1 / 4;
    grid-row: 2;
}

.warning {
    grid-column: 1 / 4;
    grid-row: 3;
    border: 2px solid var(--sub-highlight);
    background-color: var(--highlight);
    color: black;
}

.example {
    border: 2px solid var(--sub-highlight);
    text-align: center;
    padding: 10px 10px;
    background-color: var(--body-darker);
}

.example img {
    background-color: black;
    border: 1px solid black;
    box-sizing: border-box;
    width: 12vw;
    height: 12vw;
}

.example a {
    text-decoration: none;
    color: var(--dark);
}

@media only screen and (max-width: 600px) {
    header {
        height: 40vw;
    }

    header * {
        left: 10vw;
    }

    header img {
        width: 80vw;
        height: 80vw;
    }

    h1 {
        top: 20vw;
        width: 80vw;
        font-size: 10vw;
    }

    section.demos {
        margin: 5vw 5vw;
        grid-template-columns: 90vw;
        grid-gap: 6vw;
    }

    .intro, .howto, .warning {
        grid-column: 1;
    }

    .example img {
        width: 70vw;
        height: 70vw;
    }
}

</style>
</head>
<body>
    <header>
        <img src="resources/circle.svg">
        <h1>WebGPU<br>demos</h1>
    </header>
    <section class="demos">
        <p class="intro">
            Here are a collection of simple <a
            href="https://en.wikipedia.org/wiki/WebGPU">WebGPU</a>
            examples. They should work in the latest <a
            href="https://webkit.org/build-archives/">WebKit</a> builds and 
            <a href="https://developer.apple.com/safari/technology-preview/">Safari
             Technology Preview</a> release. The full <a href="https://gpuweb.github.io/gpuweb/">specification</a> is a work-in-progress on <a
            href="https://github.com/gpuweb/gpuweb
            ">GitHub</a>, and the implementation may differ from the current API.
        </p>
        <p class="howto">
            Make sure you are on a system with WebGPU enabled. In Safari, first
            make sure the Developer Menu is visible (Preferences > Advanced),
            then ensure Develop > Experimental Features > WebGPU is checked.
        </p>
        <p class="warning">
            WebGPU is an experimental technology, and you should not browse the entire
            Web with it enabled for now. It doesn't do much validation of content, and
            thus may cause some issues with your computer.
        </p>
        <div class="example">
            <a href="hello-triangle.html">
            <img src="resources/hello-triangle.png"><br>
            Hello World Triangle
            </a>
        </div>
        <div class="example">
            <a href="hello-cube.html">
            <img src = "resources/hello-cube.png"><br>
            Hello World Cube
            </a>
        </div>
        <div class="example">
            <a href="textured-cube.html">
            <img src="resources/textured-cube.png"><br>
            Textured Cube
            </a>
        </div>
        <div class="example">
            <a href="compute-blur.html">
            <img src="resources/compute-blur.png"><br>
            Compute Shader Blur
            </a>
        </div>
        <div class="example">
            <a href="babylon/oneSphereWebGPU.html">
            <img src="resources/babylon-sphere.png"><br>
            Sphere (Babylon.js)
            </a>
        </div>
        <div class="example">
            <a href="babylon/oneHelmetWebGPU.html">
            <img src="resources/babylon-helmet.png"><br>
            Helmet (Babylon.js)
            </a>
        </div>
        <div class="example">
            <a href="compute-boids.html">
            <img src="resources/compute-boids.png"><br>
            Compute Shader Flocking
            </a>
        </div>
        <div class="example">
            <a href="compute-boids-compile.html">
            <img src="resources/webkit-logo.png"><br>
            Compute Shader Compile Time Test
            </a>
        </div>
        <div class="example">
            <a href="https://browserbench.org/MotionMark1.1/developer.html?test-interval=10&display=minimal&tiles=big&controller=ramp&frame-rate=50&kalman-process-error=1&kalman-measurement-error=4&time-measurement=performance&suite-name=3DGraphics&test-name=TrianglesWebGPU">
            <img src="resources/motionmark.jpeg">
            MotionMark Benchmark
            </a>
        </div>
    </section>
</div>
</body>
</html>