blob: 2315adf3dbbb02ee58ea7afc40cc57d58c1432d9 [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="viewport-scissor-rect-triangle-strip-expected.html">
<p>Pass if square canvas below is a 4 by 4 blue/green checkerboard.</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 Vertex
{
float4 position [[position]];
};
vertex Vertex vertex_main(uint vid [[vertex_id]])
{
Vertex v;
switch (vid) {
case 0:
v.position = float4(-1, 1, 0, 1);
break;
case 1:
v.position = float4(-1, -1, 0, 1);
break;
case 2:
v.position = float4(1, 1, 0, 1);
break;
default:
v.position = float4(1, -1, 0, 1);
}
return v;
}
fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
{
return float4(0.0, 1.0, 0.0, 1.0);
}
`;
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 pipeline = createBasicPipeline(shaderModule, device);
const commandEncoder = device.createCommandEncoder();
const blueAttachment = {
attachment: swapChain.getCurrentTexture().createDefaultView(),
loadOp: "clear",
storeOp: "store",
clearColor: { r: 0, g: 0, b: 1, a: 1 }
};
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments: [blueAttachment] });
passEncoder.setPipeline(pipeline);
function drawViewport(x, y) {
passEncoder.setViewport(x, y, 100, 100, 0, 1);
passEncoder.draw(4, 1, 0, 0);
}
function drawScissorRect(x, y) {
passEncoder.setScissorRect(x, y, 100, 100);
passEncoder.draw(4, 1, 0, 0);
}
passEncoder.setScissorRect(0, 0, 200, 400);
drawViewport(100, 0);
drawViewport(0, 100);
drawViewport(100, 200);
drawViewport(0, 300);
// Draw outside of scissor rect should not appear.
drawViewport(200, 100);
passEncoder.setViewport(200, 0, 200, 400, 0, 1);
drawScissorRect(300, 0);
drawScissorRect(200, 100);
drawScissorRect(300, 200);
drawScissorRect(200, 300);
// Draw outside of viewport should not appear.
drawScissorRect(0, 0);
passEncoder.endPass();
const queue = device.getQueue();
queue.submit([commandEncoder.finish()]);
requestAnimationFrame(() => {
if (window.testRunner)
testRunner.notifyDone();
});
}
test();
</script>