content/canvas/test/webgl-conformance/conformance/textures/texture-mips.html

Thu, 15 Jan 2015 21:03:48 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 21:03:48 +0100
branch
TOR_BUG_9701
changeset 11
deefc01c0e14
permissions
-rw-r--r--

Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)

michael@0 1 <!--
michael@0 2 Copyright (c) 2011 The Chromium Authors. All rights reserved.
michael@0 3 Use of this source code is governed by a BSD-style license that can be
michael@0 4 found in the LICENSE file.
michael@0 5 -->
michael@0 6 <!DOCTYPE html>
michael@0 7 <html>
michael@0 8 <head>
michael@0 9 <meta charset="utf-8">
michael@0 10 <title>WebGL texture mips conformance test.</title>
michael@0 11 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
michael@0 12 <script src="../../resources/js-test-pre.js"></script>
michael@0 13 <script src="../resources/webgl-test.js"> </script>
michael@0 14 <script src="../resources/webgl-test-utils.js"></script>
michael@0 15 </head>
michael@0 16 <body>
michael@0 17 <canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas>
michael@0 18 <div id="description"></div>
michael@0 19 <div id="console"></div>
michael@0 20 <script id="vshader" type="x-shader/x-vertex">
michael@0 21 uniform vec4 uMult;
michael@0 22 attribute vec4 vPosition;
michael@0 23 attribute vec2 texCoord0;
michael@0 24 varying vec2 texCoord;
michael@0 25 void main()
michael@0 26 {
michael@0 27 gl_Position = vPosition * uMult;
michael@0 28 texCoord = texCoord0;
michael@0 29 }
michael@0 30 </script>
michael@0 31
michael@0 32 <script id="fshader" type="x-shader/x-fragment">
michael@0 33 precision mediump float;
michael@0 34 uniform sampler2D tex;
michael@0 35 varying vec2 texCoord;
michael@0 36 void main()
michael@0 37 {
michael@0 38 gl_FragColor = texture2D(tex, texCoord);
michael@0 39 }
michael@0 40 </script>
michael@0 41 <script>
michael@0 42 var canvas;
michael@0 43 var wtu = WebGLTestUtils;
michael@0 44 function init()
michael@0 45 {
michael@0 46 if (window.initNonKhronosFramework) {
michael@0 47 window.initNonKhronosFramework(false);
michael@0 48 }
michael@0 49
michael@0 50 description("Checks mip issues");
michael@0 51
michael@0 52 canvas = document.getElementById("example");
michael@0 53 shouldBe("canvas.width", "2");
michael@0 54 shouldBe("canvas.height", "2");
michael@0 55
michael@0 56 gl = wtu.create3DContext(canvas);
michael@0 57 wtu.setupUnitQuad(gl, 0, 1);
michael@0 58 var program = wtu.setupProgram(
michael@0 59 gl, ['vshader', 'fshader'], ['vPosition', 'texCoord0'], [0, 1]);
michael@0 60
michael@0 61 gl.disable(gl.DEPTH_TEST);
michael@0 62 gl.disable(gl.BLEND);
michael@0 63
michael@0 64 var colors = {
michael@0 65 blue: [0, 0, 255, 255],
michael@0 66 red: [255, 0, 0, 255],
michael@0 67 green: [0, 255, 0, 255],
michael@0 68 cyan: [128, 255, 255, 255],
michael@0 69 black: [0, 0, 0, 255]
michael@0 70 };
michael@0 71
michael@0 72 var mips = [
michael@0 73 ];
michael@0 74
michael@0 75 var texLoc = gl.getUniformLocation(program, "tex");
michael@0 76 gl.uniform1i(texLoc, 0);
michael@0 77 var multLoc = gl.getUniformLocation(program, "uMult");
michael@0 78
michael@0 79 // ----------------------------------------------------
michael@0 80 var tex = createTexture();
michael@0 81 gl.uniform4f(multLoc, 1, 1, 1, 1);
michael@0 82
michael@0 83 gl.bindTexture(gl.TEXTURE_2D, tex);
michael@0 84 // 16x16 texture no mips
michael@0 85 fillLevel(tex, 0, 16, 'cyan');
michael@0 86
michael@0 87 check('black',
michael@0 88 "texture that is missing mips when TEXTURE_MIN_FILTER not NEAREST or LINEAR");
michael@0 89
michael@0 90 generateMipmap();
michael@0 91
michael@0 92 check('cyan', "texture that has all mips");
michael@0 93
michael@0 94 // Fill in the bottom 2 mips with a different color.
michael@0 95 fillLevel(tex, 4, 1, 'green');
michael@0 96 fillLevel(tex, 3, 2, 'green');
michael@0 97
michael@0 98 // Choose the nearest mip
michael@0 99 texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
michael@0 100
michael@0 101 check('green', "texture that is only using the smallest 2 mips");
michael@0 102
michael@0 103 gl.uniform4f(multLoc, 16, 16, 1, 1);
michael@0 104
michael@0 105 check('cyan', "texture that is using only the largest 2 mips");
michael@0 106
michael@0 107 // Set the top level
michael@0 108 fillLevel(tex, 0, 1, 'red');
michael@0 109 check('red',
michael@0 110 "texture that is only using the top level even though other levels are defined");
michael@0 111
michael@0 112 // Set the top 2 levels using generateMipmap
michael@0 113 fillLevel(tex, 0, 2, 'blue');
michael@0 114 generateMipmap();
michael@0 115
michael@0 116 check('blue',
michael@0 117 "texture that is only using the top 2 levels even though other levels are defined");
michael@0 118
michael@0 119 // Set the top 2 levels back to sizes that end up using levels 2, 3, and 4 again.
michael@0 120 fillLevel(tex, 0, 16, 'blue');
michael@0 121 fillLevel(tex, 1, 8, 'blue');
michael@0 122 check('blue', "texture that is only using the largest 2 mips");
michael@0 123 gl.uniform4f(multLoc, 1, 1, 1, 1);
michael@0 124 check('green', "texture that is only using the smallest 2 mips");
michael@0 125
michael@0 126 // ----------------------------------------------------
michael@0 127 var tex = createTexture();
michael@0 128 gl.uniform4f(multLoc, 1, 1, 1, 1);
michael@0 129 fillLevel(tex, 0, 8, 'cyan');
michael@0 130 generateMipmap();
michael@0 131 check('cyan', "texture that has 3 mips");
michael@0 132
michael@0 133 fillLevel(tex, 0, 16, 'blue');
michael@0 134 texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
michael@0 135 check('blue', "texture that is only using top mips");
michael@0 136
michael@0 137 fillLevel(tex, 0, 8, 'red');
michael@0 138 texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
michael@0 139 check('cyan', "texture that is only using smallest mips");
michael@0 140
michael@0 141 gl.uniform4f(multLoc, 16, 16, 1, 1);
michael@0 142 check('red', "texture that is using only the largest mip");
michael@0 143
michael@0 144 // ----------------------------------------------------
michael@0 145 var tex = createTexture();
michael@0 146 gl.uniform4f(multLoc, 1, 1, 1, 1);
michael@0 147 fillLevel(tex, 2, 1, 'green');
michael@0 148 fillLevel(tex, 1, 2, 'green');
michael@0 149 fillLevel(tex, 0, 4, 'green');
michael@0 150 check('green', "texture that was built smallest mip first");
michael@0 151
michael@0 152 // ----------------------------------------------------
michael@0 153 var tex = createTexture();
michael@0 154 gl.uniform4f(multLoc, 1, 1, 1, 1);
michael@0 155 fillLevel(tex, 0, 16, 'red');
michael@0 156 generateMipmap();
michael@0 157 check('red', "texture with 1 genmipmaps");
michael@0 158 fillLevel(tex, 0, 16, 'blue');
michael@0 159 generateMipmap();
michael@0 160 fillLevel(tex, 0, 16, 'green');
michael@0 161 generateMipmap();
michael@0 162 check('green', "texture with 2 genmipmaps");
michael@0 163
michael@0 164 // ----------------------------------------------------
michael@0 165 glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");
michael@0 166
michael@0 167 function createTexture() {
michael@0 168 debug("<hr/>gl.createTexture()");
michael@0 169 mips = [];
michael@0 170 makeDivMipChain();
michael@0 171 return gl.createTexture();
michael@0 172 }
michael@0 173
michael@0 174 function texParameteri(target, pname, value) {
michael@0 175 debug("gl.texParameteri(" +
michael@0 176 wtu.glEnumToString(gl, target) + ", " +
michael@0 177 wtu.glEnumToString(gl, pname) + ", " +
michael@0 178 wtu.glEnumToString(gl, value) + ")")
michael@0 179 gl.texParameteri(target, pname, value);
michael@0 180 }
michael@0 181
michael@0 182 function generateMipmap() {
michael@0 183 debug("gl.genreateMipmap(gl.TEXTURE_2D)");
michael@0 184 gl.generateMipmap(gl.TEXTURE_2D);
michael@0 185 var mip0 = mips[0];
michael@0 186 var size = mip0.size;
michael@0 187 var level = 1;
michael@0 188 for(;;) {
michael@0 189 size = Math.floor(size / 2);
michael@0 190 if (!size) {
michael@0 191 break;
michael@0 192 }
michael@0 193 setMipData(level, size, mip0.color);
michael@0 194 ++level;
michael@0 195 }
michael@0 196 makeDivMipChain();
michael@0 197 }
michael@0 198
michael@0 199 function check(color, msg) {
michael@0 200 wtu.drawQuad(gl);
michael@0 201 wtu.checkCanvas(gl, colors[color], msg + " should draw with " + color);
michael@0 202 }
michael@0 203
michael@0 204 function fillLevel(tex, level, size, color) {
michael@0 205 setMipData(level, size, color);
michael@0 206 debug("gl.texImage2D(gl.TEXTURE_2D, " + level + ", gl.RGBA, " + size + ", " + size +
michael@0 207 ", 0, gl.RGBA, gl.UNSIGNED_BYTE, " + color + ");");
michael@0 208 wtu.fillTexture(gl, tex, size, size, colors[color], level);
michael@0 209 makeDivMipChain();
michael@0 210 }
michael@0 211
michael@0 212 function setMipData(level, size, color) {
michael@0 213 mips[level] = {
michael@0 214 size: size,
michael@0 215 color: color
michael@0 216 };
michael@0 217 }
michael@0 218
michael@0 219 function makeDivMipChain(color) {
michael@0 220 var html = [
michael@0 221 '<div style="height: 68px; margin-top: 5px">',
michael@0 222 '<div style="float:left;">mips: </div>'];
michael@0 223 for (var ii = 0; ii < 5; ++ii) {
michael@0 224 var mip = mips[ii];
michael@0 225 if (mip) {
michael@0 226 html.push(makeDivSquare(mip.size, mip.color));
michael@0 227 } else {
michael@0 228 html.push(makeDivSquare(16, undefined));
michael@0 229 }
michael@0 230 }
michael@0 231 html.push("</div>");
michael@0 232 debug(html.join(""));
michael@0 233 }
michael@0 234
michael@0 235 function makeDivSquare(size, color) {
michael@0 236 size *= 4;
michael@0 237 var c = color ? colors[color] : [255,255,255];
michael@0 238 var border = color ? 'solid' : 'dashed';
michael@0 239 return '<div style="float:left; width: ' + size + 'px; height: ' + size +
michael@0 240 'px; background-color: ' + rgb(c) +
michael@0 241 '; border: 1px ' + border + ' black; margin-right: 3px;"></div>';
michael@0 242 }
michael@0 243
michael@0 244 function rgb(c) {
michael@0 245 return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')';
michael@0 246 }
michael@0 247 }
michael@0 248
michael@0 249 init();
michael@0 250 successfullyParsed = true;
michael@0 251 </script>
michael@0 252
michael@0 253 <script>finishTest();</script>
michael@0 254 </body>
michael@0 255 </html>
michael@0 256

mercurial