Websites/webkit.org/demos/webgpu/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta name="viewport" content="width=device-width">
   5 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6 <title>WebGPU demos</title>
   7 <link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
   8 <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&amp;v=1">
   9 <style>
  10 * {
  11     --back: rgb(130, 130, 126);
  12     --dark: rgb(65, 65, 63);
  13     --sub-highlight: rgb(148, 176, 83);
  14     --highlight: rgb(189, 235, 7);
  15     --body: rgb(224, 224, 224);
  16     --body-darker: rgb(204, 204, 204);
  17 }
  18
  19 body {
  20     background-color: var(--body);
  21     color: var(--dark);
  22     margin: 0;
  23     padding: 0;
  24     line-height: 1.4;
  25 }
  26
  27 header {
  28     position: relative;
  29     height: 20vw;
  30     background-color: var(--back);
  31     overflow: hidden;
  32     border-bottom: none;
  33 }
  34
  35 header * {
  36     position: absolute;
  37     top: 0;
  38     left: 30vw;
  39 }
  40
  41 header img {
  42     width: 40vw;
  43     height: 40vw;
  44     animation: spin 60s infinite linear;
  45 }
  46
  47 @keyframes spin {
  48   from {
  49       transform: rotate(0deg);
  50   }
  51   to {
  52       transform: rotate(360deg);
  53   }
  54 }
  55
  56 h1 {
  57     top: 10vw;
  58     width: 40vw;
  59     margin: 0 auto;
  60     font-size: 5vw;
  61     text-align: center;
  62     font-weight: bold;
  63     color: var(--dark);
  64     line-height: 1.0;
  65     text-shadow: 0px 2px 0px var(--back);
  66 }
  67
  68 section.demos {
  69     display: grid;
  70     margin: 5vw 20vw;
  71     grid-template-columns: 16vw 16vw 16vw;
  72     grid-gap: 6vw;
  73 }
  74
  75 section p {
  76     padding: 12px 20px;
  77     color: var(--dark);
  78 }
  79
  80 section p a {
  81     text-decoration: none;
  82     color: var(--sub-highlight);
  83     font-weight: bold;
  84 }
  85
  86 .intro {
  87     grid-column: 1 / 4;
  88     grid-row: 1;
  89 }
  90
  91 .howto {
  92     grid-column: 1 / 4;
  93     grid-row: 2;
  94 }
  95
  96 .warning {
  97     grid-column: 1 / 4;
  98     grid-row: 3;
  99     border: 2px solid var(--sub-highlight);
 100     background-color: var(--highlight);
 101     color: black;
 102 }
 103
 104 .example {
 105     border: 2px solid var(--sub-highlight);
 106     text-align: center;
 107     padding: 10px 10px;
 108     background-color: var(--body-darker);
 109 }
 110
 111 .example img {
 112     background-color: black;
 113     border: 1px solid black;
 114     box-sizing: border-box;
 115     width: 12vw;
 116     height: 12vw;
 117 }
 118
 119 .example a {
 120     text-decoration: none;
 121     color: var(--dark);
 122 }
 123
 124 @media only screen and (max-width: 600px) {
 125     header {
 126         height: 40vw;
 127     }
 128
 129     header * {
 130         left: 10vw;
 131     }
 132
 133     header img {
 134         width: 80vw;
 135         height: 80vw;
 136     }
 137
 138     h1 {
 139         top: 20vw;
 140         width: 80vw;
 141         font-size: 10vw;
 142     }
 143
 144     section.demos {
 145         margin: 5vw 5vw;
 146         grid-template-columns: 90vw;
 147         grid-gap: 6vw;
 148     }
 149
 150     .intro, .howto, .warning {
 151         grid-column: 1;
 152     }
 153
 154     .example img {
 155         width: 70vw;
 156         height: 70vw;
 157     }
 158 }
 159
 160 </style>
 161 </head>
 162 <body>
 163     <header>
 164         <img src="resources/circle.svg">
 165         <h1>WebGPU<br>demos</h1>
 166     </header>
 167     <section class="demos">
 168         <p class="intro">
 169             Here are a collection of simple <a
 170             href="https://en.wikipedia.org/wiki/WebGPU">WebGPU</a>
 171             examples. They should work in the latest <a
 172             href="https://webkit.org/build-archives/">WebKit</a> builds and
 173             <a href="https://developer.apple.com/safari/technology-preview/">Safari
 174              Technology Preview</a> release. The full <a href="https://gpuweb.github.io/gpuweb/">specification</a> is a work-in-progress on <a
 175             href="https://github.com/gpuweb/gpuweb
 176             ">GitHub</a>, and the implementation may differ from the current API.
 177         </p>
 178         <p class="howto">
 179             Make sure you are on a system with WebGPU enabled. In Safari, first
 180             make sure the Developer Menu is visible (Preferences → Advanced),
 181             then ensure Develop → Experimental Features → WebGPU is checked.
 182         </p>
 183         <p class="warning">
 184             WebGPU is an experimental technology, and you should not browse the entire
 185             Web with it enabled for now. It doesn't do much validation of content, and
 186             thus may cause some issues with your computer.
 187         </p>
 188         <div class="example">
 189             <a href="hello-triangle.html">
 190             <img src="resources/hello-triangle.png"><br>
 191             Hello World Triangle
 192             </a>
 193         </div>
 194         <div class="example">
 195             <a href="hello-cube.html">
 196             <img src = "resources/hello-cube.png"><br>
 197             Hello World Cube
 198             </a>
 199         </div>
 200         <div class="example">
 201             <a href="textured-cube.html">
 202             <img src="resources/textured-cube.png"><br>
 203             Textured Spinning Cube
 204             </a>
 205         </div>
 206         <div class="example">
 207             <a href="compute-blur.html">
 208             <img src="resources/compute-blur.png"><br>
 209             Compute Shader Blur
 210             </a>
 211         </div>
 212     </section>
 213 </div>
 214 </body>
 215 </html>
 216