OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2009 The Chromium Authors. All rights reserved. | |
3 Use of this source code is governed by a BSD-style license that can be | |
4 found in the LICENSE file. | |
5 --> | |
6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
7 "http://www.w3.org/TR/html4/loose.dtd"> | |
8 <html> | |
9 <head> | |
10 <title>WebGL texImage2D conformance test.</title> | |
11 <link rel="stylesheet" href="../resources/js-test-style.css"/> | |
12 <script src="../resources/js-test-pre.js"></script> | |
13 <script src="resources/webgl-test.js"> </script> | |
14 <script src="resources/webgl-test-utils.js"> </script> | |
15 </head> | |
16 <body> | |
17 <canvas id="example" width="256" height="16" style="width: 256px; height: 48px;"
></canvas> | |
18 <div id="description"></div> | |
19 <div id="console"></div> | |
20 <script> | |
21 description("Test texImage2D conversions."); | |
22 var wtu = WebGLTestUtils; | |
23 var canvas = document.getElementById("example"); | |
24 var gl = wtu.create3DContext(canvas); | |
25 var program = wtu.setupTexturedQuad(gl); | |
26 | |
27 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
28 | |
29 var imgURLs = [ | |
30 'resources/gray-ramp-256-with-128-alpha.png', | |
31 'resources/gray-ramp-256.png', | |
32 'resources/gray-ramp-default-gamma.png', | |
33 'resources/gray-ramp-gamma0.1.png', | |
34 'resources/gray-ramp-gamma1.0.png', | |
35 'resources/gray-ramp-gamma2.0.png', | |
36 'resources/gray-ramp-gamma4.0.png', | |
37 'resources/gray-ramp-gamma9.0.png', | |
38 'resources/gray-ramp.png', | |
39 'resources/zero-alpha.png', | |
40 'resources/3x3.png', | |
41 'resources/blue-1x1.jpg', | |
42 'resources/red-indexed.png', | |
43 'resources/green-2x2-16bit.png', | |
44 'resources/small-square-with-colorspin-profile.jpg', | |
45 'resources/small-square-with-colorspin-profile.png', | |
46 'resources/small-square-with-cie-rgb-profile.png', | |
47 'resources/small-square-with-colormatch-profile.png', | |
48 'resources/small-square-with-e-srgb-profile.png', | |
49 'resources/small-square-with-smpte-c-profile.png', | |
50 'resources/small-square-with-srgb-iec61966-2.1-profile.png']; | |
51 | |
52 | |
53 wtu.loadImagesAsync(imgURLs, runTests); | |
54 | |
55 function runTests(imgs) { | |
56 var loc = gl.getUniformLocation(program, "tex"); | |
57 gl.uniform1i(loc, 0); | |
58 | |
59 gl.disable(gl.BLEND); | |
60 gl.disable(gl.DEPTH_TEST); | |
61 | |
62 var width = canvas.width; | |
63 var height = canvas.height; | |
64 | |
65 function checkPixel(buf, x, y, color) { | |
66 var off = (y * width + x) * 4; | |
67 var msg = "pixel " + x + ", " + y + " should be " + | |
68 color[0] + ", " + | |
69 color[1] + ", " + | |
70 color[2] + ", " + | |
71 color[3] + " was " + | |
72 buf[off + 0] + ", " + | |
73 buf[off + 1] + ", " + | |
74 buf[off + 2] + ", " + | |
75 buf[off + 3]; | |
76 | |
77 for (var ii = 0; ii < 4; ++ii) { | |
78 if (buf[off + ii] != color[ii]) { | |
79 testFailed(msg); | |
80 return; | |
81 } | |
82 } | |
83 testPassed(msg); | |
84 } | |
85 | |
86 function checkPixelRange(buf, x, y, color, allowedRange) { | |
87 var off = (y * width + x) * 4; | |
88 var msg = "pixel " + x + ", " + y + " should be within " + | |
89 allowedRange + " units of " + | |
90 color[0] + ", " + | |
91 color[1] + ", " + | |
92 color[2] + ", " + | |
93 color[3]; | |
94 var subMsg = " was " + | |
95 buf[off + 0] + ", " + | |
96 buf[off + 1] + ", " + | |
97 buf[off + 2] + ", " + | |
98 buf[off + 3]; | |
99 // When running in WebKit's test harness, we don't want to print the | |
100 // pixel value when the test passes, because different machines might | |
101 // have different results and we record the text output. | |
102 var inDumpRenderTree = window.layoutTestController; | |
103 for (var ii = 0; ii < 4; ++ii) { | |
104 if (Math.abs(buf[off + ii] - color[ii]) > allowedRange) { | |
105 testFailed(msg + subMsg); | |
106 return; | |
107 } | |
108 } | |
109 testPassed(msg + (inDumpRenderTree ? "" : subMsg)); | |
110 } | |
111 | |
112 var tex = gl.createTexture(); | |
113 gl.bindTexture(gl.TEXTURE_2D, tex); | |
114 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); | |
115 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); | |
116 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); | |
117 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); | |
118 | |
119 var buf = new Uint8Array(width * height * 4); | |
120 | |
121 debug(""); | |
122 debug("check pixels are NOT pre-multiplied"); | |
123 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
124 imgs['resources/zero-alpha.png']); | |
125 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
126 wtu.drawQuad(gl); | |
127 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
128 | |
129 var left = 0; | |
130 var middle = Math.floor(width / 2); | |
131 var right = width - 1; | |
132 var bottom = 0; | |
133 var center = Math.floor(height / 2); | |
134 var top = height - 1; | |
135 checkPixel(buf, left, top, [ 0, 0, 0, 255]); | |
136 checkPixel(buf, middle, top, [255, 0, 255, 255]); | |
137 checkPixel(buf, right, top, [ 0, 0, 255, 255]); | |
138 checkPixel(buf, left, center, [128, 128, 128, 255]); | |
139 checkPixel(buf, middle, center, [255, 255, 255, 255]); | |
140 checkPixel(buf, right, center, [ 0, 255, 255, 255]); | |
141 checkPixel(buf, left, bottom, [255, 0, 0, 255]); | |
142 checkPixel(buf, middle, bottom, [255, 255, 0, 255]); | |
143 checkPixel(buf, right, bottom, [ 0, 255, 0, 255]); | |
144 | |
145 debug(""); | |
146 debug("check quantization"); | |
147 var quantInfo = [ | |
148 {format: gl.RGBA, type: gl.UNSIGNED_BYTE, counts: [256, 256, 256, 2
56]}, | |
149 {format: gl.RGBA, type: gl.UNSIGNED_SHORT_4_4_4_4, counts: [ 16, 16, 16,
16]}, | |
150 {format: gl.RGB, type: gl.UNSIGNED_SHORT_5_6_5, counts: [ 32, 64, 32,
1]}, | |
151 {format: gl.RGBA, type: gl.UNSIGNED_SHORT_5_5_5_1, counts: [ 32, 32, 32,
2]}]; | |
152 for (var qq = 0; qq < quantInfo.length; ++qq) { | |
153 var info = quantInfo[qq]; | |
154 gl.texImage2D( | |
155 gl.TEXTURE_2D, 0, info.format, info.format, info.type, | |
156 imgs['resources/gray-ramp-256.png']); | |
157 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
158 wtu.drawQuad(gl); | |
159 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
160 var counts = [{ }, { }, { }, { }]; | |
161 var numUniqueValues = [0, 0, 0, 0]; | |
162 // Count the number of unique values in each channel. | |
163 for (var ii = 0; ii < width * height * 4; ii += 4) { | |
164 for (var jj = 0; jj < 4; ++jj) { | |
165 var v = buf[ii + jj]; | |
166 if (!counts[jj][v]) { | |
167 counts[jj][v] = 1; | |
168 ++numUniqueValues[jj]; | |
169 } else { | |
170 ++counts[jj][v]; | |
171 } | |
172 } | |
173 } | |
174 for (var ii = 0; ii < 4; ++ii) { | |
175 assertMsg(numUniqueValues[ii] == info.counts[ii], | |
176 "There should be " + info.counts[ii] + | |
177 " unique values in channel " + ii + ". Found " + | |
178 numUniqueValues[ii]); | |
179 } | |
180 } | |
181 | |
182 debug(""); | |
183 debug("Check that gamma settings don't effect 8bit pngs"); | |
184 gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); | |
185 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
186 imgs['resources/gray-ramp-default-gamma.png']); | |
187 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
188 wtu.drawQuad(gl); | |
189 var ref = new Uint8Array(width * height * 4); | |
190 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, ref); | |
191 | |
192 var gammaImages = [ | |
193 'resources/gray-ramp-gamma0.1.png', | |
194 'resources/gray-ramp-gamma1.0.png', | |
195 'resources/gray-ramp-gamma2.0.png', | |
196 'resources/gray-ramp-gamma4.0.png', | |
197 'resources/gray-ramp-gamma9.0.png']; | |
198 for (var ii = 0; ii < gammaImages.length; ++ii) { | |
199 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
200 imgs[gammaImages[ii]]); | |
201 wtu.drawQuad(gl); | |
202 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
203 var same = true; | |
204 for (var jj = 0; jj < width * height * 4; ++jj) { | |
205 if (buf[jj] != ref[jj]) { | |
206 same = false; | |
207 break; | |
208 } | |
209 } | |
210 assertMsg(same, "pixels should be same regardless of gamma settings."); | |
211 } | |
212 | |
213 debug(""); | |
214 debug("check pixels are UN pre-multiplied"); | |
215 for (var ii = 0; ii < 2; ++ii) { | |
216 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
null); | |
217 if (ii == 0) { | |
218 var canvas2d = document.createElement("canvas"); | |
219 canvas2d.width = 256; | |
220 canvas2d.height = 1; | |
221 var ctx = canvas2d.getContext("2d"); | |
222 ctx.drawImage(imgs['resources/gray-ramp-256-with-128-alpha.png'], 0, 0); | |
223 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, canvas2d
); | |
224 } else { | |
225 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
226 imgs['resources/gray-ramp-256-with-128-alpha.png']); | |
227 } | |
228 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
229 wtu.drawQuad(gl); | |
230 var buf = new Uint8Array(width * height * 4); | |
231 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
232 var lt128Count = [0, 0, 0]; | |
233 var ge128Count = [0, 0, 0]; | |
234 for (var jj = 0; jj < width; ++jj) { | |
235 var off = jj * 4; | |
236 for (var cc = 0; cc < 3; ++cc) { | |
237 if (buf[off + cc] < 128) { | |
238 ++lt128Count[cc]; | |
239 } else { | |
240 ++ge128Count[cc]; | |
241 } | |
242 } | |
243 } | |
244 // Not sure the exact count here because gamma does effect drawing into the | |
245 // canvas but it should be close to 50% so I'll pass 45% | |
246 for (var jj = 0; jj < 3; ++jj) { | |
247 assertMsg(ge128Count[jj] > 256 * 0.45, | |
248 "Half the pixels in channel " + jj + | |
249 " should be >= 128,128,128. found " + | |
250 ((ge128Count[jj] / 256) * 100).toFixed() + "%"); | |
251 assertMsg(lt128Count[jj] > 256 * 0.45, | |
252 "Half the pixels in channel " + jj + | |
253 " should be < 128,128,128. found " + | |
254 ((lt128Count[jj] / 256) * 100).toFixed() + "%"); | |
255 } | |
256 } | |
257 | |
258 debug(""); | |
259 debug("check canvas pixels are UN pre-multiplied"); | |
260 var canvas2d = document.createElement("canvas"); | |
261 canvas2d.width = 1; | |
262 canvas2d.height = 1; | |
263 var ctx = canvas2d.getContext("2d"); | |
264 ctx.fillStyle ="rgba(255,255,255,0.5)"; | |
265 ctx.fillRect(0, 0, 256, 1); | |
266 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); | |
267 wtu.drawQuad(gl); | |
268 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
269 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
270 checkPixelRange(buf, 0, 0, [255, 255, 255, 127], 4); | |
271 | |
272 debug(""); | |
273 debug("check canvas pixels are pre-multiplied"); | |
274 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); | |
275 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); | |
276 wtu.drawQuad(gl); | |
277 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
278 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); | |
279 checkPixelRange(buf, 0, 0, [127, 127, 127, 127], 4); | |
280 | |
281 | |
282 debug(""); | |
283 debug("check pixels are pre-multiplied"); | |
284 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); | |
285 // TODO(gman): use different texture that won't pass on failure | |
286 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, | |
287 imgs['resources/zero-alpha.png']); | |
288 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
289 wtu.drawQuad(gl); | |
290 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
291 | |
292 var same = true; | |
293 for (var jj = 0; jj < width * height * 4; ++jj) { | |
294 if (buf[jj] != 0) { | |
295 same = false; | |
296 break; | |
297 } | |
298 } | |
299 assertMsg(same, "pixels should all be 0."); | |
300 | |
301 debug(""); | |
302 debug("check pixels are flipped"); | |
303 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); | |
304 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); | |
305 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
306 imgs['resources/3x3.png']); | |
307 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
308 wtu.drawQuad(gl); | |
309 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
310 | |
311 checkPixel(buf, left, top, [255, 0, 0, 255]); | |
312 checkPixel(buf, middle, top, [255, 255, 0, 255]); | |
313 checkPixel(buf, right, top, [255, 0, 0, 255]); | |
314 checkPixel(buf, left, center, [255, 0, 255, 255]); | |
315 checkPixel(buf, middle, center, [255, 0, 0, 255]); | |
316 checkPixel(buf, right, center, [ 0, 255, 0, 255]); | |
317 checkPixel(buf, left, bottom, [ 0, 0, 0, 255]); | |
318 checkPixel(buf, middle, bottom, [ 0, 0, 255, 255]); | |
319 checkPixel(buf, right, bottom, [255, 0, 0, 255]); | |
320 | |
321 debug(""); | |
322 debug("check uploading of images with no alpha channel works"); | |
323 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); | |
324 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); | |
325 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
326 imgs['resources/blue-1x1.jpg']); | |
327 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
328 wtu.drawQuad(gl); | |
329 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
330 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10); | |
331 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors"); | |
332 | |
333 debug(""); | |
334 debug("check uploading of 16-bit images"); | |
335 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); | |
336 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); | |
337 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
338 imgs['resources/green-2x2-16bit.png']); | |
339 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
340 wtu.drawQuad(gl); | |
341 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
342 checkPixelRange(buf, middle, center, [ 15, 121, 0, 255], 10); | |
343 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors"); | |
344 | |
345 debug(""); | |
346 debug("check uploading of images with ICC profiles"); | |
347 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); | |
348 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); | |
349 gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); | |
350 | |
351 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
352 imgs['resources/small-square-with-colorspin-profile.jpg']); | |
353 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
354 wtu.drawQuad(gl); | |
355 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
356 // The image is red. However, if we ignore the color profile, it is blue. | |
357 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10); | |
358 | |
359 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
360 imgs['resources/small-square-with-colorspin-profile.png']); | |
361 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
362 wtu.drawQuad(gl); | |
363 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
364 // The image is red. However, if we ignore the color profile, it is blue. | |
365 checkPixelRange(buf, middle, center, [ 0, 0, 255, 255], 10); | |
366 | |
367 var iccPNGs = [ | |
368 'resources/small-square-with-cie-rgb-profile.png', | |
369 'resources/small-square-with-colormatch-profile.png', | |
370 'resources/small-square-with-e-srgb-profile.png', | |
371 'resources/small-square-with-smpte-c-profile.png', | |
372 'resources/small-square-with-srgb-iec61966-2.1-profile.png']; | |
373 for (var ii = 0; ii < iccPNGs.length; ++ii) { | |
374 var buf2 = new Uint8Array(width * height * 4); | |
375 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
376 imgs[iccPNGs[ii]]); | |
377 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
378 wtu.drawQuad(gl); | |
379 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf2); | |
380 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors"); | |
381 var same = true; | |
382 for (var jj = 0; jj < buf.length; ++jj) { | |
383 if (buf[jj] != buf2[jj]) { | |
384 same = false; | |
385 break; | |
386 } | |
387 } | |
388 assertMsg(same, "uploading PNGs with same data but various ICC profiles shou
ld generate the same results"); | |
389 } | |
390 | |
391 debug(""); | |
392 debug("check uploading of indexed PNG images"); | |
393 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, | |
394 imgs['resources/red-indexed.png']); | |
395 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup"); | |
396 wtu.drawQuad(gl); | |
397 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); | |
398 // The image should be red. | |
399 checkPixelRange(buf, middle, center, [ 255, 0, 0, 255 ], 10); | |
400 | |
401 debug(""); | |
402 successfullyParsed = true; | |
403 shouldBeTrue("successfullyParsed"); | |
404 debug('<br /><span class="pass">TEST COMPLETE</span>'); | |
405 notifyFinishedToHarness(); | |
406 } | |
407 </script> | |
408 </body> | |
409 </html> | |
410 | |
OLD | NEW |