c665f57f0fba58db786d5f0484b9ef67187994cc
[WebKit-https.git] / LayoutTests / webgpu / blend-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="blend-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 positionAttributeNum = 0;
14
15 const shaderCode = `
16 #include <metal_stdlib>
17     
18 using namespace metal;
19
20 struct VertexIn
21 {
22     float4 position [[attribute(${positionAttributeNum})]];
23 };
24
25 struct VertexOut
26 {
27     float4 position [[position]];
28     float4 color;
29 };
30
31 vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]])
32 {
33     VertexOut vOut;
34     vOut.position = vertexIn.position;
35     vOut.color = float4(0, 0.5, 0, 0.5);
36     return vOut;
37 }
38
39 fragment float4 fragment_main(VertexOut v [[stage_in]])
40 {
41     return v.color;
42 }
43 `;
44
45 const canvas = document.querySelector("canvas");
46
47 async function start(device) {
48     const shaderModule = device.createShaderModule({ code: shaderCode });
49
50     const colorStates = [{
51         format: "bgra8unorm",
52         alphaBlend: { dstFactor: "one" },
53         colorBlend: { dstFactor: "one" }
54     }];
55
56     const vertexInputDescriptor = {
57         indexFormat: "uint32",
58         vertexBuffers: [{
59             stride: 4 * 4,
60             attributeSet: [{
61                 format: "float4",
62                 shaderLocation: positionAttributeNum
63             }]
64         }]
65     };
66
67     const pipeline = createBasicPipeline(shaderModule, device, colorStates, null, vertexInputDescriptor);
68
69     const vertexData = new Float32Array([
70         -1, 1, 0, 1,
71         -1, -1, 0, 1,
72         1, 1, 0, 1,
73         1, -1, 0, 1
74     ]);
75     const vertexBuffer = createBufferWithData(device, { size: vertexData.byteLength, usage: GPUBufferUsage.VERTEX }, vertexData.buffer);
76
77     const context = canvas.getContext("gpu");
78     const swapChain = context.configureSwapChain({ device: device, format: "bgra8unorm" });
79     const colorAttachment = {
80         attachment: swapChain.getCurrentTexture().createDefaultView(),
81         loadOp: "clear",
82         storeOp: "store",
83         clearColor: { r: 0, g: 0, b: 0, a: 0 }
84     };
85
86     const commandEncoder = device.createCommandEncoder();
87     const passEncoder = commandEncoder.beginRenderPass({ colorAttachments: [colorAttachment] });
88     passEncoder.setPipeline(pipeline);
89     passEncoder.setVertexBuffers(0, [vertexBuffer], [0]);
90     passEncoder.draw(4, 1, 0, 0);
91     passEncoder.draw(4, 1, 0, 0);
92     passEncoder.endPass();
93
94     device.getQueue().submit([commandEncoder.finish()]);
95 }
96
97 getBasicDevice().then(function(device) {
98     start(device).then(function() {
99         if (window.testRunner)
100             testRunner.notifyDone();
101     }, function() {
102         if (window.testRunner)
103             testRunner.notifyDone();
104     });
105 }, function() {
106     drawGreenSquareInSoftware(canvas);
107     if (window.testRunner)
108         testRunner.notifyDone();
109 });
110 </script>