texture-active-bind.html (5401B)
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 ActiveTexture BindTexture conformance 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 </head> 16 <body> 17 <canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas> 18 <canvas id="canvas2d" width="1" height="1" style="width: 40px; height: 40px;"></canvas> 19 <div id="description"></div> 20 <div id="console"></div> 21 <script id="vshader" type="x-shader/x-vertex"> 22 uniform mat4 world; 23 attribute vec3 vPosition; 24 attribute vec2 texCoord0; 25 varying vec2 texCoord; 26 void main() 27 { 28 gl_Position = world * vec4(vPosition, 1); 29 texCoord = texCoord0; 30 } 31 </script> 32 <script id="trivial-vs" type="text/plain"> 33 void main() 34 { 35 gl_Position = vec4(0,0,0,1); 36 gl_PointSize = 1.0; 37 } 38 </script> 39 <script id="tex-point-fs" type="text/plain"> 40 precision mediump float; 41 uniform sampler2D uSampler; 42 void main() 43 { 44 gl_FragColor = texture2D(uSampler, vec2(0)); 45 } 46 </script> 47 <script> 48 "use strict"; 49 var gl; 50 51 function init() 52 { 53 description( 54 "Tests that glActiveTexture and glBindTexture work as expected" + 55 "Specifically texture targets are per active texture unit."); 56 57 var canvas2d = document.getElementById("canvas2d"); 58 var ctx2d = canvas2d.getContext("2d"); 59 60 var wtu = WebGLTestUtils; 61 gl = wtu.create3DContext("example"); 62 var program = wtu.setupProgram( 63 gl, 64 ["vshader", wtu.simpleTextureFragmentShader], 65 ['vPosition', 'texCoord0']); 66 wtu.setupUnitQuad(gl); 67 gl.disable(gl.DEPTH_TEST); 68 gl.disable(gl.BLEND); 69 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 70 71 var colors = [ 72 [0,192,128,255], 73 [128,64,255,255], 74 [192,255,64,255], 75 [200,0,255,255]]; 76 77 // Make 4 textures by using 4 active texture units if available. 78 var texunits = Math.min(colors.length, gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS)) 79 var textures = []; 80 for (var ii = 0; ii < texunits; ++ii) { 81 var tex = gl.createTexture(); 82 gl.activeTexture(gl.TEXTURE0 + ii); 83 gl.bindTexture(gl.TEXTURE_2D, tex); 84 textures[ii] = tex; 85 } 86 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 87 88 // now use each texture unit to write into the textures, 89 for (var ii = 0; ii < texunits; ++ii) { 90 var c = colors[ii]; 91 ctx2d.fillStyle = 92 "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + c[3] + ")"; 93 ctx2d.fillRect(0, 0, 1, 1); 94 gl.activeTexture(gl.TEXTURE0 + ii); 95 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); 96 } 97 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 98 99 var textureLoc = gl.getUniformLocation(program, "tex"); 100 var worldLoc = gl.getUniformLocation(program, "world"); 101 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 102 103 gl.clearColor(1,0,0,1); 104 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 105 106 for (var ii = 0; ii < texunits; ++ii) { 107 var x = ii % 2; 108 var y = Math.floor(ii / 2); 109 gl.uniform1i(textureLoc, ii); 110 gl.uniformMatrix4fv( 111 worldLoc, false, 112 [0.5, 0, 0, 0, 113 0, 0.5, 0, 0, 114 0, 0, 1, 0, 115 -0.5 + x, -0.5 + y, 0, 1]); 116 gl.drawArrays(gl.TRIANGLES, 0, 6); 117 } 118 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 119 120 for (var ii = 0; ii < texunits; ++ii) { 121 var x = ii % 2; 122 var y = Math.floor(ii / 2); 123 wtu.checkCanvasRect(gl, x, y, 1, 1, colors[ii]); 124 } 125 126 debug(""); 127 debug("Swizzle applied to correct ActiveTexture index"); 128 129 { 130 const prog = wtu.setupProgram( 131 gl, 132 ["trivial-vs", "tex-point-fs"]); 133 prog.uSampler = gl.getUniformLocation(prog, "uSampler"); 134 gl.useProgram(prog); 135 gl.viewport(0, 0, 1, 1); 136 gl.activeTexture(gl.TEXTURE0); 137 wtu.glErrorShouldBe(gl, gl.NO_ERROR); 138 139 const tex0_rgba8 = gl.createTexture(); 140 gl.bindTexture(gl.TEXTURE_2D, tex0_rgba8); 141 const tex0_rgba8_data = new Uint8Array([10, 20, 30, 40]); 142 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, tex0_rgba8_data); 143 144 const tex2_a8 = gl.createTexture(); 145 gl.bindTexture(gl.TEXTURE_2D, tex2_a8); 146 gl.texImage2D(gl.TEXTURE_2D, 0, gl.ALPHA, 1, 1, 0, gl.ALPHA, gl.UNSIGNED_BYTE, null); 147 148 window.control = new Uint8Array(4); 149 window.after_swizzle_applied = new Uint8Array(4); 150 151 gl.bindTexture(gl.TEXTURE_2D, tex0_rgba8); 152 gl.drawArrays(gl.POINTS, 0, 1); 153 gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, window.control); 154 shouldBeString("window.control", tex0_rgba8_data.toString()); 155 156 gl.activeTexture(gl.TEXTURE2); 157 gl.bindTexture(gl.TEXTURE_2D, tex2_a8); 158 gl.uniform1i(prog.uSampler, 2); 159 gl.activeTexture(gl.TEXTURE0); 160 gl.drawArrays(gl.POINTS, 0, 1); 161 // Firefox would apply the A8-on-R8 swizzle to whatever tex-unit was active. 162 163 gl.uniform1i(prog.uSampler, 0); 164 gl.drawArrays(gl.POINTS, 0, 1); 165 gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, window.after_swizzle_applied); 166 shouldBeString("window.after_swizzle_applied", tex0_rgba8_data.toString()); 167 // Firefox would then get 0,0,0,10 here, as the [ZERO,ZERO,ZERO,RED] swizzle was applied to our 168 // 10,20,30,40 texture. 169 } 170 } 171 172 init(); 173 var successfullyParsed = true; 174 </script> 175 <script src="../../../js/js-test-post.js"></script> 176 177 </body> 178 </html>