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>WebMetal 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>Web GPU<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">Web GPU</a>
 171             examples. They should work in the latest <a
 172             href="https://webkit.org/build-archives/">WebKit</a> builds, and
 173             soon in a <a
 174             href="https://developer.apple.com/safari/technology-preview/">Safari
 175              Technology Preview</a> release. The full specification is a work-in-progress on <a
 176             href="https://github.com/gpuweb/gpuweb
 177             ">GitHub</a>, and the implementation may differ from the current API.
 178         </p>
 179         <p class="howto">
 180             Make sure you are on a system with Web GPU enabled. In Safari, first
 181             make sure the Developer Menu is visible (Preferences → Advanced),
 182             then ensure Develop → Experimental Features → Web GPU is checked.
 183         </p>
 184         <p class="warning">
 185             Web GPU is an experimental technology, and you should not browse the entire
 186             Web with it enabled for now. It doesn't do much validation of content, and
 187             thus may cause some issues with your computer.
 188         </p>
 189         <div class="example">
 190             <a href="hello-triangle.html">
 191             <img src="resources/hello-triangle.png"><br>
 192             Hello World Triangle
 193             </a>
 194         </div>
 195         <div class="example">
 196             <a href="hello-cube.html">
 197             <img src="resources/hello-cube.png"><br>
 198             Textured Spinning Cube
 199             </a>
 200         </div>
 201     </section>
 202 </div>
 203 </body>
 204 </html>
 205