1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123


content / test / data / gpu / pixel_webgpu_copy_externalImage_webgpu_canvas.html [blame]

<!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 getInitGPUCanvasData(width, height) {
      const rectWidth = Math.floor(width / 2);
      const rectHeight = Math.floor(height / 2);

      const alphaValue = 255;
      const colorValue = 255;

      // BGRA8Unorm texture
      const initialData = new Uint8ClampedArray(4 * width * height);
      const maxRectHeightIndex = width * rectHeight;
      for (let pixelIndex = 0; pixelIndex < initialData.length / 4; ++pixelIndex) {
        const index = pixelIndex * 4;

        // Top-half two rectangles
        if (pixelIndex < maxRectHeightIndex) {
          // top-left side rectangle
          if (pixelIndex % width < rectWidth) {
            // top-left side rectangle
            initialData[index] = colorValue;
            initialData[index + 1] = 0;
            initialData[index + 2] = 0;
            initialData[index + 3] = alphaValue;
          } else {
            // top-right side rectangle
            initialData[index] = 0;
            initialData[index + 1] = colorValue;
            initialData[index + 2] = 0;
            initialData[index + 3] = alphaValue;
          }
        } else { // Bottom-half two rectangles
          // bottom-left side rectangle
          if (pixelIndex % width < rectWidth) {
            initialData[index] = 0;
            initialData[index + 1] = 0;
            initialData[index + 2] = colorValue;
            initialData[index + 3] = alphaValue;
          } else {
            // bottom-right side rectangle
            initialData[index] = 0;
            initialData[index + 1] = 0;
            initialData[index + 2] = 0;
            initialData[index + 3] = alphaValue;
          }
        }
      }
      return initialData;
    }

    async function main() {

      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 gpuCanvasSource = document.getElementById('canvas_gpu_src');
      const gpuContextSource = gpuCanvasSource.getContext('webgpu');
      if (!gpuContext) {
        console.error('getContext(webgpu) failed');
        domAutomationController.send("FAILURE");
        return;
      }

      gpuContextSource.configure({
        device: gpuDevice,
        format: "bgra8unorm",
        usage: GPUTextureUsage.COPY_DST
      });

      const initialData = getInitGPUCanvasData(gpuCanvasSource.width, gpuCanvasSource.height);
      let canvasTexture = gpuContextSource.getCurrentTexture();
      gpuDevice.queue.writeTexture(
        { texture: canvasTexture},
        initialData,
        {
          bytesPerRow: gpuCanvasSource.width * 4,
          rowsPerImage: gpuCanvasSource.height,
        },
        {
          width: gpuCanvasSource.width, height: gpuCanvasSource.height, depthOrArrayLayers: 1,
        }
      );

      const renderCallback = function() {
        webGpuUtils.uploadToGPUTextureTest(gpuDevice, gpuContext, gpuCanvasSource);

        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_gpu_src" width="200" height="200" class="nomargin"></canvas>
  <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>
</html>