667a0a5a5720bbacae1a25489205ad53feb335f3
[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 const shaderCode = `
11 #include <metal_stdlib>
12     
13 using namespace metal;
14
15 struct VertexIn
16 {
17     float4 position [[attribute(0)]];
18     float green [[attribute(1)]];
19 };
20
21 struct VertexOut
22 {
23     float4 position [[position]];
24     float4 color;
25 };
26
27 vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]])
28 {
29     VertexOut vOut;
30     vOut.position = vertexIn.position;
31     vOut.color = float4(0, vertexIn.green, 0, 1);
32     return vOut;
33 }
34
35 fragment float4 fragment_main(VertexOut v [[stage_in]])
36 {
37     return v.color;
38 }
39 `
40
41 function createVertexBuffer(device) {
42     const bufferSize = 4 * 5 * 4;
43     const buffer = device.createBuffer({ size: bufferSize, usage: WebGPUBufferUsage.MAP_WRITE });
44     
45     let floatArray = new Float32Array(buffer.mapping);
46
47     const vertices = [
48         // float4 xyzw, float g
49         -1, 1, 0, 1, 1,
50         -1, -1, 0, 1, 1,
51         1, 1, 0, 1, 1,
52         1, -1, 0, 1, 1
53     ];
54
55     for (let i = 0; i < vertices.length; ++i) {
56         floatArray[i] = vertices[i];
57     }
58
59     return buffer;
60 }
61
62 function createInputStateDescriptor() {
63     return {
64         indexFormat: WebGPUIndexFormat.UINT32,
65         attributes: [{
66             shaderLocation: 0,
67             inputSlot: 0,
68             offset: 0,
69             format: WebGPUVertexFormat.FLOAT_R32_G32_B32_A32
70         }, {
71             shaderLocation: 1,
72             inputSlot: 0,
73             offset: 4 * 4,
74             format: WebGPUVertexFormat.FLOAT_R32
75         }],
76         inputs: [{
77             inputSlot: 0,
78             stride: 4 * 5,
79             stepMode: WebGPUInputStepMode.VERTEX
80         }]
81     }
82 }
83
84 async function test() {
85     const device = await getBasicDevice();
86     const canvas = document.querySelector("canvas");
87     const context = createBasicContext(canvas, device);
88     // FIXME: Replace with non-MSL shaders.
89     const shaderModule = device.createShaderModule({ code: shaderCode });
90     const vertexBuffer = createVertexBuffer(device);
91     const inputStateDescriptor = createInputStateDescriptor();
92     const pipeline = createBasicPipeline(shaderModule, device, null, inputStateDescriptor);
93     const commandBuffer = device.createCommandBuffer();
94     const passEncoder = beginBasicRenderPass(context, commandBuffer);
95     const endCommandBuffer = encodeBasicCommands(passEncoder, pipeline, vertexBuffer);
96     const queue = device.getQueue();
97
98     queue.submit([endCommandBuffer]);
99     context.present();
100 }
101
102 test();
103 </script>