sbarati@apple.com | bf41af1 | 2019-07-10 00:23:19 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 2 | <meta charset="utf-8"> |
| 3 | <title>Basic Blitting</title> |
| 4 | <meta name="assert" content="Blit operations copy a green canvas."> |
| 5 | <link rel="match" href="blit-commands-expected.html"> |
| 6 | <p>Pass if square canvas below is completely green.</p> |
| 7 | <canvas width="400" height="400"></canvas> |
| 8 | <body> |
| 9 | <script src="js/webgpu-functions.js"></script> |
| 10 | <script> |
| 11 | if (window.testRunner) |
| 12 | testRunner.waitUntilDone(); |
| 13 | |
mmaxfield@apple.com | e7ba53b | 2019-06-26 19:35:26 +0000 | [diff] [blame] | 14 | const canvas2d = document.querySelector("canvas"); |
| 15 | |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 16 | async function loadImage() { |
| 17 | const image = new Image(); |
| 18 | image.src = "resources/green-400.png"; |
mmaxfield@apple.com | 58fa165 | 2019-06-13 03:44:24 +0000 | [diff] [blame] | 19 | image.onload = function() { |
mmaxfield@apple.com | e7ba53b | 2019-06-26 19:35:26 +0000 | [diff] [blame] | 20 | getBasicDevice().then(function(device) { |
| 21 | test(device, image).then(function() { |
| 22 | if (window.testRunner) |
| 23 | testRunner.notifyDone(); |
| 24 | }, function(e) { |
| 25 | if (window.testRunner) |
| 26 | testRunner.notifyDone(); |
| 27 | }); |
mmaxfield@apple.com | 58fa165 | 2019-06-13 03:44:24 +0000 | [diff] [blame] | 28 | }, function() { |
mmaxfield@apple.com | e7ba53b | 2019-06-26 19:35:26 +0000 | [diff] [blame] | 29 | drawGreenSquareInSoftware(canvas2d); |
mmaxfield@apple.com | 58fa165 | 2019-06-13 03:44:24 +0000 | [diff] [blame] | 30 | if (window.testRunner) |
| 31 | testRunner.notifyDone(); |
| 32 | }); |
| 33 | } |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 34 | } |
| 35 | |
mmaxfield@apple.com | e7ba53b | 2019-06-26 19:35:26 +0000 | [diff] [blame] | 36 | async function test(device, image) { |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 37 | canvas2d.width = image.width; |
| 38 | canvas2d.height = image.height; |
| 39 | const context2d = canvas2d.getContext('2d'); |
| 40 | context2d.drawImage(image, 0, 0); |
| 41 | |
| 42 | const imageData = context2d.getImageData(0, 0, image.width, image.height); |
| 43 | |
| 44 | const bufferDescriptor = { |
| 45 | size: imageData.data.byteLength, |
justin_fan@apple.com | b7ffee8 | 2019-09-07 00:24:17 +0000 | [diff] [blame] | 46 | usage: GPUBufferUsage.COPY_SRC |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 47 | }; |
justin_fan@apple.com | 52c5b6a | 2019-06-07 22:24:55 +0000 | [diff] [blame] | 48 | bufferA = createBufferWithData(device, bufferDescriptor, imageData.data.buffer); |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 49 | |
justin_fan@apple.com | b7ffee8 | 2019-09-07 00:24:17 +0000 | [diff] [blame] | 50 | bufferDescriptor.usage |= GPUBufferUsage.COPY_DST; |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 51 | const bufferB = device.createBuffer(bufferDescriptor); |
| 52 | const bufferViewB = { |
| 53 | buffer: bufferB, |
justin_fan@apple.com | 73c5df7a | 2019-03-06 23:57:58 +0000 | [diff] [blame] | 54 | rowPitch: image.width * 4, |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 55 | imageHeight: 0 |
| 56 | }; |
| 57 | |
| 58 | const textureSize = { |
| 59 | width: image.width, |
| 60 | height: image.height, |
| 61 | depth: 1 |
| 62 | }; |
| 63 | const textureDescriptor = { |
| 64 | size: textureSize, |
justin_fan@apple.com | 0d96627 | 2019-03-13 01:33:11 +0000 | [diff] [blame] | 65 | format: "rgba8unorm", |
justin_fan@apple.com | b7ffee8 | 2019-09-07 00:24:17 +0000 | [diff] [blame] | 66 | usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 67 | }; |
| 68 | const textureA = device.createTexture(textureDescriptor); |
justin_fan@apple.com | f9a2c46 | 2019-04-18 22:42:36 +0000 | [diff] [blame] | 69 | const textureViewA = { texture: textureA }; |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 70 | |
| 71 | const textureB = device.createTexture(textureDescriptor); |
justin_fan@apple.com | f9a2c46 | 2019-04-18 22:42:36 +0000 | [diff] [blame] | 72 | const textureViewB = { texture: textureB }; |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 73 | |
| 74 | const readBufferDescriptor = { |
| 75 | size: imageData.data.byteLength, |
justin_fan@apple.com | b7ffee8 | 2019-09-07 00:24:17 +0000 | [diff] [blame] | 76 | usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 77 | }; |
| 78 | const readBuffer = device.createBuffer(readBufferDescriptor); |
| 79 | const readBufferView = { |
| 80 | buffer: readBuffer, |
justin_fan@apple.com | 73c5df7a | 2019-03-06 23:57:58 +0000 | [diff] [blame] | 81 | rowPitch: image.width * 4, |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 82 | imageHeight: 0 |
| 83 | }; |
| 84 | |
justin_fan@apple.com | aeece1f | 2019-03-14 23:04:18 +0000 | [diff] [blame] | 85 | const commandEncoder = device.createCommandEncoder(); |
| 86 | commandEncoder.copyBufferToBuffer(bufferA, 0, bufferB, 0, imageData.data.byteLength); |
| 87 | commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize); |
| 88 | commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize); |
| 89 | commandEncoder.copyTextureToTexture(textureViewA, textureViewB, textureSize); |
| 90 | commandEncoder.copyTextureToBuffer(textureViewB, readBufferView, textureSize); |
| 91 | device.getQueue().submit([commandEncoder.finish()]); |
justin_fan@apple.com | 73c5df7a | 2019-03-06 23:57:58 +0000 | [diff] [blame] | 92 | bufferA.destroy(); |
| 93 | bufferB.destroy(); |
| 94 | textureA.destroy(); |
| 95 | textureB.destroy(); |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 96 | |
| 97 | const resultContext = document.querySelector('canvas').getContext('2d'); |
| 98 | |
| 99 | await readBuffer.mapReadAsync().then(ab => { |
| 100 | const array = new Uint8ClampedArray(ab); |
| 101 | const resultImageData = new ImageData(array, image.width, image.height); |
| 102 | |
| 103 | resultContext.putImageData(resultImageData, 0, 0); |
| 104 | |
justin_fan@apple.com | 73c5df7a | 2019-03-06 23:57:58 +0000 | [diff] [blame] | 105 | readBuffer.destroy(); |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 106 | }); |
justin_fan@apple.com | 085ab3f | 2019-03-05 00:55:15 +0000 | [diff] [blame] | 107 | } |
| 108 | |
| 109 | loadImage(); |
| 110 | </script> |
mmaxfield@apple.com | 58fa165 | 2019-06-13 03:44:24 +0000 | [diff] [blame] | 111 | </body> |