| <!-- |
| |
| /* |
| ** Copyright (c) 2013 The Khronos Group Inc. |
| ** |
| ** Permission is hereby granted, free of charge, to any person obtaining a |
| ** copy of this software and/or associated documentation files (the |
| ** "Materials"), to deal in the Materials without restriction, including |
| ** without limitation the rights to use, copy, modify, merge, publish, |
| ** distribute, sublicense, and/or sell copies of the Materials, and to |
| ** permit persons to whom the Materials are furnished to do so, subject to |
| ** the following conditions: |
| ** |
| ** The above copyright notice and this permission notice shall be included |
| ** in all copies or substantial portions of the Materials. |
| ** |
| ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
| ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
| ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. |
| ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY |
| ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, |
| ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE |
| ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS. |
| */ |
| |
| --> |
| |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
| <script src="../../js/js-test-pre.js"></script> |
| <script src="../../js/webgl-test-utils.js"></script> |
| <title>WebGL WEBGL_compressed_texture_atc Conformance Tests</title> |
| <style> |
| img { |
| border: 1px solid black; |
| margin-right: 1em; |
| } |
| .testimages { |
| } |
| |
| .testimages br { |
| clear: both; |
| } |
| |
| .testimages > div { |
| float: left; |
| margin: 1em; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="description"></div> |
| <canvas id="canvas" width="8" height="8" style="width: 8px; height: 8px;"></canvas> |
| <div id="console"></div> |
| <script> |
| "use strict"; |
| description("This test verifies the functionality of the WEBGL_compressed_texture_atc extension, if it is available."); |
| |
| debug(""); |
| |
| // Compressed textures generated with AMD's Compressonator tool |
| // http://developer.amd.com/resources/archive/archived-tools/gpu-tools-archive/the-compressonator/ |
| var img_4x4_rgba_raw = new Uint8Array([ |
| 0xff,0x00,0x00,0x69,0x00,0xff,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff, |
| ]); |
| var img_4x4_rgb_atc = new Uint8Array([ |
| 0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| var img_4x4_rgba_atc_explicit = new Uint8Array([ |
| 0xf6,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| var img_4x4_rgba_atc_interpolated = new Uint8Array([ |
| 0xff,0x6a,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| var img_8x8_rgba_raw = new Uint8Array([ |
| 0xff,0x00,0x00,0x69,0x00,0xff,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0xff,0xff,0x00,0xff,0x00,0x00,0xff,0xff,0xff,0xff,0x00,0xff,0x00,0x00,0xff,0xff, |
| 0x00,0xff,0x00,0x69,0x00,0xff,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0xff,0xff,0x00,0xff,0x00,0x00,0xff,0xff, |
| 0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0xff,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0x00,0x00,0xff,0xff, |
| 0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff, |
| 0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff, |
| 0x00,0xff,0x00,0xff,0xff,0x00,0xff,0xff,0x00,0xff,0x00,0xff,0xff,0x00,0xff,0xff, |
| 0x00,0x00,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0xff,0xff,0xff, |
| 0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff,0x00,0xff,0x00,0xff,0xff,0x00,0xff,0xff, |
| 0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0xff,0xff,0xff, |
| 0x00,0xff,0x00,0x69,0x00,0xff,0x00,0xff,0x00,0xff,0x00,0xff,0xff,0x00,0xff,0xff, |
| 0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0xff,0xff,0xff, |
| 0xff,0x00,0xff,0x69,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff, |
| 0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff,0x00,0xff,0xff,0xff, |
| ]); |
| var img_8x8_rgb_atc = new Uint8Array([ |
| 0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff,0x1f,0x00,0xe0,0xff,0x33,0x30,0x3f,0x00, |
| 0x1f,0x7c,0xe0,0x07,0x33,0x30,0x3f,0x00,0x1f,0x00,0xff,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| var img_8x8_rgba_atc_explicit = new Uint8Array([ |
| 0xf6,0xff,0xf6,0xff,0xff,0xff,0xff,0xff,0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff, |
| 0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0x1f,0x00,0xe0,0xff,0x33,0x30,0x3f,0x00, |
| 0xff,0xff,0xff,0xff,0xf6,0xff,0xf6,0xff,0x1f,0x7c,0xe0,0x07,0x33,0x30,0x3f,0x00, |
| 0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0x1f,0x00,0xff,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| var img_8x8_rgba_atc_interpolated = new Uint8Array([ |
| 0xff,0x6a,0x01,0x10,0x00,0x00,0x00,0x00,0x00,0x7c,0xe0,0x07,0xcc,0xcf,0xc0,0xff, |
| 0x00,0xff,0x49,0x92,0x24,0x49,0x92,0x24,0x1f,0x00,0xe0,0xff,0x33,0x30,0x3f,0x00, |
| 0xff,0x69,0x00,0x00,0x00,0x01,0x10,0x00,0x1f,0x7c,0xe0,0x07,0x33,0x30,0x3f,0x00, |
| 0x00,0xff,0x49,0x92,0x24,0x49,0x92,0x24,0x1f,0x00,0xff,0x07,0xcc,0xcf,0xc0,0xff, |
| ]); |
| |
| var wtu = WebGLTestUtils; |
| var contextVersion = wtu.getDefault3DContextVersion(); |
| var canvas = document.getElementById("canvas"); |
| var gl = wtu.create3DContext(canvas, {antialias: false}); |
| var program = wtu.setupTexturedQuad(gl); |
| var ext = null; |
| var vao = null; |
| var validFormats = { |
| COMPRESSED_RGB_ATC_WEBGL : 0x8C92, |
| COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL : 0x8C93, |
| COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL : 0x87EE, |
| }; |
| var name; |
| var supportedFormats; |
| |
| if (!gl) { |
| testFailed("WebGL context does not exist"); |
| } else { |
| testPassed("WebGL context exists"); |
| |
| // Run tests with extension disabled |
| runTestDisabled(); |
| |
| // Query the extension and store globally so shouldBe can access it |
| ext = wtu.getExtensionWithKnownPrefixes(gl, "WEBGL_compressed_texture_atc"); |
| if (!ext) { |
| testPassed("No WEBGL_compressed_texture_atc support -- this is legal"); |
| runSupportedTest(false); |
| } else { |
| testPassed("Successfully enabled WEBGL_compressed_texture_atc extension"); |
| |
| runSupportedTest(true); |
| runTestExtension(); |
| } |
| } |
| |
| function runSupportedTest(extensionEnabled) { |
| var name = wtu.getSupportedExtensionWithKnownPrefixes(gl, "WEBGL_compressed_texture_atc"); |
| if (name !== undefined) { |
| if (extensionEnabled) { |
| testPassed("WEBGL_compressed_texture_atc listed as supported and getExtension succeeded"); |
| } else { |
| testFailed("WEBGL_compressed_texture_atc listed as supported but getExtension failed"); |
| } |
| } else { |
| if (extensionEnabled) { |
| testFailed("WEBGL_compressed_texture_atc not listed as supported but getExtension succeeded"); |
| } else { |
| testPassed("WEBGL_compressed_texture_atc not listed as supported and getExtension failed -- this is legal"); |
| } |
| } |
| } |
| |
| |
| function runTestDisabled() { |
| debug("Testing binding enum with extension disabled"); |
| |
| supportedFormats = gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS); |
| shouldBe("supportedFormats", "[]"); |
| } |
| |
| function formatExists(format, supportedFormats) { |
| for (var ii = 0; ii < supportedFormats.length; ++ii) { |
| if (format == supportedFormats[ii]) { |
| testPassed("supported format " + formatToString(format) + " is exists"); |
| return; |
| } |
| } |
| testFailed("supported format " + formatToString(format) + " does not exist"); |
| } |
| |
| function formatToString(format) { |
| for (var p in ext) { |
| if (ext[p] == format) { |
| return p; |
| } |
| } |
| return "0x" + format.toString(16); |
| } |
| |
| function runTestExtension() { |
| debug("Testing WEBGL_compressed_texture_atc"); |
| |
| // check that all format enums exist. |
| for (name in validFormats) { |
| var expected = "0x" + validFormats[name].toString(16); |
| var actual = "ext['" + name + "']"; |
| shouldBe(actual, expected); |
| } |
| |
| supportedFormats = gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS); |
| // There should be exactly 3 formats for both WebGL 1.0 and WebGL 2.0. |
| shouldBe("supportedFormats.length", "3"); |
| |
| // check that all 3 formats exist |
| for (var name in validFormats.length) { |
| formatExists(validFormats[name], supportedFormats); |
| } |
| |
| // Test each format |
| testATC_RGB(); |
| testATC_RGBA_Explicit(); |
| testATC_RGBA_Interpolated(); |
| } |
| |
| function testATC_RGB() { |
| var tests = [ |
| { width: 4, |
| height: 4, |
| channels: 3, |
| data: img_4x4_rgb_atc, |
| raw: img_4x4_rgba_raw, |
| format: ext.COMPRESSED_RGB_ATC_WEBGL |
| }, |
| { width: 8, |
| height: 8, |
| channels: 3, |
| data: img_8x8_rgb_atc, |
| raw: img_8x8_rgba_raw, |
| format: ext.COMPRESSED_RGB_ATC_WEBGL |
| } |
| ]; |
| testACTTextures(tests); |
| } |
| |
| function testATC_RGBA_Explicit() { |
| var tests = [ |
| { width: 4, |
| height: 4, |
| channels: 4, |
| data: img_4x4_rgba_atc_explicit, |
| raw: img_4x4_rgba_raw, |
| format: ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL |
| }, |
| { width: 8, |
| height: 8, |
| channels: 4, |
| data: img_8x8_rgba_atc_explicit, |
| raw: img_8x8_rgba_raw, |
| format: ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL |
| } |
| ]; |
| testACTTextures(tests); |
| } |
| |
| function testATC_RGBA_Interpolated() { |
| var tests = [ |
| { width: 4, |
| height: 4, |
| channels: 4, |
| data: img_4x4_rgba_atc_interpolated, |
| raw: img_4x4_rgba_raw, |
| format: ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL |
| }, |
| { width: 8, |
| height: 8, |
| channels: 4, |
| data: img_8x8_rgba_atc_interpolated, |
| raw: img_8x8_rgba_raw, |
| format: ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL |
| } |
| ]; |
| testACTTextures(tests); |
| } |
| |
| function testACTTextures(tests) { |
| debug("<hr/>"); |
| for (var ii = 0; ii < tests.length; ++ii) { |
| testACTTexture(tests[ii]); |
| } |
| } |
| |
| function testACTTexture(test) { |
| var data = new Uint8Array(test.data); |
| var width = test.width; |
| var height = test.height; |
| var format = test.format; |
| var uncompressedData = test.raw; |
| |
| canvas.width = width; |
| canvas.height = height; |
| gl.viewport(0, 0, width, height); |
| debug("testing " + formatToString(format) + " " + width + "x" + height); |
| |
| var tex = gl.createTexture(); |
| gl.bindTexture(gl.TEXTURE_2D, tex); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "uploading compressed texture"); |
| gl.generateMipmap(gl.TEXTURE_2D); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "trying to generate mipmaps from compressed texture"); |
| wtu.clearAndDrawUnitQuad(gl); |
| compareRect(width, height, test.channels, width, height, uncompressedData, data, format, undefined, "NEAREST"); |
| // Test again with linear filtering. |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
| wtu.clearAndDrawUnitQuad(gl); |
| compareRect(width, height, test.channels, width, height, uncompressedData, data, format, undefined, "LINEAR"); |
| |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width + 4, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, "data size does not match dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width, height + 4, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, "data size does not match dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width - 4, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, "data size does not match dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width, height - 4, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, "data size does not match dimensions"); |
| |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width - 1, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "invalid dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width - 2, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "invalid dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width, height - 1, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "invalid dimensions"); |
| gl.compressedTexImage2D(gl.TEXTURE_2D, 0, format, width, height - 2, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "invalid dimensions"); |
| |
| gl.compressedTexImage2D(gl.TEXTURE_2D, -1, format, 1, height, 0, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, "cannot specify negative mip level"); |
| |
| // ATC Does not allow use of CompressedTexSubImage |
| gl.compressedTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, format, data); |
| wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "compressedTexSubImage2D not allowed"); |
| } |
| |
| function insertImg(element, caption, img) { |
| var div = document.createElement("div"); |
| div.appendChild(img); |
| var label = document.createElement("div"); |
| label.appendChild(document.createTextNode(caption)); |
| div.appendChild(label); |
| element.appendChild(div); |
| } |
| |
| function makeImage(imageWidth, imageHeight, dataWidth, data, alpha) { |
| var scale = 8; |
| var c = document.createElement("canvas"); |
| c.width = imageWidth * scale; |
| c.height = imageHeight * scale; |
| var ctx = c.getContext("2d"); |
| for (var yy = 0; yy < imageHeight; ++yy) { |
| for (var xx = 0; xx < imageWidth; ++xx) { |
| var offset = (yy * dataWidth + xx) * 4; |
| ctx.fillStyle = "rgba(" + |
| data[offset + 0] + "," + |
| data[offset + 1] + "," + |
| data[offset + 2] + "," + |
| (alpha ? data[offset + 3] / 255 : 1) + ")"; |
| ctx.fillRect(xx * scale, yy * scale, scale, scale); |
| } |
| } |
| return wtu.makeImageFromCanvas(c); |
| } |
| function compareRect( |
| actualWidth, actualHeight, actualChannels, |
| dataWidth, dataHeight, expectedData, |
| testData, testFormat, tolerance, filteringMode) { |
| if(typeof(tolerance) == 'undefined') { tolerance = 5; } |
| var actual = new Uint8Array(actualWidth * actualHeight * 4); |
| gl.readPixels( |
| 0, 0, actualWidth, actualHeight, gl.RGBA, gl.UNSIGNED_BYTE, actual); |
| |
| var div = document.createElement("div"); |
| div.className = "testimages"; |
| insertImg(div, "expected", makeImage( |
| actualWidth, actualHeight, dataWidth, expectedData, |
| actualChannels == 4)); |
| insertImg(div, "actual", makeImage( |
| actualWidth, actualHeight, actualWidth, actual, |
| actualChannels == 4)); |
| div.appendChild(document.createElement('br')); |
| document.getElementById("console").appendChild(div); |
| |
| var failed = false; |
| for (var yy = 0; yy < actualHeight; ++yy) { |
| for (var xx = 0; xx < actualWidth; ++xx) { |
| var actualOffset = (yy * actualWidth + xx) * 4; |
| var expectedOffset = (yy * dataWidth + xx) * 4; |
| var expected = [ |
| expectedData[expectedOffset + 0], |
| expectedData[expectedOffset + 1], |
| expectedData[expectedOffset + 2], |
| (actualChannels == 3 ? 255 : expectedData[expectedOffset + 3]) |
| ]; |
| for (var jj = 0; jj < 4; ++jj) { |
| if (Math.abs(actual[actualOffset + jj] - expected[jj]) > tolerance) { |
| failed = true; |
| var was = actual[actualOffset + 0].toString(); |
| for (j = 1; j < 4; ++j) { |
| was += "," + actual[actualOffset + j]; |
| } |
| testFailed('at (' + xx + ', ' + yy + |
| ') expected: ' + expected + ' was ' + was); |
| } |
| } |
| } |
| } |
| if (!failed) { |
| testPassed("texture rendered correctly with " + filteringMode + " filtering"); |
| } |
| } |
| |
| debug(""); |
| var successfullyParsed = true; |
| </script> |
| <script src="../../js/js-test-post.js"></script> |
| |
| </body> |
| </html> |
