dom/canvas/test/webgl-conf/checkout/conformance2/rendering/blitframebuffer-scissor-enabled.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL BlitFramebuffer Tests</title>
  12 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13 <script src="../../js/js-test-pre.js"></script>
  14 <script src="../../js/webgl-test-utils.js"></script>
  15 </head>
  16 <body>
  17 <canvas id="example" width="8" height="8"></canvas>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20
  21 <script>
  22 "use strict";
  23
  24 var wtu = WebGLTestUtils;
  25 description("This test verifies the functionality of blitFramebuffer when scissor test is enabled.");
  26
  27 var gl = wtu.create3DContext("example", undefined, 2);
  28
  29 // Define the src region and dst region for blitFramebuffer
  30 var blit_src = [0, 0, 4, 4];
  31 var blit_dst = [2, 2, 6, 6];
  32
  33 if (!gl) {
  34     testFailed("WebGL context does not exist");
  35 } else {
  36     testPassed("WebGL context exists");
  37
  38     var bounds = [
  39         [0, 0, 4, 4], // Partially intersects with blitFramebuffer's dst region
  40         [0, 0, 2, 2], // No intersection with blitFramebuffer's dst region
  41     ];
  42
  43     // We can compute the real drawing area by intersecting the scissor bound with dst region of blitting.
  44     var intersections = [
  45         [2, 2, 4, 4],
  46         [0, 0, 0, 0],
  47     ];
  48
  49     for (var ii = 0; ii < bounds.length; ++ii) {
  50         blitframebuffer_scissor(gl.RGBA8, gl.RGBA8, bounds[ii], intersections[ii]);
  51         blitframebuffer_scissor(gl.RGBA8, gl.SRGB8_ALPHA8, bounds[ii], intersections[ii]);
  52         blitframebuffer_scissor(gl.SRGB8_ALPHA8, gl.RGBA8, bounds[ii], intersections[ii]);
  53         blitframebuffer_scissor(gl.SRGB8_ALPHA8, gl.SRGB8_ALPHA8, bounds[ii], intersections[ii]);
  54     }
  55 }
  56
  57 function checkPixel(color, expectedColor) {
  58   var tolerance = 3;
  59   return (Math.abs(color[0] - expectedColor[0]) <= tolerance &&
  60           Math.abs(color[1] - expectedColor[1]) <= tolerance &&
  61           Math.abs(color[2] - expectedColor[2]) <= tolerance &&
  62           Math.abs(color[3] - expectedColor[3]) <= tolerance);
  63 }
  64
  65 function blitframebuffer_scissor(readbufferFormat, drawbufferFormat, bound, intersection) {
  66     debug("");
  67     debug("read buffer format is: " + wtu.glEnumToString(gl, readbufferFormat) + ", draw buffer format is: " + wtu.glEnumToString(gl, drawbufferFormat));
  68
  69
  70     // Initiate data to read framebuffer
  71     var size = 8;
  72     var data = new Uint8Array(size * size * 4);
  73     var color = [250, 100, 15, 255];
  74     for (var ii = 0; ii < size * size * 4; ii += 4) {
  75         for (var jj = 0; jj < 4; ++jj) {
  76           data[ii + jj] = color[jj];
  77         }
  78     }
  79
  80     // Feed data to read buffer. Feed 0 to draw buffer.
  81     var tex_read = gl.createTexture();
  82     gl.bindTexture(gl.TEXTURE_2D, tex_read);
  83     gl.texImage2D(gl.TEXTURE_2D, 0, readbufferFormat, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  84
  85     var fbo_read = gl.createFramebuffer();
  86     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_read);
  87     gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex_read, 0);
  88
  89     var tex_draw = gl.createTexture();
  90     gl.bindTexture(gl.TEXTURE_2D, tex_draw);
  91     gl.texImage2D(gl.TEXTURE_2D, 0, drawbufferFormat, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  92
  93     var fbo_draw = gl.createFramebuffer();
  94     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo_draw);
  95     gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex_draw, 0);
  96     if (gl.checkFramebufferStatus(gl.READ_FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE || gl.checkFramebufferStatus(gl.DRAW_FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
  97         testFailed("Framebuffer incomplete.");
  98         return;
  99     }
 100
 101     // Enable scissor test. Then blit framebuffer.
 102     gl.enable(gl.SCISSOR_TEST);
 103     gl.scissor(bound[0], bound[1], bound[2], bound[3]);
 104     gl.blitFramebuffer(blit_src[0], blit_src[1], blit_src[2], blit_src[3], blit_dst[0], blit_dst[1], blit_dst[2], blit_dst[3], gl.COLOR_BUFFER_BIT, gl.LINEAR);
 105     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "blitframebuffer should succeed");
 106
 107     // Read pixels and Comparison
 108     var pixels = new Uint8Array(size * size * 4);
 109     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_draw);
 110     gl.readPixels(0, 0, size, size, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
 111     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "readPixels should succeed");
 112
 113     var blitColor;
 114     var expectedColor;
 115     var clearColor = [0, 0, 0, 0];
 116
 117     if (readbufferFormat == drawbufferFormat) {
 118         blitColor = color;
 119     } else if (readbufferFormat == gl.SRGB8_ALPHA8) {
 120         blitColor = wtu.sRGBToLinear(color);
 121     } else {
 122         blitColor = wtu.linearToSRGB(color);
 123     }
 124
 125     var failed = false;
 126     for (var ii = 0; ii < size; ++ii) {
 127         for (var jj = 0; jj < size; ++jj) {
 128             if (ii >= intersection[0] && jj >= intersection[1] && ii < intersection[2] && jj < intersection[3]) {
 129                 expectedColor = blitColor;
 130             } else {
 131                 expectedColor = clearColor;
 132             }
 133             var index = (ii * size + jj) * 4;
 134             var pixelColor = [pixels[index], pixels[index + 1], pixels[index + 2], pixels[index + 3]];
 135             if (checkPixel(pixelColor, expectedColor) == false) {
 136                 failed = true;
 137                 debug("Pixels comparison failed. Pixel at [" + jj + ", " + ii + "] should be (" + expectedColor + "), but the actual color is (" + pixelColor + ")");
 138             }
 139         }
 140     }
 141     if (failed == false) {
 142         testPassed("All pixels comparision passed!");
 143     }
 144
 145     // Deinit
 146     gl.bindTexture(gl.TEXTURE_2D, null);
 147     gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
 148     gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
 149     gl.deleteFramebuffer(fbo_read);
 150     gl.deleteFramebuffer(fbo_draw);
 151     gl.deleteTexture(tex_read);
 152     gl.deleteTexture(tex_draw);
 153 };
 154
 155 var successfullyParsed = true;
 156 </script>
 157 <script src="../../js/js-test-post.js"></script>
 158
 159 </body>
 160 </html>