dom/canvas/test/webgl-conf/checkout/conformance/glsl/bugs/conditional-texture-fetch.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>Conditional texture fetch test</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 <script src="../../../js/glsl-conformance-test.js"></script>
  16 </head>
  17 <body>
  18 <canvas id="output" style="border: none;" width="64" height="64"></canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script id="vshaderConditionalTextureFetch" type="x-shader/x-vertex">
  22 attribute vec2 a_position;
  23 attribute vec4 a_canvasTileColor;
  24 attribute vec2 a_texCoord;
  25 varying vec2 texCoord;
  26 varying vec4 canvasTileColor;
  27 void main()
  28 {
  29     canvasTileColor = a_canvasTileColor;
  30     texCoord = a_texCoord;
  31     gl_Position = vec4(a_position, 0.0, 1.0);
  32 }
  33 </script>
  34 <script id="fshaderConditionalTextureFetch" type="x-shader/x-fragment">
  35 precision mediump float;
  36 varying vec4 canvasTileColor;
  37 uniform bool hasTexture;
  38 uniform sampler2D canvasTileTexture;
  39 varying vec2 texCoord;
  40 uniform vec4 uvRect;
  41 void main()
  42 {
  43     vec4 finalColor = canvasTileColor;
  44     if (hasTexture) {
  45         vec2 clampedUV = clamp(texCoord.xy, uvRect.xy, uvRect.zw);
  46         finalColor = texture2D(canvasTileTexture, clampedUV);
  47     }
  48     gl_FragColor = finalColor;
  49 }
  50 </script>
  51 <script type="text/javascript">
  52 "use strict";
  53 description();
  54 debug("If the test passes correctly the viewport will be green.");
  55
  56 var wtu = WebGLTestUtils;
  57 var canvas = document.getElementById("output");
  58 var gl = wtu.create3DContext(canvas);
  59
  60 var createGreenTexture = function() {
  61     var texture = gl.createTexture();
  62     gl.bindTexture(gl.TEXTURE_2D, texture);
  63     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  64     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  65     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  66     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  67     wtu.fillTexture(gl, texture, 1, 1, [0, 255, 0, 255]);
  68     gl.bindTexture(gl.TEXTURE_2D, null);
  69     return texture;
  70 };
  71
  72 var test = function(greenTexture) {
  73     // This is a reduced test case for a problem reported by Figma.
  74     // Program compilation produces the following warning/error on ANGLE's
  75     // D3D9 backend:
  76     // [WARNING:angle_platform_impl.cc(51)] : rx::HLSLCompiler::compileToBinary(228): C:\fakepath(26,12): error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, or loop/rep with break*.
  77     //
  78     // All of the operations in the shader -- including the clamping of the
  79     // texture coordinates -- seem to be needed in order to provoke this
  80     // error.
  81     //
  82     // However, this doesn't seem to produce incorrect rendering results.
  83     var program = wtu.setupProgram(
  84         gl,
  85         ["vshaderConditionalTextureFetch",
  86          "fshaderConditionalTextureFetch"],
  87         ["a_position", "a_canvasTileColor", "a_texCoord"],
  88         [0, 1, 2],
  89         true);
  90     if (!program) {
  91         testFailed("Shader compilation/link failed");
  92     } else {
  93         // Set up buffers
  94         wtu.setupUnitQuad(gl, 0, 2);
  95
  96         // Set up constant color (red)
  97         gl.vertexAttrib4f(1, 1, 0, 0, 1);
  98
  99         var uniformMap = wtu.getUniformMap(gl, program);
 100
 101         // Use texturing
 102         gl.uniform1i(uniformMap["hasTexture"].location, 1);
 103
 104         // Bind texture
 105         gl.activeTexture(gl.TEXTURE0);
 106         gl.bindTexture(gl.TEXTURE_2D, greenTexture);
 107         gl.uniform1i(uniformMap["canvasTileTexture"].location, 0);
 108
 109         // Set up (essentially no-op) clamp rectangle
 110         gl.uniform4f(uniformMap["uvRect"].location, 0, 0, 0.25, 0.25);
 111
 112         // Draw
 113         wtu.clearAndDrawUnitQuad(gl);
 114
 115         // Verify output
 116         wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green", 1);
 117     }
 118 };
 119
 120 if (!gl) {
 121     testFailed("context does not exist");
 122 } else {
 123     var tex = createGreenTexture();
 124     test(tex);
 125 }
 126 var successfullyParsed = true;
 127 </script>
 128 <script src="../../../js/js-test-post.js"></script>
 129 </body>
 130 </html>