| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width"> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>WebGPU 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="resources/circle.svg"> |
| <h1>WebGPU<br>demos</h1> |
| </header> |
| <section class="demos"> |
| <p class="intro"> |
| Here are a collection of simple <a |
| href="https://en.wikipedia.org/wiki/WebGPU">WebGPU</a> |
| examples. They should work in the latest <a |
| href="https://webkit.org/build-archives/">WebKit</a> builds and |
| <a href="https://developer.apple.com/safari/technology-preview/">Safari |
| Technology Preview</a> release. The full <a href="https://gpuweb.github.io/gpuweb/">specification</a> is a work-in-progress on <a |
| href="https://github.com/gpuweb/gpuweb |
| ">GitHub</a>, and the implementation may differ from the current API. |
| </p> |
| <p class="howto"> |
| Make sure you are on a system with WebGPU enabled. In Safari, first |
| make sure the Developer Menu is visible (Preferences > Advanced), |
| then ensure Develop > Experimental Features > WebGPU is checked. |
| </p> |
| <p class="warning"> |
| WebGPU is an experimental technology, and you should not browse the entire |
| Web with it enabled for now. It doesn't do much validation of content, and |
| thus may cause some issues with your computer. |
| </p> |
| <div class="example"> |
| <a href="hello-triangle.html"> |
| <img src="resources/hello-triangle.png"><br> |
| Hello World Triangle |
| </a> |
| </div> |
| <div class="example"> |
| <a href="hello-cube.html"> |
| <img src = "resources/hello-cube.png"><br> |
| Hello World Cube |
| </a> |
| </div> |
| <div class="example"> |
| <a href="textured-cube.html"> |
| <img src="resources/textured-cube.png"><br> |
| Textured Cube |
| </a> |
| </div> |
| <div class="example"> |
| <a href="compute-blur.html"> |
| <img src="resources/compute-blur.png"><br> |
| Compute Shader Blur |
| </a> |
| </div> |
| <div class="example"> |
| <a href="babylon/oneSphereWebGPU.html"> |
| <img src="resources/babylon-sphere.png"><br> |
| Sphere (Babylon.js) |
| </a> |
| </div> |
| <div class="example"> |
| <a href="babylon/oneHelmetWebGPU.html"> |
| <img src="resources/babylon-helmet.png"><br> |
| Helmet (Babylon.js) |
| </a> |
| </div> |
| <div class="example"> |
| <a href="compute-boids.html"> |
| <img src="resources/compute-boids.png"><br> |
| Compute Shader Flocking |
| </a> |
| </div> |
| <div class="example"> |
| <a href="compute-boids-compile.html"> |
| <img src="resources/webkit-logo.png"><br> |
| Compute Shader Compile Time Test |
| </a> |
| </div> |
| <div class="example"> |
| <a href="https://browserbench.org/MotionMark1.1/developer.html?test-interval=10&display=minimal&tiles=big&controller=ramp&frame-rate=50&kalman-process-error=1&kalman-measurement-error=4&time-measurement=performance&suite-name=3DGraphics&test-name=TrianglesWebGPU"> |
| <img src="resources/motionmark.jpeg"> |
| MotionMark Benchmark |
| </a> |
| </div> |
| </section> |
| </div> |
| </body> |
| </html> |
| |
