third_party/WebKit/LayoutTests/fast/canvas/webgl/texture-active-bind.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2   "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4   <head>
   5     <title>WebGL ActiveTexture BindTexture conformance test.</title>
   6     <script src="../../../resources/js-test.js"></script>
   7     <script src="resources/webgl-test.js"> </script>
   8 </head>
   9 <body>
  10 <canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas>
  11 <canvas id="canvas2d" width="1" height="1" style="width: 40px; height: 40px;"></canvas>
  12 <div id="description"></div>
  13 <div id="console"></div>
  14 <script id="vshader" type="x-shader/x-vertex">
  15 uniform mat4 world;
  16 attribute vec3 vPosition;
  17 attribute vec2 texCoord0;
  18 varying vec2 texCoord;
  19 void main()
  20 {
  21   gl_Position = world * vec4(vPosition, 1);
  22   texCoord = texCoord0;
  23 }
  24 </script>
  25
  26 <script id="fshader" type="x-shader/x-fragment">
  27 #ifdef GL_ES
  28 precision highp float;
  29 #endif
  30 uniform sampler2D tex;
  31 varying vec2 texCoord;
  32 void main()
  33 {
  34   gl_FragColor = texture2D(tex, texCoord);
  35 }
  36 </script>
  37
  38 <script>
  39 function init()
  40 {
  41   if (window.initNonKhronosFramework) {
  42     window.initNonKhronosFramework(false);
  43   }
  44
  45   debug("Tests that glActiveTexture and glBindTexture work as expected");
  46   debug("Specifically texture targets are per active texture unit.");
  47   debug("");
  48
  49   var canvas2d = document.getElementById("canvas2d");
  50   var ctx2d = canvas2d.getContext("2d");
  51
  52   gl = initWebGL("example", "vshader", "fshader", [ "vPosition", "texCoord0"],
  53                  [ 0, 0, 0, 1 ], 1);
  54
  55   gl.disable(gl.DEPTH_TEST);
  56   gl.disable(gl.BLEND);
  57
  58   var vertexObject = gl.createBuffer();
  59   gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
  60   gl.bufferData(
  61       gl.ARRAY_BUFFER,
  62       new Float32Array([-1, 1,0, 1,1,0, -1,-1,0,
  63                         -1,-1,0, 1,1,0,  1,-1,0]),
  64       gl.STATIC_DRAW);
  65   gl.enableVertexAttribArray(0);
  66   gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  67
  68   var vertexObject = gl.createBuffer();
  69   gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
  70   gl.bufferData(
  71       gl.ARRAY_BUFFER,
  72       new Float32Array([ 0,0, 1,0, 0,1,
  73                          0,1, 1,0, 1,1]),
  74       gl.STATIC_DRAW);
  75   gl.enableVertexAttribArray(1);
  76   gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
  77   shouldBe("gl.getError()", "gl.NO_ERROR");
  78
  79   var colors = [
  80       [0,192,128,255],
  81       [128,64,255,255],
  82       [192,255,64,255],
  83       [200,0,255,255]];
  84
  85   // Make 4 textures by using 4 active texture units.
  86   var textures = [];
  87   for (var ii = 0; ii < colors.length; ++ii) {
  88     var tex = gl.createTexture();
  89     gl.activeTexture(gl.TEXTURE0 + ii);
  90     gl.bindTexture(gl.TEXTURE_2D, tex);
  91     textures[ii] = tex;
  92   }
  93   shouldBe("gl.getError()", "gl.NO_ERROR");
  94
  95   // now use each texture unit to write into the textures,
  96   for (var ii = 0; ii < colors.length; ++ii) {
  97     var c = colors[ii];
  98     ctx2d.fillStyle =
  99         "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + c[3] + ")";
 100     ctx2d.fillRect(0, 0, 1, 1);
 101     gl.activeTexture(gl.TEXTURE0 + ii);
 102     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
 103   }
 104   shouldBe("gl.getError()", "gl.NO_ERROR");
 105
 106   var textureLoc = gl.getUniformLocation(gl.program, "tex");
 107   var worldLoc = gl.getUniformLocation(gl.program, "world");
 108   shouldBe("gl.getError()", "gl.NO_ERROR");
 109
 110   gl.clearColor(1,0,0,1);
 111   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 112
 113   for (var ii = 0; ii < colors.length; ++ii) {
 114     var x = ii % 2;
 115     var y = Math.floor(ii / 2);
 116     gl.uniform1i(textureLoc, ii);
 117     gl.uniformMatrix4fv(
 118         worldLoc, false,
 119         [0.5, 0, 0, 0,
 120          0, 0.5, 0, 0,
 121          0, 0, 1, 0,
 122          -0.5 + x, -0.5 + y, 0, 1]);
 123     gl.drawArrays(gl.TRIANGLES, 0, 6);
 124   }
 125   shouldBe("gl.getError()", "gl.NO_ERROR");
 126
 127   for (var ii = 0; ii < colors.length; ++ii) {
 128     var c = colors[ii];
 129     var x = ii % 2;
 130     var y = Math.floor(ii / 2);
 131     var buf = new Uint8Array(4);
 132     gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 133     var msg = 'expected:' +
 134         c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + c[3] + ' found: ' +
 135         buf[0] + ', ' +
 136         buf[1] + ', ' +
 137         buf[2] + ', ' +
 138         buf[3];
 139     if (buf[0] != c[0] ||
 140         buf[1] != c[1] ||
 141         buf[2] != c[2] ||
 142         buf[3] != c[3])
 143       testFailed(msg);
 144     else
 145       testPassed(msg);
 146   }
 147 }
 148
 149 init();
 150 </script>
 151
 152
 153 </body>
 154 </html>
 155