test_submit_render_multiple.html (3233B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" href="/tests/SimpleTest/test.css" /> 7 </head> 8 <body> 9 <canvas width=500 height=500></canvas> 10 </body> 11 <script> 12 ok( 13 SpecialPowers.getBoolPref("dom.webgpu.enabled"), 14 "Pref should be enabled." 15 ); 16 17 async function body() { 18 var triangleVertWGSL = `@vertex 19 fn main( 20 @builtin(vertex_index) VertexIndex : u32 21 ) -> @builtin(position) vec4f { 22 var pos = array<vec2f, 3>( 23 vec2(0.0, 0.5), 24 vec2(-0.5, -0.5), 25 vec2(0.5, -0.5) 26 ); 27 28 return vec4f(pos[VertexIndex], 0.0, 1.0); 29 } 30 `; 31 32 var redFragWGSL = `@fragment 33 fn main() -> @location(0) vec4f { 34 return vec4(1.0, 0.0, 0.0, 1.0); 35 }`; 36 37 const canvas = document.querySelector('canvas'); 38 const adapter = await navigator.gpu?.requestAdapter({ }); 39 const device = await adapter?.requestDevice(); 40 const context = canvas.getContext('webgpu'); 41 const devicePixelRatio = window.devicePixelRatio; 42 canvas.width = canvas.clientWidth * devicePixelRatio; 43 canvas.height = canvas.clientHeight * devicePixelRatio; 44 const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); 45 context.configure({ 46 device, 47 format: presentationFormat, 48 }); 49 const pipeline = device.createRenderPipeline({ 50 layout: 'auto', 51 vertex: { 52 module: device.createShaderModule({ 53 code: triangleVertWGSL, 54 }), 55 }, 56 fragment: { 57 module: device.createShaderModule({ 58 code: redFragWGSL, 59 }), 60 targets: [ 61 { 62 format: presentationFormat, 63 }, 64 ], 65 }, 66 primitive: { 67 topology: 'triangle-list', 68 }, 69 }); 70 71 function frame() { 72 const textureView = context.getCurrentTexture().createView(); 73 const renderPassDescriptor = { 74 colorAttachments: [ 75 { 76 view: textureView, 77 clearValue: [0, 0, 0, 0], // Clear to transparent 78 loadOp: 'clear', 79 storeOp: 'store', 80 }, 81 ], 82 }; 83 function make_cmd() { 84 const commandEncoder = device.createCommandEncoder(); 85 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); 86 passEncoder.setPipeline(pipeline); 87 passEncoder.draw(3); 88 passEncoder.end(); 89 return commandEncoder.finish(); 90 } 91 device.queue.submit([make_cmd(), make_cmd()]); 92 } 93 requestAnimationFrame(frame); 94 } 95 96 SimpleTest.waitForExplicitFinish(); 97 body() 98 .catch(e => ok(false, "Unhandled exception " + e)) 99 .finally(() => SimpleTest.finish()); 100 </script> 101 </html>