conditional-texture-fetch.html (4292B)
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>