94b99b179dd226340580be1e0861abdecfe7bc26
[WebKit-https.git] / LayoutTests / webgpu / depth-enabled-triangle-strip.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>WebGPU Hello Triangles</title>
4 <meta name="assert" content="WebGPU correctly renders a green canvas.">
5 <link rel="match" href="vertex-buffer-triangle-strip-expected.html">
6 <p>Pass if square canvas below is completely green.</p>
7 <canvas width="400" height="400"></canvas>
8 <script src="js/webgpu-functions.js"></script>
9 <script>
10 if (window.testRunner)
11     testRunner.waitUntilDone();
12
13 const shaderCode = `
14 #include <metal_stdlib>
15     
16 using namespace metal;
17
18 struct VertexIn
19 {
20     float4 position [[attribute(0)]];
21 };
22
23 struct VertexOut
24 {
25     float4 position [[position]];
26     float4 color;
27 };
28
29 vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]], uint iid [[instance_id]])
30 {
31     VertexOut vOut;
32     vOut.position = vertexIn.position;
33
34     if (iid == 0) {
35         vOut.position.z = 0.5;
36         vOut.color = float4(1, 0, 0, 1);
37     } else {
38         vOut.color = float4(0, 1, 0, 1);
39     }
40
41     return vOut;
42 }
43
44 fragment float4 fragment_main(VertexOut v [[stage_in]])
45 {
46     return v.color;
47 }
48 `
49
50 function createVertexBuffer(device) {
51     const vertexArray = new Float32Array([
52         // float4 xyzw
53         -1, 1, 0, 1,
54         -1, -1, 0, 1,
55         1, 1, 0, 1,
56         1, -1, 0, 1
57     ]);
58     return createBufferWithData(device, { size: vertexArray.byteLength, usage: GPUBufferUsage.VERTEX }, vertexArray.buffer);
59 }
60
61 function createVertexInputDescriptor() {
62     return {
63         indexFormat: "uint32",
64         vertexBuffers: [{
65             stride: 4 * 4,
66             attributeSet: [{
67                 format: "float4",
68                 shaderLocation: 0
69             }]
70         }]
71     }
72 }
73
74 async function test() {
75     const device = await getBasicDevice();
76     const canvas = document.querySelector("canvas");
77     const swapChain = createBasicSwapChain(canvas, device);
78     // FIXME: Replace with non-MSL shaders.
79     const shaderModule = device.createShaderModule({ code: shaderCode });
80     const vertexBuffer = createVertexBuffer(device);
81     const vertexInputDescriptor = createVertexInputDescriptor();
82     const depthStateDescriptor = createBasicDepthStateDescriptor();
83     const pipeline = createBasicPipeline(shaderModule, device, null, null, vertexInputDescriptor, depthStateDescriptor);
84     const commandEncoder = device.createCommandEncoder();
85
86     const basicAttachment = {
87         attachment: swapChain.getCurrentTexture().createDefaultView(),
88         loadOp: "clear",
89         storeOp: "store",
90         clearColor: { r: 1.0, g: 0, b: 0, a: 1.0 }
91     };
92
93     const depthAttachment = {
94         attachment: createBasicDepthTexture(canvas, device).createDefaultView(),
95         depthLoadOp: "clear",
96         depthStoreOp: "store",
97         clearDepth: 1.0
98     };
99
100     const encoder = commandEncoder.beginRenderPass({
101         colorAttachments: [basicAttachment],
102         depthStencilAttachment: depthAttachment
103     });
104
105     encoder.setVertexBuffers(0, [vertexBuffer], [0]);
106     encoder.setPipeline(pipeline);
107     encoder.draw(4, 2, 0, 0);
108     encoder.endPass();
109
110     device.getQueue().submit([commandEncoder.finish()]);
111 }
112
113 test().then(function() {
114     if (window.testRunner)
115         testRunner.notifyDone();
116 }, function() {
117     if (window.testRunner)
118         testRunner.notifyDone();
119 });
120 </script>