diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/tex-srgb-mipmap.html')
| -rw-r--r-- | dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/tex-srgb-mipmap.html | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/tex-srgb-mipmap.html b/dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/tex-srgb-mipmap.html new file mode 100644 index 0000000000..9764987d8d --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/tex-srgb-mipmap.html @@ -0,0 +1,220 @@ +<!-- +Copyright (c) 2019 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>WebGL texture mipmap conformance test.</title> +<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> +</head> +<body> +<canvas id="example" width="4" height="4" style="width: 16px; height: 16px;"></canvas> +<div id="description"></div> +<div id="console"></div> +<script id="vshader" type="x-shader/x-vertex"> +attribute vec4 vPosition; +attribute vec2 texCoord0; +varying vec2 texCoord; +void main() +{ + gl_Position = vPosition; + texCoord = texCoord0; +} +</script> + +<script id="fshader" type="x-shader/x-fragment"> +precision mediump float; +uniform sampler2D tex; +varying vec2 texCoord; +void main() +{ + gl_FragColor = texture2D(tex, texCoord); +} +</script> +<script> +"use strict"; +var wtu = WebGLTestUtils; +var canvas = document.getElementById("example"); +var gl = wtu.create3DContext(canvas, undefined, 2); + +description("Test srgb emulation for generateMipmap."); +function generateMipmap() +{ + debug("Generate mipmaps for sRGB texture"); + + wtu.setupUnitQuad(gl, 0, 1); + var program = wtu.setupProgram( + gl, ['vshader', 'fshader'], ['vPosition', 'texCoord0'], [0, 1]); + + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.BLEND); + + var colors = { + blank: [0, 0, 0, 0], + srgba: [0, 63, 127, 255], + }; + + var texLoc = gl.getUniformLocation(program, "tex"); + gl.uniform1i(texLoc, 0); + + var width = 128; + var height = 128; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + + var srgbTex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, srgbTex); + // Set full texture as srgba color first. + wtu.fillTexture(gl, srgbTex, width, height, colors['srgba'], 0, gl.RGBA, gl.UNSIGNED_BYTE, gl.SRGB8_ALPHA8); + // Set up-left region of the texture as red color. + // In order to make sure bi-linear interpolation operates on different colors, red region + // is 1 pixel smaller than a quarter of the full texture on each side. + var redWidth = width / 2 - 1; + var redHeight = height / 2 - 1; + var buf = new Uint8Array(redWidth * redHeight * 4); + for (var i = 0; i < redWidth * redHeight; i++) { + buf[4 * i + 0] = 255; + buf[4 * i + 1] = 0; + buf[4 * i + 2] = 0; + buf[4 * i + 3] = 255; + } + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, redWidth, redHeight, gl.RGBA, gl.UNSIGNED_BYTE, buf); + gl.generateMipmap(gl.TEXTURE_2D); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); + + // Decode the srgba texture to a linear texture which will be used as reference. + var linearTex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, linearTex); + wtu.fillTexture(gl, linearTex, width, height, wtu.sRGBToLinear(colors['srgba']), 0, gl.RGBA, gl.UNSIGNED_BYTE); + // Set up-left region of the texture as red color. + // In order to make sure bi-linear interpolation operates on different colors, red region + // is 1 pixel smaller than a quarter of the full texture on each side. + for (var i = 0; i < redWidth * redHeight; i++) { + buf[4 * i + 0] = 255; + buf[4 * i + 1] = 0; + buf[4 * i + 2] = 0; + buf[4 * i + 3] = 255; + } + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, redWidth, redHeight, gl.RGBA, gl.UNSIGNED_BYTE, buf); + gl.generateMipmap(gl.TEXTURE_2D); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); + + // Change canvas to a small size. + width = 64; + height = 64; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + + // Draw with srgb texture and linear texture respectively. + gl.bindTexture(gl.TEXTURE_2D, srgbTex); + wtu.clearAndDrawUnitQuad(gl); + var result = new Uint8Array(width * height * 4); + gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, result); + gl.bindTexture(gl.TEXTURE_2D, linearTex); + wtu.clearAndDrawUnitQuad(gl); + var reference = new Uint8Array(width * height * 4); + gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, reference); + + gl.deleteTexture(srgbTex); + gl.deleteTexture(linearTex); + + var tolerance = 7; + var diff = new Uint8Array(width * height * 4); + var failed = wtu.comparePixels(result, reference, tolerance, diff); + if (failed) { + testFailed("Generate wrong mipmaps for sRGB texture."); + wtu.displayImageDiff(result, reference, diff, width, height); + } else { + testPassed("Generate correct mipmaps for sRGB texture."); + } +} + +function generateMipmap_immutableTexture() +{ + debug("Generate mipmaps for immutable texture."); + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texStorage2D(gl.TEXTURE_2D, Math.log2(canvas.width), gl.SRGB8_ALPHA8, canvas.width, canvas.height); + gl.generateMipmap(gl.TEXTURE_2D); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "GenerateMipmap should succeed."); + + gl.deleteTexture(tex); +} + +function generateMipmap_widthHeightNotEqual() +{ + debug("Generate mipmaps when width and height are not equal."); + var tex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, tex); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.SRGB8_ALPHA8, 64, 32, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.generateMipmap(gl.TEXTURE_2D); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "GenerateMipmap should succeed."); + + gl.deleteTexture(tex); +} + +function generateMipmap_maxLevelLessThanFullMipmapLevel() +{ + debug("Generate mipmaps when maxLevel is less than full mipmap level."); + + wtu.setupUnitQuad(gl, 0, 1); + var program = wtu.setupProgram( + gl, ['vshader', 'fshader'], ['vPosition', 'texCoord0'], [0, 1]); + + var colors = [0, 63, 127, 255]; + + var texLoc = gl.getUniformLocation(program, "tex"); + gl.uniform1i(texLoc, 0); + + var width = 16; + var height = 16; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + + var srgbTex = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, srgbTex); + wtu.fillTexture(gl, srgbTex, width, height, colors, 0, gl.RGBA, gl.UNSIGNED_BYTE, gl.SRGB8_ALPHA8); + + // Set max level, check if the max level mipmap is generated. + var max_level = 3; + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, max_level); + gl.generateMipmap(gl.TEXTURE_2D); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); + + width >>= max_level; + height >>= max_level; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + + gl.bindTexture(gl.TEXTURE_2D, srgbTex); + wtu.clearAndDrawUnitQuad(gl); + + var reference = wtu.sRGBToLinear(colors); + var msg; + wtu.checkCanvasRect(gl, 0, 0, width, height, reference, msg, [1,1,1,1]); + + gl.deleteTexture(srgbTex); +} + +generateMipmap(); +generateMipmap_immutableTexture(); +generateMipmap_widthHeightNotEqual(); +generateMipmap_maxLevelLessThanFullMipmapLevel(); + +var successfullyParsed = true; +</script> +<script src="../../../js/js-test-post.js"></script> + +</body> +</html> + |