dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-active-bind-2.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 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>
 210