| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=600"> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>WebGPU Simple demo</title> |
| <link rel="stylesheet" href="shared.css"> |
| <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"> |
| <script src="gl-matrix-min.js"></script> |
| <script src="shared.js"></script> |
| <script src="simple.js"></script> |
| <script id="library" type="x-shader/x-metal"> |
| #include <metal_stdlib> |
| |
| using namespace metal; |
| |
| struct Vertex |
| { |
| float4 position [[position]]; |
| float4 color; |
| }; |
| |
| struct Uniform |
| { |
| float4x4 modelViewProjectionMatrix; |
| }; |
| |
| vertex Vertex vertex_main(device Vertex *vertices [[buffer(0)]], |
| constant Uniform *uniforms [[buffer(1)]], |
| uint vid [[vertex_id]]) |
| { |
| Vertex vertexOut; |
| vertexOut.position = uniforms->modelViewProjectionMatrix * vertices[vid].position; |
| vertexOut.color = vertices[vid].color; |
| |
| return vertexOut; |
| } |
| |
| fragment float4 fragment_main(Vertex vertexIn [[stage_in]]) |
| { |
| return float4(vertexIn.color); |
| } |
| </script> |
| </head> |
| <body> |
| <canvas></canvas> |
| <div id="error"> |
| <h2>WebGPU not available</h2> |
| <p> |
| Make sure you are on a system with WebGPU enabled. In |
| Safari, first make sure the Developer Menu is visible (Preferences → |
| Advanced), then Develop → Experimental Features → Enable WebGPU. |
| </p> |
| </div> |
| </body> |
| </html> |
