dom/canvas/test/webgl-conf/checkout/conformance2/rendering/clearbuffer-and-draw.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>Test clearBuffer with drawing</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 onload="runTest()">
  17 <div id="description"></div>
  18 <div id="console"></div>
  19 <canvas id="canvas" width="64" height="64" style="position:fixed;left:0;top:0"> </canvas>
  20 <script>
  21 "use strict";
  22 description("This tests the operation of clearBuffer followed by a draw call.");
  23
  24 debug("Verifies that these combined with preserveDrawingBuffer's implicit clears work properly together.");
  25 debug("Regression test for <a href='http://crbug.com/828262'>Chromium bug 828262</a>.");
  26
  27 var wtu = WebGLTestUtils;
  28 var canvas = document.getElementById("canvas");
  29 var gl;
  30 var testIndex = 0;
  31 var iterations = 0;
  32 var maxIterations = 10;
  33 var prog;
  34 var tests;
  35 var stage = 0;
  36 var blackUint8 = [0, 0, 0, 255];
  37 var redFloat = [1.0, 0.0, 0.0, 0.0];
  38 var redUint8 = [255, 0, 0, 255];
  39 var greenFloat = [0.0, 1.0, 0.0, 0.0];
  40 var greenUint8 = [0, 255, 0, 255];
  41
  42 function verifyOnePixel(kind, x, y, readFormat, readType, arrayType, expectedColor) {
  43   var buffer = new arrayType(4);
  44   gl.readPixels(Math.floor(x), Math.floor(y), 1, 1, readFormat, readType, buffer);
  45   if (buffer[0] == expectedColor[0] &&
  46       buffer[1] == expectedColor[1] &&
  47       buffer[2] == expectedColor[2] &&
  48       buffer[3] == expectedColor[3]) {
  49     testPassed(kind + " succeeded");
  50   } else {
  51     testFailed(kind + " failed. Expected: " + expectedColor + ", got: " + buffer);
  52   }
  53 }
  54
  55 function testClearBufferAndDraw(test) {
  56   gl.stencilFunc(gl.EQUAL, 0, 0xFF);
  57   test['clear']();
  58   wtu.setFloatDrawColor(gl, greenFloat);
  59   wtu.drawUnitQuad(gl);
  60   // Back buffer has no alpha channel.
  61   let readFormat = gl.RGBA;
  62   let readType = gl.UNSIGNED_BYTE;
  63   if (stage == 2) {
  64     verifyOnePixel("Clearing outside scissor",63, 63, readFormat, readType, Uint8Array, blackUint8);
  65     verifyOnePixel("Drawing outside scissor", 40, 40, readFormat, readType, Uint8Array, blackUint8);
  66   }
  67   verifyOnePixel("Clearing", 0,  0, readFormat, readType, Uint8Array, test['bgColor']);
  68   verifyOnePixel("Drawing", 32, 32, readFormat, readType, Uint8Array, test['drawColor']);
  69 }
  70
  71 function runNextTest() {
  72   if (testIndex >= tests.length) {
  73     // Restore after the last clearBufferiv test
  74     gl.enable(gl.DEPTH_TEST);
  75     if (stage == 0) {
  76       debug('');
  77       debug('Enabling full-canvas scissor');
  78       gl.enable(gl.SCISSOR_TEST);
  79     } else if (stage == 1) {
  80       debug('');
  81       debug('Limiting scissor rect');
  82       gl.scissor(0, 0, 33, 33);
  83     } else if (stage == 2) {
  84       finishTest();
  85       return;
  86     }
  87     testIndex = 0;
  88     stage++;
  89   }
  90
  91
  92   let test = tests[testIndex];
  93   if (iterations == 0) {
  94     debug('');
  95     debug('Testing: ' + test['desc'])
  96   }
  97   testClearBufferAndDraw(test);
  98
  99   if (++iterations == maxIterations) {
 100     iterations = 0;
 101     ++testIndex;
 102
 103     // Clear to yellow between the tests to ensure that
 104     // subsequent tests do not rely on past results.
 105     gl.clearColor(1.0, 1.0, 0.0, 1.0);
 106     gl.clear(gl.COLOR_BUFFER_BIT);
 107   }
 108
 109   wtu.waitForComposite(runNextTest);
 110 }
 111
 112 function runTest() {
 113   gl = wtu.create3DContext(canvas, { alpha: false, stencil: true }, 2);
 114
 115   if (!gl) {
 116     testFailed("context does not exist");
 117     return;
 118   } else {
 119     testPassed("context exists");
 120   }
 121
 122   prog = wtu.setupColorQuad(gl, 0, { scale: 0.5 });
 123
 124   tests = [
 125     {
 126       desc: 'Implicit clear',
 127       clear: function() {},
 128       bgColor: blackUint8,
 129       // The implicit clear clears depth to 1.0, and since the quad is
 130       // drawn at a depth of 0.0, it's always discarded.
 131       drawColor: blackUint8,
 132     },
 133     {
 134       desc: 'clearBufferfi only',
 135       clear: function() {
 136         gl.clearBufferfi(gl.DEPTH_STENCIL, 0, 0.0, 1);
 137         gl.stencilFunc(gl.EQUAL, 1, 0xFF);
 138       },
 139       bgColor: blackUint8,
 140       drawColor: greenUint8,
 141     },
 142     {
 143       desc: 'clearBufferfv only',
 144       clear: function() {
 145         gl.clearBufferfv(gl.DEPTH, 0, [0.0]);
 146       },
 147       bgColor: blackUint8,
 148       drawColor: greenUint8,
 149     },
 150     {
 151       desc: 'clearBufferfv and clear',
 152       clear: function() {
 153         gl.clearBufferfv(gl.COLOR, 0, redFloat);
 154         gl.clearDepth(0.0);
 155         gl.clear(gl.DEPTH_BUFFER_BIT);
 156       },
 157       bgColor: redUint8,
 158       drawColor: greenUint8,
 159     },
 160     {
 161       desc: 'clearBufferfv (no-op) and clear',
 162       clear: function() {
 163         gl.clearBufferfv(gl.COLOR, 1, greenFloat);
 164         gl.clearDepth(0.0);
 165         gl.clear(gl.DEPTH_BUFFER_BIT);
 166       },
 167       bgColor: blackUint8,
 168       drawColor: greenUint8,
 169     },
 170     {
 171       desc: 'clearBuffer{fv} and {fi}',
 172       clear: function() {
 173         gl.clearBufferfv(gl.COLOR, 0, redFloat);
 174         gl.clearBufferfi(gl.DEPTH_STENCIL, 0, 0.0, 2);
 175         gl.stencilFunc(gl.EQUAL, 2, 0xFF);
 176       },
 177       bgColor: redUint8,
 178       drawColor: greenUint8,
 179     },
 180     {
 181       desc: 'clearBufferiv only',
 182       clear: function() {
 183         gl.disable(gl.DEPTH_TEST);
 184         gl.clearBufferiv(gl.STENCIL, 0, [3]);
 185         gl.stencilFunc(gl.EQUAL, 3, 0xFF);
 186       },
 187       bgColor: blackUint8,
 188       drawColor: greenUint8,
 189     },
 190   ];
 191
 192   // Clear canvas to something other than black to start.
 193   gl.clearColor(0.0, 0.0, 1.0, 1.0);
 194   gl.clear(gl.COLOR_BUFFER_BIT);
 195
 196   gl.enable(gl.DEPTH_TEST);
 197   // Unreal Engine's depth test is reversed from the
 198   // default. Including the clear of the depth buffer in this test
 199   // case highlights the rendering error more clearly, since neither
 200   // the background nor any rendered object show up.
 201   gl.depthFunc(gl.GEQUAL);
 202
 203   gl.enable(gl.STENCIL_TEST);
 204
 205   // Must run in a requestAnimationFrame loop to provoke implicit
 206   // clears of the canvas.
 207   wtu.waitForComposite(runNextTest);
 208 }
 209
 210 debug("");
 211 var successfullyParsed = true;
 212
 213 </script>
 214
 215 </body>
 216 </html>