| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Basic Blitting</title> |
| <meta name="assert" content="Blit operations copy a green canvas."> |
| <link rel="match" href="blit-commands-expected.html"> |
| <p>Pass if square canvas below is completely green.</p> |
| <canvas width="400" height="400"></canvas> |
| <body> |
| <script src="js/webgpu-functions.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| const canvas2d = document.querySelector("canvas"); |
| |
| async function loadImage() { |
| const image = new Image(); |
| image.src = "resources/green-400.png"; |
| image.onload = function() { |
| getBasicDevice().then(function(device) { |
| test(device, image).then(function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, function(e) { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }, function() { |
| drawGreenSquareInSoftware(canvas2d); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| } |
| } |
| |
| async function test(device, image) { |
| canvas2d.width = image.width; |
| canvas2d.height = image.height; |
| const context2d = canvas2d.getContext('2d'); |
| context2d.drawImage(image, 0, 0); |
| |
| const imageData = context2d.getImageData(0, 0, image.width, image.height); |
| |
| const bufferDescriptor = { |
| size: imageData.data.byteLength, |
| usage: GPUBufferUsage.TRANSFER_SRC |
| }; |
| bufferA = createBufferWithData(device, bufferDescriptor, imageData.data.buffer); |
| |
| bufferDescriptor.usage |= GPUBufferUsage.TRANSFER_DST; |
| const bufferB = device.createBuffer(bufferDescriptor); |
| const bufferViewB = { |
| buffer: bufferB, |
| rowPitch: image.width * 4, |
| imageHeight: 0 |
| }; |
| |
| const textureSize = { |
| width: image.width, |
| height: image.height, |
| depth: 1 |
| }; |
| const textureDescriptor = { |
| size: textureSize, |
| format: "rgba8unorm", |
| usage: GPUTextureUsage.TRANSFER_SRC | GPUTextureUsage.TRANSFER_DST |
| }; |
| const textureA = device.createTexture(textureDescriptor); |
| const textureViewA = { texture: textureA }; |
| |
| const textureB = device.createTexture(textureDescriptor); |
| const textureViewB = { texture: textureB }; |
| |
| const readBufferDescriptor = { |
| size: imageData.data.byteLength, |
| usage: GPUBufferUsage.TRANSFER_DST | GPUBufferUsage.MAP_READ |
| }; |
| const readBuffer = device.createBuffer(readBufferDescriptor); |
| const readBufferView = { |
| buffer: readBuffer, |
| rowPitch: image.width * 4, |
| imageHeight: 0 |
| }; |
| |
| const commandEncoder = device.createCommandEncoder(); |
| commandEncoder.copyBufferToBuffer(bufferA, 0, bufferB, 0, imageData.data.byteLength); |
| commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize); |
| commandEncoder.copyBufferToTexture(bufferViewB, textureViewA, textureSize); |
| commandEncoder.copyTextureToTexture(textureViewA, textureViewB, textureSize); |
| commandEncoder.copyTextureToBuffer(textureViewB, readBufferView, textureSize); |
| device.getQueue().submit([commandEncoder.finish()]); |
| bufferA.destroy(); |
| bufferB.destroy(); |
| textureA.destroy(); |
| textureB.destroy(); |
| |
| const resultContext = document.querySelector('canvas').getContext('2d'); |
| |
| await readBuffer.mapReadAsync().then(ab => { |
| const array = new Uint8ClampedArray(ab); |
| const resultImageData = new ImageData(array, image.width, image.height); |
| |
| resultContext.putImageData(resultImageData, 0, 0); |
| |
| readBuffer.destroy(); |
| }); |
| } |
| |
| loadImage(); |
| </script> |
| </body> |
