blob: 1a09e46e4dfaa00995a78b1701419d84d2227478 [file] [log] [blame]
<!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&amp;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>