texture-active-bind-2.html (6070B)
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 #2</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="fshader2d" type="x-shader/x-fragment"> 33 precision mediump float; 34 35 uniform sampler2D tex2d; 36 varying vec2 texCoord; 37 void main() 38 { 39 gl_FragColor = texture2D(tex2d, texCoord); 40 } 41 </script> 42 <script id="fshaderCube" type="x-shader/x-fragment"> 43 precision mediump float; 44 45 uniform samplerCube texCube; 46 void main() 47 { 48 gl_FragColor = textureCube(texCube, vec3(0,1,0)); 49 } 50 </script> 51 52 <script> 53 "use strict"; 54 function init() 55 { 56 description( 57 "Tests that binding both TEXTURE_2D and TEXTURE_CUBE_MAP to the same " + 58 "active texture unit works as long as they are not used " + 59 "simultaneously in the same shader program."); 60 61 var canvas2d = document.getElementById("canvas2d"); 62 var ctx2d = canvas2d.getContext("2d"); 63 ctx2d.globalCompositeOperation = "copy"; 64 65 var wtu = WebGLTestUtils; 66 var gl = wtu.create3DContext("example"); 67 var program = wtu.setupProgram( 68 gl, ["vshader", "fshader2d"], ["vPosition", "texCoord0"]); 69 70 var program2d = program; 71 var programCube = wtu.setupProgram( 72 gl, ["vshader", "fshaderCube"], ["vPosition", "texCoord0"]); 73 74 var vertexObject = gl.createBuffer(); 75 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); 76 gl.bufferData( 77 gl.ARRAY_BUFFER, 78 new Float32Array([-1, 1,0, 1,1,0, -1,-1,0, 79 -1,-1,0, 1,1,0, 1,-1,0]), 80 gl.STATIC_DRAW); 81 gl.enableVertexAttribArray(0); 82 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 83 84 var vertexObject = gl.createBuffer(); 85 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); 86 gl.bufferData( 87 gl.ARRAY_BUFFER, 88 new Float32Array([ 0,0, 1,0, 0,1, 89 0,1, 1,0, 1,1]), 90 gl.STATIC_DRAW); 91 gl.enableVertexAttribArray(1); 92 gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0); 93 94 // Make texture unit 1 active. 95 gl.activeTexture(gl.TEXTURE1); 96 97 // Make a 2d texture 98 var tex2d = gl.createTexture(); 99 gl.bindTexture(gl.TEXTURE_2D, tex2d); 100 ctx2d.fillStyle = "rgba(0, 0, 255, 255)"; 101 ctx2d.fillRect(0, 0, 1, 1); 102 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); 103 104 // make a cube texture 105 var texCube = gl.createTexture(); 106 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texCube); 107 ctx2d.fillStyle = "rgba(255, 0, 255, 255)"; 108 ctx2d.fillRect(0, 0, 1, 1); 109 var targets = [ 110 gl.TEXTURE_CUBE_MAP_POSITIVE_X, 111 gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 112 gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 113 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 114 gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 115 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; 116 for (var ii = 0; ii < targets.length; ++ii) { 117 gl.texImage2D(targets[ii], 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); 118 } 119 120 // Setup program2d and programCube 121 var tex2dLoc = gl.getUniformLocation(program2d, "tex2d"); 122 var world2dLoc = gl.getUniformLocation(program2d, "world"); 123 var texCubeLoc = gl.getUniformLocation(programCube, "texCube"); 124 var worldCubeLoc = gl.getUniformLocation(programCube, "world"); 125 126 gl.useProgram(program2d); 127 gl.uniform1i(tex2dLoc, 1); 128 gl.useProgram(programCube); 129 gl.uniform1i(texCubeLoc, 1); 130 131 gl.clearColor(1,0,0,1); 132 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 133 134 var programs = [program2d, programCube]; 135 var worldLocs = [world2dLoc, worldCubeLoc]; 136 for (var ii = 0; ii < 4; ++ii) { 137 var x = ii % 2; 138 var y = Math.floor(ii / 2); 139 gl.useProgram(programs[x]); 140 gl.uniformMatrix4fv( 141 worldLocs[x], false, 142 [0.5, 0, 0, 0, 143 0, 0.5, 0, 0, 144 0, 0, 1, 0, 145 -0.5 + x, -0.5 + y, 0, 1]); 146 gl.drawArrays(gl.TRIANGLES, 0, 6); 147 } 148 149 var colors = [ 150 [0,0,255,255], 151 [255,0,255,255], 152 [0,0,255,255], 153 [255,0,255,255]]; 154 155 for (var ii = 0; ii < colors.length; ++ii) { 156 var c = colors[ii]; 157 var x = ii % 2; 158 var y = Math.floor(ii / 2); 159 wtu.checkCanvasRect(gl, x, y, 1, 1, c); 160 } 161 162 // Test that binding to one target does not affect the other 163 debug(""); 164 debug("Testing texture target binding/unbinding"); 165 166 var worldMatrix = [ 167 1, 0, 0, 0, 168 0, 1, 0, 0, 169 0, 0, 1, 0, 170 0, 0, 0, 1]; 171 172 gl.activeTexture(gl.TEXTURE2); 173 174 // Unbinding the TEXTURE_CUBE_MAP target should not affect the TEXTURE_2D target 175 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 176 177 gl.bindTexture(gl.TEXTURE_2D, tex2d); 178 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texCube); 179 gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); 180 181 gl.useProgram(program2d); 182 gl.uniform1i(tex2dLoc, 2); 183 gl.uniformMatrix4fv(world2dLoc, false, worldMatrix); 184 gl.drawArrays(gl.TRIANGLES, 0, 6); 185 186 wtu.checkCanvasRect(gl, 0, 0, 2, 2, [0,0,255,255]); 187 188 // Unbinding the TEXTURE_2D target should not affect the TEXTURE_CUBE_MAP target 189 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 190 191 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texCube); 192 gl.bindTexture(gl.TEXTURE_2D, tex2d); 193 gl.bindTexture(gl.TEXTURE_2D, null); 194 195 gl.useProgram(programCube); 196 gl.uniform1i(texCubeLoc, 2); 197 gl.uniformMatrix4fv(worldCubeLoc, false, worldMatrix); 198 gl.drawArrays(gl.TRIANGLES, 0, 6); 199 200 wtu.checkCanvasRect(gl, 0, 0, 2, 2, [255,0,255,255]); 201 } 202 203 init(); 204 var successfullyParsed = true; 205 </script> 206 <script src="../../../js/js-test-post.js"></script> 207 208 </body> 209 </html>