| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width"> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>WebMetal 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&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="circle.svg"> |
| <h1>WebMetal<br>demos</h1> |
| </header> |
| <section class="demos"> |
| <p class="intro"> |
| Here are a collection of simple <a |
| href="https://webkit.org/blog/7380/next-generation-3d-graphics-on-the-web/">WebMetal</a> |
| examples. They should work in the latest <a |
| href="https://developer.apple.com/safari/technology-preview/">Safari |
| Technology Preview</a> releases, as well as <a |
| href="https://webkit.org/nightly/">nightly WebKit</a> builds. At |
| the moment there are a few small differences between the |
| implementation and the <a |
| href="https://webkit.org/wp-content/uploads/webgpu-api-proposal.html |
| ">documented proposal</a>, most of which are documented in the code. |
| </p> |
| <p class="howto"> |
| Make sure you are on a system with WebMetal enabled. In Safari, first |
| make sure the Developer Menu is visible (Preferences → Advanced), |
| then Develop → Experimental Features → Enable WebMetal. |
| </p> |
| <p class="warning"> |
| WebMetal is an experimental technology, and you should not browse the entire |
| Web with it enabled for now. It doesn't do any validation of content, and |
| thus may cause some issues with your computer. |
| </p> |
| <div class="example"> |
| <a href="hello.html"> |
| <img src="hello.jpg"><br> |
| Hello World Triangle |
| </a> |
| </div> |
| <div class="example"> |
| <a href="2d.html"> |
| <img src="2d.jpg"><br> |
| 2d-drawing like Shadertoy |
| </a> |
| </div> |
| <div class="example"> |
| <a href="simple.html"> |
| <img src="simple.jpg"><br> |
| Simple Spinning Cube |
| </a> |
| </div> |
| <div class="example"> |
| <a href="cubes.html"> |
| <img src="cubes.jpg"><br> |
| Animating Cubes |
| </a> |
| </div> |
| </section> |
| </div> |
| </body> |
| </html> |
