| <!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="blend-color-triangle-strip-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 = ` |
| vertex float4 vertex_main(uint vid : SV_VertexID) : SV_Position { |
| float4 result; |
| switch (vid) { |
| case 0: |
| result = float4(-1, 1, 0, 1); |
| break; |
| case 1: |
| result = float4(-1, -1, 0, 1); |
| break; |
| case 2: |
| result = float4(1, 1, 0, 1); |
| break; |
| default: |
| result = float4(1, -1, 0, 1); |
| break; |
| } |
| return result; |
| } |
| |
| fragment float4 fragment_main() : SV_Target 0 { |
| return float4(0, 1, 1, 1); |
| } |
| `; |
| |
| const canvas = document.querySelector("canvas"); |
| |
| async function start(device) { |
| const swapChain = createBasicSwapChain(canvas, device); |
| // FIXME: Replace with non-MSL shaders. |
| const shaderModule = device.createShaderModule({ code: shaderCode }); |
| |
| const colorStates = [{ |
| format: "bgra8unorm", |
| alphaBlend: { |
| srcFactor: "blend-color", |
| dstFactor: "blend-color", |
| operation: "add" |
| }, |
| colorBlend: { |
| srcFactor: "blend-color", |
| dstFactor: "blend-color", |
| operation: "add" |
| }, |
| writeMask: GPUColorWrite.ALL |
| }]; |
| |
| const pipeline = createBasicPipeline(shaderModule, device, colorStates); |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = beginBasicRenderPass(swapChain, commandEncoder); |
| passEncoder.setBlendColor({ r: 0, g: 1, b: 0, a: 1 }); |
| encodeBasicCommands(passEncoder, pipeline); |
| const queue = device.getQueue(); |
| |
| queue.submit([commandEncoder.finish()]); |
| } |
| |
| getBasicDevice().then(function(device) { |
| start(device).then(function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }, function() { |
| drawGreenSquareInSoftware(canvas); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
