| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>WebGPU copyExternalImageToTexture test</title> |
| <style type="text/css"> |
| .nomargin { |
| margin: 0px auto; |
| } |
| </style> |
| <script type="text/javascript" src="pixel_webgpu_util.js"></script> |
| <script type="text/javascript"> |
| var g_swapsBeforeAck = 15; |
| |
| function initPixelData(pixels, subRectangle, canvasWidth, bytesPerPixel, pixelValue) { |
| for (let i = subRectangle.y; i < subRectangle.y + subRectangle.height; i++) { |
| for (let j = subRectangle.x; j < subRectangle.x + subRectangle.width; j++) { |
| const pixelPos = i * canvasWidth + j; |
| pixels.set(new Uint8Array(pixelValue), pixelPos * bytesPerPixel); |
| } |
| } |
| } |
| |
| async function main() { |
| const canvas2d = document.getElementById('canvas_2d'); |
| const c2d = canvas2d.getContext("2d"); |
| if (!c2d) { |
| console.error('getContext(2d) failed'); |
| return null; |
| } |
| |
| if (typeof OffscreenCanvas === 'undefined') { |
| console.error('Browser not support OffscreenCanvas'); |
| return null; |
| } |
| |
| const gpuCanvas = document.getElementById('canvas_gpu'); |
| const [gpuDevice, gpuContext] = await webGpuUtils.init(gpuCanvas); |
| if (!gpuDevice || !gpuContext) { |
| console.error("Failed to initialize WebGPU - skipping test"); |
| domAutomationController.send("FAILURE"); |
| return; |
| } |
| |
| const bytesPerPixel = 4; // rgba8unorm |
| const pixelData = new Uint8ClampedArray(bytesPerPixel * canvas2d.width * canvas2d.height); |
| |
| // Green rectangle on top-left |
| initPixelData(pixelData, {x: 0, y: 0, width: 100, height: 100}, canvas2d.width, |
| bytesPerPixel, new Uint8Array([0, 255, 0, 255])); |
| |
| // Red rectangle on bottom-left |
| initPixelData(pixelData, {x: 0, y: 100, width: 100, height: 100}, canvas2d.width, |
| bytesPerPixel, new Uint8Array([255, 0, 0, 255])); |
| |
| // Yellow rectangle on bottom-right |
| initPixelData(pixelData, {x: 100, y: 100, width: 100, height: 100}, canvas2d.width, |
| bytesPerPixel, new Uint8Array([255, 255, 0, 255])); |
| |
| // Blue rectangle on top-right |
| initPixelData(pixelData, {x: 100, y: 0, width: 100, height: 100}, canvas2d.width, |
| bytesPerPixel, new Uint8Array([0, 0, 255, 255])); |
| |
| const imageData = new ImageData(pixelData, canvas2d.width, canvas2d.height); |
| const imageBitmap = await createImageBitmap(imageData); |
| |
| const renderCallback = function() { |
| c2d.drawImage(imageBitmap, 0, 0, canvas2d.width, canvas2d.height); |
| |
| webGpuUtils.uploadToGPUTextureTest(gpuDevice, gpuContext, imageBitmap); |
| |
| waitForFinish(); |
| }; |
| |
| window.requestAnimationFrame(renderCallback); |
| } |
| |
| function waitForFinish() { |
| if (g_swapsBeforeAck == 0) { |
| domAutomationController.send("SUCCESS"); |
| } else { |
| g_swapsBeforeAck--; |
| window.requestAnimationFrame(waitForFinish); |
| } |
| } |
| </script> |
| </head> |
| <body onload="main()"> |
| <canvas id="canvas_2d" width="200" height="200" class="nomargin"></canvas> |
| <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas> |
| </body> |
| </html> |
