blob: e3796a3757e5425db08b1432afeec6f413cd9db4 [file] [log] [blame]
sbarati@apple.combf41af12019-07-10 00:23:19 +00001<!DOCTYPE html>
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +00002<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>
11if (window.testRunner)
12 testRunner.waitUntilDone();
13
mmaxfield@apple.come7ba53b2019-06-26 19:35:26 +000014const canvas2d = document.querySelector("canvas");
15
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000016async function loadImage() {
17 const image = new Image();
18 image.src = "resources/green-400.png";
mmaxfield@apple.com58fa1652019-06-13 03:44:24 +000019 image.onload = function() {
mmaxfield@apple.come7ba53b2019-06-26 19:35:26 +000020 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.com58fa1652019-06-13 03:44:24 +000028 }, function() {
mmaxfield@apple.come7ba53b2019-06-26 19:35:26 +000029 drawGreenSquareInSoftware(canvas2d);
mmaxfield@apple.com58fa1652019-06-13 03:44:24 +000030 if (window.testRunner)
31 testRunner.notifyDone();
32 });
33 }
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000034}
35
mmaxfield@apple.come7ba53b2019-06-26 19:35:26 +000036async function test(device, image) {
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000037 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.comb7ffee82019-09-07 00:24:17 +000046 usage: GPUBufferUsage.COPY_SRC
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000047 };
justin_fan@apple.com52c5b6a2019-06-07 22:24:55 +000048 bufferA = createBufferWithData(device, bufferDescriptor, imageData.data.buffer);
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000049
justin_fan@apple.comb7ffee82019-09-07 00:24:17 +000050 bufferDescriptor.usage |= GPUBufferUsage.COPY_DST;
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000051 const bufferB = device.createBuffer(bufferDescriptor);
52 const bufferViewB = {
53 buffer: bufferB,
justin_fan@apple.com73c5df7a2019-03-06 23:57:58 +000054 rowPitch: image.width * 4,
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000055 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.com0d966272019-03-13 01:33:11 +000065 format: "rgba8unorm",
justin_fan@apple.comb7ffee82019-09-07 00:24:17 +000066 usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000067 };
68 const textureA = device.createTexture(textureDescriptor);
justin_fan@apple.comf9a2c462019-04-18 22:42:36 +000069 const textureViewA = { texture: textureA };
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000070
71 const textureB = device.createTexture(textureDescriptor);
justin_fan@apple.comf9a2c462019-04-18 22:42:36 +000072 const textureViewB = { texture: textureB };
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000073
74 const readBufferDescriptor = {
75 size: imageData.data.byteLength,
justin_fan@apple.comb7ffee82019-09-07 00:24:17 +000076 usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000077 };
78 const readBuffer = device.createBuffer(readBufferDescriptor);
79 const readBufferView = {
80 buffer: readBuffer,
justin_fan@apple.com73c5df7a2019-03-06 23:57:58 +000081 rowPitch: image.width * 4,
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000082 imageHeight: 0
83 };
84
justin_fan@apple.comaeece1f2019-03-14 23:04:18 +000085 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.com73c5df7a2019-03-06 23:57:58 +000092 bufferA.destroy();
93 bufferB.destroy();
94 textureA.destroy();
95 textureB.destroy();
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +000096
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.com73c5df7a2019-03-06 23:57:58 +0000105 readBuffer.destroy();
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +0000106 });
justin_fan@apple.com085ab3f2019-03-05 00:55:15 +0000107}
108
109loadImage();
110</script>
mmaxfield@apple.com58fa1652019-06-13 03:44:24 +0000111</body>