18e2b3736a1636d6af5754dc3569fd78a0656357
[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>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