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