| <!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-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 positionAttributeNum = 0; |
| |
| const shaderCode = ` |
| struct VertexOut |
| { |
| float4 position : SV_Position; |
| float4 color : attribute(0); |
| }; |
| |
| vertex VertexOut vertex_main(float4 position : attribute(${positionAttributeNum})) { |
| VertexOut vOut; |
| vOut.position = position; |
| vOut.color = float4(0, 0.5, 0, 0.5); |
| return vOut; |
| } |
| |
| fragment float4 fragment_main(float4 color : attribute(0)) : SV_Target 0 |
| { |
| return color; |
| } |
| `; |
| |
| const canvas = document.querySelector("canvas"); |
| |
| async function start(device) { |
| const shaderModule = device.createShaderModule({ code: shaderCode }); |
| |
| const colorStates = [{ |
| format: "bgra8unorm", |
| alphaBlend: { dstFactor: "one" }, |
| colorBlend: { dstFactor: "one" } |
| }]; |
| |
| const vertexInputDescriptor = { |
| indexFormat: "uint32", |
| vertexBuffers: [{ |
| stride: 4 * 4, |
| attributeSet: [{ |
| format: "float4", |
| shaderLocation: positionAttributeNum |
| }] |
| }] |
| }; |
| |
| const pipeline = createBasicPipeline(shaderModule, device, colorStates, null, vertexInputDescriptor); |
| |
| const vertexData = new Float32Array([ |
| -1, 1, 0, 1, |
| -1, -1, 0, 1, |
| 1, 1, 0, 1, |
| 1, -1, 0, 1 |
| ]); |
| const vertexBuffer = createBufferWithData(device, { size: vertexData.byteLength, usage: GPUBufferUsage.VERTEX }, vertexData.buffer); |
| |
| const context = canvas.getContext("gpu"); |
| const swapChain = context.configureSwapChain({ device: device, format: "bgra8unorm" }); |
| const colorAttachment = { |
| attachment: swapChain.getCurrentTexture().createDefaultView(), |
| loadOp: "clear", |
| storeOp: "store", |
| clearColor: { r: 0, g: 0, b: 0, a: 0 } |
| }; |
| |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = commandEncoder.beginRenderPass({ colorAttachments: [colorAttachment] }); |
| passEncoder.setPipeline(pipeline); |
| passEncoder.setVertexBuffers(0, [vertexBuffer], [0]); |
| passEncoder.draw(4, 1, 0, 0); |
| passEncoder.draw(4, 1, 0, 0); |
| passEncoder.endPass(); |
| |
| device.getQueue().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> |
