REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer...
[WebKit-https.git] / LayoutTests / webgpu / vertex-buffer-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     float green [[attribute(1)]];
22 };
23
24 struct VertexOut
25 {
26     float4 position [[position]];
27     float4 color;
28 };
29
30 vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]])
31 {
32     VertexOut vOut;
33     vOut.position = vertexIn.position;
34     vOut.color = float4(0, vertexIn.green, 0, 1);
35     return vOut;
36 }
37
38 fragment float4 fragment_main(VertexOut v [[stage_in]])
39 {
40     return v.color;
41 }
42 `
43
44 function createVertexBuffer(device) {
45     const vertexArray = new Float32Array([
46         // float4 xyzw, float g
47         -1, 1, 0, 1, 1,
48         -1, -1, 0, 1, 1,
49         1, 1, 0, 1, 1,
50         1, -1, 0, 1, 1
51     ]);
52
53     return createBufferWithData(
54         device, 
55         { 
56             size: vertexArray.byteLength, 
57             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.MAP_WRITE
58         },
59         vertexArray.buffer
60     );
61 }
62
63 function createVertexInputDescriptor() {
64     return {
65         vertexBuffers: [{
66             stride: 4 * 5,
67             attributeSet: [{
68                 format: "float4",
69                 shaderLocation: 0
70             }, {
71                 offset: 4 * 4,
72                 format: "float",
73                 shaderLocation: 1
74             }]
75         }]
76     }
77 }
78
79 const canvas = document.querySelector("canvas");
80
81 async function test(device) {
82     const swapChain = createBasicSwapChain(canvas, device);
83     // FIXME: Replace with non-MSL shaders.
84     const shaderModule = device.createShaderModule({ code: shaderCode });
85     const vertexBuffer = createVertexBuffer(device);
86     const vertexInputDescriptor = createVertexInputDescriptor();
87     const pipeline = createBasicPipeline(shaderModule, device, null, null, vertexInputDescriptor);
88     const commandEncoder = device.createCommandEncoder();
89     const passEncoder = beginBasicRenderPass(swapChain, commandEncoder);
90     encodeBasicCommands(passEncoder, pipeline, vertexBuffer);
91     const queue = device.getQueue();
92     queue.submit([commandEncoder.finish()]);
93     vertexBuffer.destroy();
94 }
95
96 getBasicDevice().then(function(device) {
97     test(device).then(function() {
98         if (window.testRunner)
99             testRunner.notifyDone();
100     }, function() {
101         if (window.testRunner)
102             testRunner.notifyDone();
103     });
104 }, function() {
105     drawGreenSquareInSoftware(canvas);
106     if (window.testRunner)
107         testRunner.notifyDone();
108 });
109 </script>