dom/canvas/test/webgl-conf/checkout/conformance2/rendering/framebuffer-texture-changing-base-level.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 framebuffer using a non-square texture with a changing base level</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="canvas" width="16" height="16"> </canvas>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20 <script>
  21 "use strict";
  22
  23 // http://anglebug.com/2291
  24
  25 var wtu = WebGLTestUtils;
  26 var gl;
  27
  28 function testNonSquareFramebufferTextureWithChangingBaseLevel() {
  29   var program = wtu.setupSimpleTextureProgram(gl);
  30   wtu.setupUnitQuad(gl);
  31
  32   var width = 8;
  33   var height = 4;
  34
  35   debug("");
  36   debug("Text texture width " + width + " x height " + height);
  37
  38   var texture = gl.createTexture();
  39   gl.bindTexture(gl.TEXTURE_2D, texture);
  40   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  41   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  42   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  43   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  44
  45   // Create all mipmap levels for the texture from level 0 to the 1x1 pixel level.
  46   var level = 0;
  47   var levelW = width;
  48   var levelH = height;
  49   gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, levelW, levelH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  50   while (levelW > 1 || levelH > 1)
  51     {
  52       ++level;
  53       levelW = Math.max(1, Math.floor(width / Math.pow(2, level)));
  54       levelH = Math.max(1, Math.floor(height / Math.pow(2, level)));
  55       gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, levelW, levelH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  56     }
  57
  58   // Clear each level of the texture using an FBO. Change the base level to match the level used for the FBO on each iteration.
  59   var fbo = gl.createFramebuffer();
  60   gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  61   level = 0;
  62   levelW = width;
  63   levelH = height;
  64   while (levelW > 1 || levelH > 1)
  65   {
  66     var levelW = Math.floor(width / Math.pow(2, level));
  67     var levelH = Math.floor(height / Math.pow(2, level));
  68
  69     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, level);
  70     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, level);
  71     shouldBe("gl.checkFramebufferStatus(gl.FRAMEBUFFER)", "gl.FRAMEBUFFER_COMPLETE");
  72     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Setup framebuffer with texture should succeed.");
  73     gl.clearColor(0, 1, 0, 1);
  74     gl.clear(gl.COLOR_BUFFER_BIT);
  75     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Clearing the texture level " + level + " to green should succeed.");
  76     wtu.checkCanvasRect(gl, 0, 0, 1, 1, [0, 255, 0, 255], "should be green");
  77     ++level;
  78   }
  79
  80   debug("");
  81
  82   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  83   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  84   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, 0);
  85   wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]);
  86   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Drawing the texture to default framebuffer with base level 0 should succeed.");
  87   wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
  88
  89   gl.deleteTexture(texture);
  90   gl.deleteFramebuffer(fbo);
  91 }
  92
  93 description();
  94
  95 var canvas = document.getElementById("canvas");
  96 shouldBeNonNull("gl = wtu.create3DContext(canvas, undefined, 2)");
  97
  98 testNonSquareFramebufferTextureWithChangingBaseLevel();
  99
 100 debug("");
 101 var successfullyParsed = true;
 102
 103 </script>
 104 <script src="../../js/js-test-post.js"></script>
 105
 106 </body>
 107 </html>