blob: 67387125dd7d0f16a9501b8e20aeb6ace09c5161 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8">
<title>WebGPU Hello Triangles</title>
<meta name="assert" content="WebGPU correctly renders a green canvas.">
<link rel="match" href="draw-indexed-triangles-expected.html">
<p>Pass if square canvas below is completely green.</p>
<canvas width="400" height="400"></canvas>
<script src="js/webgpu-functions.js"></script>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
const shaderCode = `
#include <metal_stdlib>
using namespace metal;
struct VertexIn
{
float4 position [[attribute(0)]];
float green [[attribute(1)]];
};
struct VertexOut
{
float4 position [[position]];
float4 color;
};
vertex VertexOut vertex_main(VertexIn vertexIn [[stage_in]])
{
VertexOut vOut;
vOut.position = vertexIn.position;
vOut.color = float4(0, vertexIn.green, 0, 1);
return vOut;
}
fragment float4 fragment_main(VertexOut v [[stage_in]])
{
return v.color;
}
`
function createVertexBuffer(device) {
const vertexArray = new Float32Array([
// float4 xyzw, float g
-1, 1, 0, 1, 0,
-1, 1, 0, 1, 1,
-1, -1, 0, 1, 0,
-1, -1, 0, 1, 1,
1, 1, 0, 1, 0,
1, 1, 0, 1, 1,
1, -1, 0, 1, 0,
1, -1, 0, 1, 1
]);
return createBufferWithData(device, { size: vertexArray.byteLength, usage: GPUBufferUsage.VERTEX }, vertexArray.buffer);
}
const indexBufferOffset = 2048; // Test a buffer offset for index array.
const indexOffset = -9001; // Test a base index to add to index array values.
function createIndexBuffer(device) {
const offsetArray = [1, 3, 5, 3, 5, 7].map(v => { return v - indexOffset; });
const indexArray = new Uint32Array([1, 3, 5, 3, 5, 7].map(v => { return v - indexOffset; }));
const buffer = createBufferWithData(
device,
{
size: indexArray.byteLength + indexBufferOffset,
usage: GPUBufferUsage.INDEX
},
indexArray.buffer,
indexBufferOffset
);
return buffer;
}
function createVertexInputDescriptor() {
return {
indexFormat: "uint32",
vertexBuffers: [{
stride: 4 * 5,
attributeSet: [{
format: "float4",
shaderLocation: 0
}, {
offset: 4 * 4,
format: "float",
shaderLocation: 1
}]
}]
};
}
async function test() {
const device = await getBasicDevice();
const canvas = document.querySelector("canvas");
const swapChain = createBasicSwapChain(canvas, device);
// FIXME: Replace with non-MSL shaders.
const shaderModule = device.createShaderModule({ code: shaderCode });
const vertexBuffer = createVertexBuffer(device);
const indexBuffer = createIndexBuffer(device);
const pipeline = createBasicPipeline(shaderModule, device, null, null, createVertexInputDescriptor(), null, "triangle-list");
const commandEncoder = device.createCommandEncoder();
const passEncoder = beginBasicRenderPass(swapChain, commandEncoder);
passEncoder.setIndexBuffer(indexBuffer, indexBufferOffset);
passEncoder.setVertexBuffers(0, [vertexBuffer], [0]);
passEncoder.setPipeline(pipeline);
passEncoder.drawIndexed(6, 1, 0, indexOffset, 0);
passEncoder.endPass();
device.getQueue().submit([commandEncoder.finish()]);
vertexBuffer.destroy();
}
test().then(function() {
if (window.testRunner)
testRunner.notifyDone();
}, function() {
if (window.testRunner)
testRunner.notifyDone();
});
</script>