1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/conformance/textures/texture-mips.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,256 @@
1.4 +<!--
1.5 +Copyright (c) 2011 The Chromium Authors. All rights reserved.
1.6 +Use of this source code is governed by a BSD-style license that can be
1.7 +found in the LICENSE file.
1.8 + -->
1.9 +<!DOCTYPE html>
1.10 +<html>
1.11 +<head>
1.12 +<meta charset="utf-8">
1.13 +<title>WebGL texture mips conformance test.</title>
1.14 +<link rel="stylesheet" href="../../resources/js-test-style.css"/>
1.15 +<script src="../../resources/js-test-pre.js"></script>
1.16 +<script src="../resources/webgl-test.js"> </script>
1.17 +<script src="../resources/webgl-test-utils.js"></script>
1.18 +</head>
1.19 +<body>
1.20 +<canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas>
1.21 +<div id="description"></div>
1.22 +<div id="console"></div>
1.23 +<script id="vshader" type="x-shader/x-vertex">
1.24 +uniform vec4 uMult;
1.25 +attribute vec4 vPosition;
1.26 +attribute vec2 texCoord0;
1.27 +varying vec2 texCoord;
1.28 +void main()
1.29 +{
1.30 + gl_Position = vPosition * uMult;
1.31 + texCoord = texCoord0;
1.32 +}
1.33 +</script>
1.34 +
1.35 +<script id="fshader" type="x-shader/x-fragment">
1.36 +precision mediump float;
1.37 +uniform sampler2D tex;
1.38 +varying vec2 texCoord;
1.39 +void main()
1.40 +{
1.41 + gl_FragColor = texture2D(tex, texCoord);
1.42 +}
1.43 +</script>
1.44 +<script>
1.45 +var canvas;
1.46 +var wtu = WebGLTestUtils;
1.47 +function init()
1.48 +{
1.49 + if (window.initNonKhronosFramework) {
1.50 + window.initNonKhronosFramework(false);
1.51 + }
1.52 +
1.53 + description("Checks mip issues");
1.54 +
1.55 + canvas = document.getElementById("example");
1.56 + shouldBe("canvas.width", "2");
1.57 + shouldBe("canvas.height", "2");
1.58 +
1.59 + gl = wtu.create3DContext(canvas);
1.60 + wtu.setupUnitQuad(gl, 0, 1);
1.61 + var program = wtu.setupProgram(
1.62 + gl, ['vshader', 'fshader'], ['vPosition', 'texCoord0'], [0, 1]);
1.63 +
1.64 + gl.disable(gl.DEPTH_TEST);
1.65 + gl.disable(gl.BLEND);
1.66 +
1.67 + var colors = {
1.68 + blue: [0, 0, 255, 255],
1.69 + red: [255, 0, 0, 255],
1.70 + green: [0, 255, 0, 255],
1.71 + cyan: [128, 255, 255, 255],
1.72 + black: [0, 0, 0, 255]
1.73 + };
1.74 +
1.75 + var mips = [
1.76 + ];
1.77 +
1.78 + var texLoc = gl.getUniformLocation(program, "tex");
1.79 + gl.uniform1i(texLoc, 0);
1.80 + var multLoc = gl.getUniformLocation(program, "uMult");
1.81 +
1.82 + // ----------------------------------------------------
1.83 + var tex = createTexture();
1.84 + gl.uniform4f(multLoc, 1, 1, 1, 1);
1.85 +
1.86 + gl.bindTexture(gl.TEXTURE_2D, tex);
1.87 + // 16x16 texture no mips
1.88 + fillLevel(tex, 0, 16, 'cyan');
1.89 +
1.90 + check('black',
1.91 + "texture that is missing mips when TEXTURE_MIN_FILTER not NEAREST or LINEAR");
1.92 +
1.93 + generateMipmap();
1.94 +
1.95 + check('cyan', "texture that has all mips");
1.96 +
1.97 + // Fill in the bottom 2 mips with a different color.
1.98 + fillLevel(tex, 4, 1, 'green');
1.99 + fillLevel(tex, 3, 2, 'green');
1.100 +
1.101 + // Choose the nearest mip
1.102 + texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
1.103 +
1.104 + check('green', "texture that is only using the smallest 2 mips");
1.105 +
1.106 + gl.uniform4f(multLoc, 16, 16, 1, 1);
1.107 +
1.108 + check('cyan', "texture that is using only the largest 2 mips");
1.109 +
1.110 + // Set the top level
1.111 + fillLevel(tex, 0, 1, 'red');
1.112 + check('red',
1.113 + "texture that is only using the top level even though other levels are defined");
1.114 +
1.115 + // Set the top 2 levels using generateMipmap
1.116 + fillLevel(tex, 0, 2, 'blue');
1.117 + generateMipmap();
1.118 +
1.119 + check('blue',
1.120 + "texture that is only using the top 2 levels even though other levels are defined");
1.121 +
1.122 + // Set the top 2 levels back to sizes that end up using levels 2, 3, and 4 again.
1.123 + fillLevel(tex, 0, 16, 'blue');
1.124 + fillLevel(tex, 1, 8, 'blue');
1.125 + check('blue', "texture that is only using the largest 2 mips");
1.126 + gl.uniform4f(multLoc, 1, 1, 1, 1);
1.127 + check('green', "texture that is only using the smallest 2 mips");
1.128 +
1.129 + // ----------------------------------------------------
1.130 + var tex = createTexture();
1.131 + gl.uniform4f(multLoc, 1, 1, 1, 1);
1.132 + fillLevel(tex, 0, 8, 'cyan');
1.133 + generateMipmap();
1.134 + check('cyan', "texture that has 3 mips");
1.135 +
1.136 + fillLevel(tex, 0, 16, 'blue');
1.137 + texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
1.138 + check('blue', "texture that is only using top mips");
1.139 +
1.140 + fillLevel(tex, 0, 8, 'red');
1.141 + texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
1.142 + check('cyan', "texture that is only using smallest mips");
1.143 +
1.144 + gl.uniform4f(multLoc, 16, 16, 1, 1);
1.145 + check('red', "texture that is using only the largest mip");
1.146 +
1.147 + // ----------------------------------------------------
1.148 + var tex = createTexture();
1.149 + gl.uniform4f(multLoc, 1, 1, 1, 1);
1.150 + fillLevel(tex, 2, 1, 'green');
1.151 + fillLevel(tex, 1, 2, 'green');
1.152 + fillLevel(tex, 0, 4, 'green');
1.153 + check('green', "texture that was built smallest mip first");
1.154 +
1.155 + // ----------------------------------------------------
1.156 + var tex = createTexture();
1.157 + gl.uniform4f(multLoc, 1, 1, 1, 1);
1.158 + fillLevel(tex, 0, 16, 'red');
1.159 + generateMipmap();
1.160 + check('red', "texture with 1 genmipmaps");
1.161 + fillLevel(tex, 0, 16, 'blue');
1.162 + generateMipmap();
1.163 + fillLevel(tex, 0, 16, 'green');
1.164 + generateMipmap();
1.165 + check('green', "texture with 2 genmipmaps");
1.166 +
1.167 + // ----------------------------------------------------
1.168 + glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");
1.169 +
1.170 + function createTexture() {
1.171 + debug("<hr/>gl.createTexture()");
1.172 + mips = [];
1.173 + makeDivMipChain();
1.174 + return gl.createTexture();
1.175 + }
1.176 +
1.177 + function texParameteri(target, pname, value) {
1.178 + debug("gl.texParameteri(" +
1.179 + wtu.glEnumToString(gl, target) + ", " +
1.180 + wtu.glEnumToString(gl, pname) + ", " +
1.181 + wtu.glEnumToString(gl, value) + ")")
1.182 + gl.texParameteri(target, pname, value);
1.183 + }
1.184 +
1.185 + function generateMipmap() {
1.186 + debug("gl.genreateMipmap(gl.TEXTURE_2D)");
1.187 + gl.generateMipmap(gl.TEXTURE_2D);
1.188 + var mip0 = mips[0];
1.189 + var size = mip0.size;
1.190 + var level = 1;
1.191 + for(;;) {
1.192 + size = Math.floor(size / 2);
1.193 + if (!size) {
1.194 + break;
1.195 + }
1.196 + setMipData(level, size, mip0.color);
1.197 + ++level;
1.198 + }
1.199 + makeDivMipChain();
1.200 + }
1.201 +
1.202 + function check(color, msg) {
1.203 + wtu.drawQuad(gl);
1.204 + wtu.checkCanvas(gl, colors[color], msg + " should draw with " + color);
1.205 + }
1.206 +
1.207 + function fillLevel(tex, level, size, color) {
1.208 + setMipData(level, size, color);
1.209 + debug("gl.texImage2D(gl.TEXTURE_2D, " + level + ", gl.RGBA, " + size + ", " + size +
1.210 + ", 0, gl.RGBA, gl.UNSIGNED_BYTE, " + color + ");");
1.211 + wtu.fillTexture(gl, tex, size, size, colors[color], level);
1.212 + makeDivMipChain();
1.213 + }
1.214 +
1.215 + function setMipData(level, size, color) {
1.216 + mips[level] = {
1.217 + size: size,
1.218 + color: color
1.219 + };
1.220 + }
1.221 +
1.222 + function makeDivMipChain(color) {
1.223 + var html = [
1.224 + '<div style="height: 68px; margin-top: 5px">',
1.225 + '<div style="float:left;">mips: </div>'];
1.226 + for (var ii = 0; ii < 5; ++ii) {
1.227 + var mip = mips[ii];
1.228 + if (mip) {
1.229 + html.push(makeDivSquare(mip.size, mip.color));
1.230 + } else {
1.231 + html.push(makeDivSquare(16, undefined));
1.232 + }
1.233 + }
1.234 + html.push("</div>");
1.235 + debug(html.join(""));
1.236 + }
1.237 +
1.238 + function makeDivSquare(size, color) {
1.239 + size *= 4;
1.240 + var c = color ? colors[color] : [255,255,255];
1.241 + var border = color ? 'solid' : 'dashed';
1.242 + return '<div style="float:left; width: ' + size + 'px; height: ' + size +
1.243 + 'px; background-color: ' + rgb(c) +
1.244 + '; border: 1px ' + border + ' black; margin-right: 3px;"></div>';
1.245 + }
1.246 +
1.247 + function rgb(c) {
1.248 + return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')';
1.249 + }
1.250 +}
1.251 +
1.252 +init();
1.253 +successfullyParsed = true;
1.254 +</script>
1.255 +
1.256 +<script>finishTest();</script>
1.257 +</body>
1.258 +</html>
1.259 +
