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