LayoutTests/http/tests/webgl/1.0.2/resources/webgl_test_files/conformance/textures/texture-mips.html - WebKit - Git at Google

 <!--

 /*
 ** Copyright (c) 2012 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">
 <title>WebGL texture mips conformance test.</title>
 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
 <script src="../../resources/js-test-pre.js"></script>
 <script src="../resources/webgl-test.js"> </script>
 <script src="../resources/webgl-test-utils.js"></script>
 </head>
 <body>
 <canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas>
 <div id="description"></div>
 <div id="console"></div>
 <script id="vshader" type="x-shader/x-vertex">
 uniform vec4 uMult;
 attribute vec4 vPosition;
 attribute vec2 texCoord0;
 varying vec2 texCoord;
 void main()
 {
     gl_Position = vPosition * uMult;
     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 canvas;
 var wtu = WebGLTestUtils;
 function init()
 {
   description("Checks mip issues");

   canvas = document.getElementById("example");
   shouldBe("canvas.width", "2");
   shouldBe("canvas.height", "2");

   var gl = wtu.create3DContext(canvas);

   var tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.generateMipmap(gl.TEXTURE_2D);
   glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");
   gl.texImage2D(
       gl.TEXTURE_2D, 1, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
       new Uint8Array(4));
   gl.generateMipmap(gl.TEXTURE_2D);
   glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");

   tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
   gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
   glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");

   var faces = [
     gl.TEXTURE_CUBE_MAP_POSITIVE_X,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
     gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
     gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
   ];
   for (var ii = 0; ii < faces.length; ++ii) {
     gl.texImage2D(
         faces[ii], 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE,
         new Uint8Array(4 * 2 * 2));
     gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
     glErrorShouldBe(gl, ii == 5 ? gl.NO_ERROR : gl.INVALID_OPERATION, "for generateMipmap with " + (ii + 1) + " faces");
   }

   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 = {
     blue: [0, 0, 255, 255],
     red: [255, 0, 0, 255],
     green:  [0, 255, 0, 255],
     cyan: [128, 255, 255, 255],
     black: [0, 0, 0, 255],
     blank: [0, 0, 0, 0]
   };

   var mips = [
   ];

   var texLoc = gl.getUniformLocation(program, "tex");
   gl.uniform1i(texLoc, 0);
   var multLoc = gl.getUniformLocation(program, "uMult");

   // ----------------------------------------------------
   var clearTex = createTexture();
   gl.uniform4f(multLoc, 1, 1, 1, 1);
   gl.bindTexture(gl.TEXTURE_2D, clearTex);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 16, 16, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
   debug('gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 16, 16, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);');
   setMipData(0, 16, 'blank');
   makeDivMipChain();
   generateMipmap();
   check('blank', "texture created with null that has all mips");

   // ----------------------------------------------------
   var tex = createTexture();
   gl.uniform4f(multLoc, 1, 1, 1, 1);

   gl.bindTexture(gl.TEXTURE_2D, tex);
   // 16x16 texture no mips
   fillLevel(tex, 0, 16, 'cyan');

   check('black',
         "texture that is missing mips when TEXTURE_MIN_FILTER not NEAREST or LINEAR");

   generateMipmap();

   check('cyan', "texture that has all mips");

   // Fill in the bottom 2 mips with a different color.
   fillLevel(tex, 4, 1, 'green');
   fillLevel(tex, 3, 2, 'green');

   // Choose the nearest mip
   texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

   check('green', "texture that is only using the smallest 2 mips");

   gl.uniform4f(multLoc, 16, 16, 1, 1);

   check('cyan', "texture that is using only the largest 2 mips");

   // Set the top level
   fillLevel(tex, 0, 1, 'red');
   check('red',
         "texture that is only using the top level even though other levels are defined");

   // Set the top 2 levels using generateMipmap
   fillLevel(tex, 0, 2, 'blue');
   generateMipmap();

   check('blue',
         "texture that is only using the top 2 levels even though other levels are defined");

   // Set the top 2 levels back to sizes that end up using levels 2, 3, and 4 again.
   fillLevel(tex, 0, 16, 'blue');
   fillLevel(tex, 1, 8, 'blue');
   check('blue', "texture that is only using the largest 2 mips");
   gl.uniform4f(multLoc, 1, 1, 1, 1);
   check('green', "texture that is only using the smallest 2 mips");

   // ----------------------------------------------------
   var tex = createTexture();
   gl.uniform4f(multLoc, 1, 1, 1, 1);
   fillLevel(tex, 0, 8, 'cyan');
   generateMipmap();
   check('cyan', "texture that has 3 mips");

   fillLevel(tex, 0, 16, 'blue');
   texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   check('blue', "texture that is only using top mips");

   fillLevel(tex, 0, 8, 'red');
   texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
   check('cyan', "texture that is only using smallest mips");

   gl.uniform4f(multLoc, 16, 16, 1, 1);
   check('red', "texture that is using only the largest mip");

   // ----------------------------------------------------
   var tex = createTexture();
   gl.uniform4f(multLoc, 1, 1, 1, 1);
   fillLevel(tex, 2, 1, 'green');
   fillLevel(tex, 1, 2, 'green');
   fillLevel(tex, 0, 4, 'green');
   check('green', "texture that was built smallest mip first");

   // ----------------------------------------------------
   var tex = createTexture();
   gl.uniform4f(multLoc, 1, 1, 1, 1);
   fillLevel(tex, 0, 16, 'red');
   generateMipmap();
   check('red', "texture with 1 genmipmaps");
   fillLevel(tex, 0, 16, 'blue');
   generateMipmap();
   fillLevel(tex, 0, 16, 'green');
   generateMipmap();
   check('green', "texture with 2 genmipmaps");

   // ----------------------------------------------------
   glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");

   function createTexture() {
     debug("<hr/>gl.createTexture()");
     mips = [];
     makeDivMipChain();
     return gl.createTexture();
   }

   function texParameteri(target, pname, value) {
     debug("gl.texParameteri(" +
           wtu.glEnumToString(gl, target) + ", " +
           wtu.glEnumToString(gl, pname) + ", " +
           wtu.glEnumToString(gl, value) + ")")
     gl.texParameteri(target, pname, value);
   }

   function generateMipmap() {
     debug("gl.generateMipmap(gl.TEXTURE_2D)");
     gl.generateMipmap(gl.TEXTURE_2D);
     var mip0 = mips[0];
     var size = mip0.size;
     var level = 1;
     for(;;) {
       size = Math.floor(size / 2);
       if (!size) {
         break;
       }
       setMipData(level, size, mip0.color);
       ++level;
     }
     makeDivMipChain();
   }

   function check(color, msg) {
     wtu.clearAndDrawUnitQuad(gl);
     wtu.checkCanvas(gl, colors[color], msg + " should draw with " + color);
   }

   function fillLevel(tex, level, size, color) {
     setMipData(level, size, color);
     debug("gl.texImage2D(gl.TEXTURE_2D, " + level + ", gl.RGBA, " + size + ", " + size +
           ", 0, gl.RGBA, gl.UNSIGNED_BYTE, " + color + ");");
     wtu.fillTexture(gl, tex, size, size, colors[color], level);
     makeDivMipChain();
   }

   function setMipData(level, size, color) {
     mips[level] = {
       size: size,
       color: color
     };
   }

   function makeDivMipChain(color) {
     var html = [
       '<div style="height: 68px; margin-top: 5px">',
       '<div style="float:left;">mips: </div>'];
     for (var ii = 0; ii < 5; ++ii) {
       var mip = mips[ii];
       if (mip) {
         html.push(makeDivSquare(mip.size, mip.color));
       } else {
         html.push(makeDivSquare(16, undefined));
       }
     }
     html.push("</div>");
     debug(html.join(""));
   }

   function makeDivSquare(size, color) {
     size *= 4;
     var c = color ? colors[color] : [255,255,255];
     var border = color ? 'solid' : 'dashed';
     return '<div style="float:left; width: ' + size + 'px; height: ' + size +
            'px; background-color: ' + rgb(c) +
            '; border: 1px ' + border + ' black; margin-right: 3px;"></div>';
   }

   function rgb(c) {
     return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')';
   }
 }

 init();
 var successfullyParsed = true;
 </script>

 <script src="../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!--

	/*
	** Copyright (c) 2012 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">
	<title>WebGL texture mips conformance test.</title>
	<link rel="stylesheet" href="../../resources/js-test-style.css"/>
	<script src="../../resources/js-test-pre.js"></script>
	<script src="../resources/webgl-test.js"> </script>
	<script src="../resources/webgl-test-utils.js"></script>
	</head>
	<body>
	<canvas id="example" width="2" height="2" style="width: 40px; height: 40px;"></canvas>
	<div id="description"></div>
	<div id="console"></div>
	<script id="vshader" type="x-shader/x-vertex">
	uniform vec4 uMult;
	attribute vec4 vPosition;
	attribute vec2 texCoord0;
	varying vec2 texCoord;
	void main()
	{
	gl_Position = vPosition * uMult;
	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 canvas;
	var wtu = WebGLTestUtils;
	function init()
	{
	description("Checks mip issues");

	canvas = document.getElementById("example");
	shouldBe("canvas.width", "2");
	shouldBe("canvas.height", "2");

	var gl = wtu.create3DContext(canvas);

	var tex = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, tex);
	gl.generateMipmap(gl.TEXTURE_2D);
	glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");
	gl.texImage2D(
	gl.TEXTURE_2D, 1, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
	new Uint8Array(4));
	gl.generateMipmap(gl.TEXTURE_2D);
	glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");

	tex = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
	gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
	glErrorShouldBe(gl, gl.INVALID_OPERATION, "for generateMipmap with mip 0 is 0x0");

	var faces = [
	gl.TEXTURE_CUBE_MAP_POSITIVE_X,
	gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
	gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
	gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
	gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
	gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
	];
	for (var ii = 0; ii < faces.length; ++ii) {
	gl.texImage2D(
	faces[ii], 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE,
	new Uint8Array(4 * 2 * 2));
	gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
	glErrorShouldBe(gl, ii == 5 ? gl.NO_ERROR : gl.INVALID_OPERATION, "for generateMipmap with " + (ii + 1) + " faces");
	}

	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 = {
	blue: [0, 0, 255, 255],
	red: [255, 0, 0, 255],
	green: [0, 255, 0, 255],
	cyan: [128, 255, 255, 255],
	black: [0, 0, 0, 255],
	blank: [0, 0, 0, 0]
	};

	var mips = [
	];

	var texLoc = gl.getUniformLocation(program, "tex");
	gl.uniform1i(texLoc, 0);
	var multLoc = gl.getUniformLocation(program, "uMult");

	// ----------------------------------------------------
	var clearTex = createTexture();
	gl.uniform4f(multLoc, 1, 1, 1, 1);
	gl.bindTexture(gl.TEXTURE_2D, clearTex);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 16, 16, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
	debug('gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 16, 16, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);');
	setMipData(0, 16, 'blank');
	makeDivMipChain();
	generateMipmap();
	check('blank', "texture created with null that has all mips");

	// ----------------------------------------------------
	var tex = createTexture();
	gl.uniform4f(multLoc, 1, 1, 1, 1);

	gl.bindTexture(gl.TEXTURE_2D, tex);
	// 16x16 texture no mips
	fillLevel(tex, 0, 16, 'cyan');

	check('black',
	"texture that is missing mips when TEXTURE_MIN_FILTER not NEAREST or LINEAR");

	generateMipmap();

	check('cyan', "texture that has all mips");

	// Fill in the bottom 2 mips with a different color.
	fillLevel(tex, 4, 1, 'green');
	fillLevel(tex, 3, 2, 'green');

	// Choose the nearest mip
	texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

	check('green', "texture that is only using the smallest 2 mips");

	gl.uniform4f(multLoc, 16, 16, 1, 1);

	check('cyan', "texture that is using only the largest 2 mips");

	// Set the top level
	fillLevel(tex, 0, 1, 'red');
	check('red',
	"texture that is only using the top level even though other levels are defined");

	// Set the top 2 levels using generateMipmap
	fillLevel(tex, 0, 2, 'blue');
	generateMipmap();

	check('blue',
	"texture that is only using the top 2 levels even though other levels are defined");

	// Set the top 2 levels back to sizes that end up using levels 2, 3, and 4 again.
	fillLevel(tex, 0, 16, 'blue');
	fillLevel(tex, 1, 8, 'blue');
	check('blue', "texture that is only using the largest 2 mips");
	gl.uniform4f(multLoc, 1, 1, 1, 1);
	check('green', "texture that is only using the smallest 2 mips");

	// ----------------------------------------------------
	var tex = createTexture();
	gl.uniform4f(multLoc, 1, 1, 1, 1);
	fillLevel(tex, 0, 8, 'cyan');
	generateMipmap();
	check('cyan', "texture that has 3 mips");

	fillLevel(tex, 0, 16, 'blue');
	texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	check('blue', "texture that is only using top mips");

	fillLevel(tex, 0, 8, 'red');
	texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
	check('cyan', "texture that is only using smallest mips");

	gl.uniform4f(multLoc, 16, 16, 1, 1);
	check('red', "texture that is using only the largest mip");

	// ----------------------------------------------------
	var tex = createTexture();
	gl.uniform4f(multLoc, 1, 1, 1, 1);
	fillLevel(tex, 2, 1, 'green');
	fillLevel(tex, 1, 2, 'green');
	fillLevel(tex, 0, 4, 'green');
	check('green', "texture that was built smallest mip first");

	// ----------------------------------------------------
	var tex = createTexture();
	gl.uniform4f(multLoc, 1, 1, 1, 1);
	fillLevel(tex, 0, 16, 'red');
	generateMipmap();
	check('red', "texture with 1 genmipmaps");
	fillLevel(tex, 0, 16, 'blue');
	generateMipmap();
	fillLevel(tex, 0, 16, 'green');
	generateMipmap();
	check('green', "texture with 2 genmipmaps");

	// ----------------------------------------------------
	glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");

	function createTexture() {
	debug("<hr/>gl.createTexture()");
	mips = [];
	makeDivMipChain();
	return gl.createTexture();
	}

	function texParameteri(target, pname, value) {
	debug("gl.texParameteri(" +
	wtu.glEnumToString(gl, target) + ", " +
	wtu.glEnumToString(gl, pname) + ", " +
	wtu.glEnumToString(gl, value) + ")")
	gl.texParameteri(target, pname, value);
	}

	function generateMipmap() {
	debug("gl.generateMipmap(gl.TEXTURE_2D)");
	gl.generateMipmap(gl.TEXTURE_2D);
	var mip0 = mips[0];
	var size = mip0.size;
	var level = 1;
	for(;;) {
	size = Math.floor(size / 2);
	if (!size) {
	break;
	}
	setMipData(level, size, mip0.color);
	++level;
	}
	makeDivMipChain();
	}

	function check(color, msg) {
	wtu.clearAndDrawUnitQuad(gl);
	wtu.checkCanvas(gl, colors[color], msg + " should draw with " + color);
	}

	function fillLevel(tex, level, size, color) {
	setMipData(level, size, color);
	debug("gl.texImage2D(gl.TEXTURE_2D, " + level + ", gl.RGBA, " + size + ", " + size +
	", 0, gl.RGBA, gl.UNSIGNED_BYTE, " + color + ");");
	wtu.fillTexture(gl, tex, size, size, colors[color], level);
	makeDivMipChain();
	}

	function setMipData(level, size, color) {
	mips[level] = {
	size: size,
	color: color
	};
	}

	function makeDivMipChain(color) {
	var html = [
	'<div style="height: 68px; margin-top: 5px">',
	'<div style="float:left;">mips: </div>'];
	for (var ii = 0; ii < 5; ++ii) {
	var mip = mips[ii];
	if (mip) {
	html.push(makeDivSquare(mip.size, mip.color));
	} else {
	html.push(makeDivSquare(16, undefined));
	}
	}
	html.push("</div>");
	debug(html.join(""));
	}

	function makeDivSquare(size, color) {
	size *= 4;
	var c = color ? colors[color] : [255,255,255];
	var border = color ? 'solid' : 'dashed';
	return '<div style="float:left; width: ' + size + 'px; height: ' + size +
	'px; background-color: ' + rgb(c) +
	'; border: 1px ' + border + ' black; margin-right: 3px;"></div>';
	}

	function rgb(c) {
	return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] +')';
	}
	}

	init();
	var successfullyParsed = true;
	</script>

	<script src="../../resources/js-test-post.js"></script>
	</body>
	</html>