dom/canvas/test/webgl-conf/checkout/conformance2/rendering/blitframebuffer-stencil-only.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 Stencil-only 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
  16 <script id="vs" type="x-shader/x-vertex">#version 300 es
  17 in vec4 position;
  18 void main() {
  19   gl_Position = position;
  20 }
  21 </script>
  22 <script id="fs" type="x-shader/x-fragment">#version 300 es
  23 out mediump vec4 colorOut;
  24 uniform mediump vec3 color;
  25 void main() {
  26    colorOut = vec4(color, 1.0);
  27 }
  28 </script>
  29
  30 </head>
  31 <body>
  32 <canvas id="example" width="8" height="8"></canvas>
  33 <div id="description"></div>
  34 <div id="console"></div>
  35
  36 <script>
  37 "use strict";
  38
  39 var wtu = WebGLTestUtils;
  40 description("This test covers some edge cases of blitFramebuffer with stencil.");
  41
  42 var gl = wtu.create3DContext("example", undefined, 2);
  43
  44 var program, colorLoc;
  45
  46 function init_buffer(format) {
  47   var buf = gl.createFramebuffer();
  48   gl.bindFramebuffer(gl.FRAMEBUFFER, buf)
  49   var tex = gl.createTexture();
  50   gl.bindTexture(gl.TEXTURE_2D, tex);
  51   gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, 16, 16);
  52   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  53   var rbo = gl.createRenderbuffer();
  54   gl.bindRenderbuffer(gl.RENDERBUFFER, rbo);
  55   gl.renderbufferStorage(gl.RENDERBUFFER, format, 16, 16);
  56   gl.framebufferRenderbuffer(gl.FRAMEBUFFER,
  57       gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, rbo);
  58
  59   gl.clearBufferfi(gl.DEPTH_STENCIL, 0, 1.0, 0);
  60
  61   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after buffer init");
  62   shouldBe('gl.checkFramebufferStatus(gl.FRAMEBUFFER)', 'gl.FRAMEBUFFER_COMPLETE');
  63
  64   return { fbo: buf, color: tex, depthStencil: rbo };
  65 }
  66
  67 var quadVB;
  68
  69 function drawQuad(depth) {
  70   if (!quadVB) {
  71     quadVB = gl.createBuffer()
  72   }
  73
  74   var quadVerts = new Float32Array(3 * 6);
  75   quadVerts[0] = -1.0; quadVerts[1] =   1.0; quadVerts[2] = depth;
  76   quadVerts[3] = -1.0; quadVerts[4] =  -1.0; quadVerts[5] = depth;
  77   quadVerts[6] =  1.0; quadVerts[7] =  -1.0; quadVerts[8] = depth;
  78   quadVerts[9] = -1.0; quadVerts[10] =  1.0; quadVerts[11] = depth;
  79   quadVerts[12] = 1.0; quadVerts[13] = -1.0; quadVerts[14] = depth;
  80   quadVerts[15] = 1.0; quadVerts[16] =  1.0; quadVerts[17] = depth;
  81
  82   gl.bindBuffer(gl.ARRAY_BUFFER, quadVB);
  83   gl.bufferData(gl.ARRAY_BUFFER, quadVerts, gl.STATIC_DRAW);
  84   gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
  85   gl.enableVertexAttribArray(0);
  86   gl.drawArrays(gl.TRIANGLES, 0, 6);
  87
  88   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawQuad");
  89 }
  90
  91 // Test based on dEQP-GLES3.functional.blit.depth_stencil.depth_24_stencil8_stencil_only
  92 function test_stencil_only_blit(format) {
  93   debug("testing format: " + wtu.glEnumToString(gl, format))
  94
  95   var src = init_buffer(format);
  96   var dest = init_buffer(format);
  97
  98   gl.bindFramebuffer(gl.FRAMEBUFFER, src.fbo);
  99   gl.viewport(0, 0, 16, 16);
 100
 101   // Fill source with red, depth = 0.5, stencil = 7
 102   gl.enable(gl.DEPTH_TEST);
 103   gl.enable(gl.STENCIL_TEST);
 104   gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
 105   gl.stencilFunc(gl.ALWAYS, 7, 0xFF);
 106   gl.uniform3f(colorLoc, 1.0, 0.0, 0.0);
 107   drawQuad(0.5);
 108
 109   // Fill dest with yellow, depth = 0.0, stencil = 1
 110   gl.bindFramebuffer(gl.FRAMEBUFFER, dest.fbo);
 111   gl.stencilFunc(gl.ALWAYS, 1, 0xff);
 112   gl.uniform3f(colorLoc, 1.0, 1.0, 0.0);
 113   drawQuad(0.0);
 114
 115   // Perform copy.
 116   gl.bindFramebuffer(gl.READ_FRAMEBUFFER, src.fbo);
 117   gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, dest.fbo);
 118   gl.blitFramebuffer(0, 0, 16, 16, 0, 0, 16, 16, gl.STENCIL_BUFFER_BIT, gl.NEAREST);
 119
 120   // Render blue where depth < 0, decrement on depth failure.
 121   gl.bindFramebuffer(gl.FRAMEBUFFER, dest.fbo);
 122   gl.stencilOp(gl.KEEP, gl.DECR, gl.KEEP);
 123   gl.stencilFunc(gl.ALWAYS, 0, 0xff);
 124
 125   gl.uniform3f(colorLoc, 0.0, 0.0, 1.0);
 126   drawQuad(0.0);
 127
 128   // Render green where stencil == 6.
 129   gl.disable(gl.DEPTH_TEST);
 130   gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
 131   gl.stencilFunc(gl.EQUAL, 6, 0xff);
 132
 133   gl.uniform3f(colorLoc, 0.0, 1.0, 0.0);
 134   drawQuad(0.0);
 135
 136   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after test");
 137   wtu.checkCanvasRect(gl, 0, 0, 16, 16, [0, 255, 0, 255],
 138                       "stencil test should be green");
 139
 140   gl.deleteFramebuffer(src.fbo);
 141   gl.deleteFramebuffer(dest.fbo);
 142   gl.deleteTexture(src.color);
 143   gl.deleteTexture(dest.color);
 144   gl.deleteRenderbuffer(src.depthStencil);
 145   gl.deleteRenderbuffer(dest.depthStencil);
 146 }
 147
 148 if (!gl) {
 149     testFailed("WebGL context does not exist");
 150 } else {
 151     testPassed("WebGL context exists");
 152
 153     program = wtu.setupProgram(gl, ["vs", "fs"], ["position"]);
 154     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after program initialization");
 155     shouldBe('gl.getProgramParameter(program, gl.LINK_STATUS)', 'true');
 156
 157     colorLoc = gl.getUniformLocation(program, "color")
 158     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "query uniform location");
 159     shouldBeNonNull('colorLoc')
 160
 161     test_stencil_only_blit(gl.DEPTH24_STENCIL8);
 162     test_stencil_only_blit(gl.DEPTH32F_STENCIL8);
 163 }
 164
 165 var successfullyParsed = true;
 166 </script>
 167 <script src="../../js/js-test-post.js"></script>
 168
 169 </body>
 170 </html>