REGRESSION: ( r246394 ) webgpu/whlsl-buffer-fragment.html and webgpu/whlsl-buffer...
[WebKit-https.git] / LayoutTests / webgpu / draw-indexed-triangles.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="draw-indexed-triangles-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, 0,
48         -1, 1, 0, 1, 1,
49         -1, -1, 0, 1, 0,
50         -1, -1, 0, 1, 1,
51         1, 1, 0, 1, 0,
52         1, 1, 0, 1, 1,
53         1, -1, 0, 1, 0,
54         1, -1, 0, 1, 1
55     ]);
56     return createBufferWithData(device, { size: vertexArray.byteLength, usage: GPUBufferUsage.VERTEX }, vertexArray.buffer);
57 }
58
59 const indexBufferOffset = 2048; // Test a buffer offset for index array.
60 const indexOffset = -9001; // Test a base index to add to index array values.
61
62 function createIndexBuffer(device) {
63     const offsetArray = [1, 3, 5, 3, 5, 7].map(v => { return v - indexOffset; });
64     const indexArray = new Uint32Array([1, 3, 5, 3, 5, 7].map(v => { return v - indexOffset; }));
65     const buffer = createBufferWithData(
66         device, 
67         { 
68             size: indexArray.byteLength + indexBufferOffset, 
69             usage: GPUBufferUsage.INDEX 
70         },
71         indexArray.buffer,
72         indexBufferOffset
73     );
74
75     return buffer;
76 }
77
78 function createVertexInputDescriptor() {
79     return {
80         indexFormat: "uint32",
81         vertexBuffers: [{
82             stride: 4 * 5,
83             attributeSet: [{
84                 format: "float4",
85                 shaderLocation: 0
86             }, {
87                 offset: 4 * 4,
88                 format: "float",
89                 shaderLocation: 1
90             }]
91         }]
92     };
93 }
94
95 const canvas = document.querySelector("canvas");
96
97 async function test(device) {
98     const swapChain = createBasicSwapChain(canvas, device);
99     // FIXME: Replace with non-MSL shaders.
100     const shaderModule = device.createShaderModule({ code: shaderCode });
101     const vertexBuffer = createVertexBuffer(device);
102     const indexBuffer = createIndexBuffer(device);
103     const pipeline = createBasicPipeline(shaderModule, device, null, null, createVertexInputDescriptor(), null, "triangle-list");
104     const commandEncoder = device.createCommandEncoder();
105     const passEncoder = beginBasicRenderPass(swapChain, commandEncoder);
106
107     passEncoder.setIndexBuffer(indexBuffer, indexBufferOffset);
108     passEncoder.setVertexBuffers(0, [vertexBuffer], [0]);
109     passEncoder.setPipeline(pipeline);
110     passEncoder.drawIndexed(6, 1, 0, indexOffset, 0);
111     passEncoder.endPass();
112
113     device.getQueue().submit([commandEncoder.finish()]);
114     vertexBuffer.destroy();
115 }
116
117 getBasicDevice().then(function(device) {
118     test(device).then(function() {
119         if (window.testRunner)
120             testRunner.notifyDone();
121     }, function() {
122         if (window.testRunner)
123             testRunner.notifyDone();
124     });
125 }, function() {
126     drawGreenSquareInSoftware(canvas);
127     if (window.testRunner)
128         testRunner.notifyDone();
129 });
130 </script>