1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/webgl-conformance/conformance/textures/texparameter-test.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,188 @@
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 TexParameter 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 +</head>
1.18 +<body>
1.19 +<canvas id="example" width="24" height="24"></canvas>
1.20 +<canvas id="canvas2d" width="2" height="2"></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 mat4 world;
1.25 +attribute vec3 vPosition;
1.26 +attribute vec2 texCoord0;
1.27 +varying vec2 texCoord;
1.28 +void main()
1.29 +{
1.30 + gl_Position = world * vec4(vPosition, 1);
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 +
1.38 +uniform sampler2D tex;
1.39 +varying vec2 texCoord;
1.40 +void main()
1.41 +{
1.42 + gl_FragColor = texture2D(tex, texCoord);
1.43 +}
1.44 +</script>
1.45 +
1.46 +<script>
1.47 +function init()
1.48 +{
1.49 + if (window.initNonKhronosFramework) {
1.50 + window.initNonKhronosFramework(false);
1.51 + }
1.52 +
1.53 + description("Tests TexParameter works as expected");
1.54 + debug("");
1.55 +
1.56 + var canvas2d = document.getElementById("canvas2d");
1.57 + var ctx2d = canvas2d.getContext("2d");
1.58 +
1.59 + gl = initWebGL("example", "vshader", "fshader", [ "vPosition", "texCoord0"],
1.60 + [ 0, 0, 0, 1 ], 1);
1.61 +
1.62 + gl.disable(gl.DEPTH_TEST);
1.63 + gl.disable(gl.BLEND);
1.64 +
1.65 + var vertexObject = gl.createBuffer();
1.66 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
1.67 + gl.bufferData(
1.68 + gl.ARRAY_BUFFER,
1.69 + new Float32Array([-1, 1,0, 1,1,0, -1,-1,0,
1.70 + -1,-1,0, 1,1,0, 1,-1,0]),
1.71 + gl.STATIC_DRAW);
1.72 + gl.enableVertexAttribArray(0);
1.73 + gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
1.74 +
1.75 + var vertexObject = gl.createBuffer();
1.76 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
1.77 + gl.bufferData(
1.78 + gl.ARRAY_BUFFER,
1.79 + new Float32Array([ -2.5,-2.5, 3.5,-2.5, -2.5,3.5,
1.80 + -2.5,3.5, 3.5,-2.5, 3.5,3.5]),
1.81 + gl.STATIC_DRAW);
1.82 + gl.enableVertexAttribArray(1);
1.83 + gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
1.84 +
1.85 + var colors = [
1.86 + [0,255,128,255],
1.87 + [128,64,255,255],
1.88 + [192,255,64,255],
1.89 + [200,0,255,255]];
1.90 + var texParam = [
1.91 + gl.REPEAT,
1.92 + gl.CLAMP_TO_EDGE,
1.93 + gl.MIRRORED_REPEAT,
1.94 + gl.REPEAT];
1.95 +
1.96 + // Make textures setting the texture parameters differently each time..
1.97 + // This verifies both that the render correct AND that texture parameters
1.98 + // are associated with the textures, not with the texture-units.
1.99 + var textures = [];
1.100 + for (var ii = 0; ii < colors.length; ++ii) {
1.101 + var c = colors[ii];
1.102 + ctx2d.fillStyle =
1.103 + "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + c[3] + ")";
1.104 + ctx2d.fillRect(0, 0, 1, 1);
1.105 + var tex = gl.createTexture();
1.106 + gl.bindTexture(gl.TEXTURE_2D, tex);
1.107 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);
1.108 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
1.109 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
1.110 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParam[ii]);
1.111 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParam[ii]);
1.112 + textures[ii] = tex;
1.113 + }
1.114 +
1.115 + var textureLoc = gl.getUniformLocation(gl.program, "tex");
1.116 + var worldLoc = gl.getUniformLocation(gl.program, "world");
1.117 +
1.118 + gl.clearColor(1,1,1,1);
1.119 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
1.120 +
1.121 + for (var ii = 0; ii < colors.length; ++ii) {
1.122 + var x = ii % 2;
1.123 + var y = Math.floor(ii / 2);
1.124 + gl.bindTexture(gl.TEXTURE_2D, textures[ii]);
1.125 + gl.uniformMatrix4fv(
1.126 + worldLoc, false,
1.127 + [0.5, 0, 0, 0,
1.128 + 0, 0.5, 0, 0,
1.129 + 0, 0, 1, 0,
1.130 + -0.5 + x, -0.5 + y, 0, 1]);
1.131 + gl.drawArrays(gl.TRIANGLES, 0, 6);
1.132 + }
1.133 +
1.134 + var buf = new Uint8Array(24 * 24 * 4);
1.135 + gl.readPixels(0, 0, 24, 24, gl.RGBA, gl.UNSIGNED_BYTE, buf);
1.136 + var passed = true;
1.137 + for (var ii = 0; ii < colors.length; ++ii) {
1.138 + var x = ii % 2;
1.139 + var y = Math.floor(ii / 2);
1.140 + var c = colors[ii];
1.141 + for (var yy = 0; yy < 12; ++yy) {
1.142 + for (var xx = 0; xx < 12; ++xx) {
1.143 + var ec = [0,0,0,0];
1.144 + switch (texParam[ii]) {
1.145 + case gl.REPEAT:
1.146 + if (xx % 2 == 1 && yy % 2 == 0) {
1.147 + ec = c;
1.148 + }
1.149 + break;
1.150 + case gl.CLAMP_TO_EDGE:
1.151 + if (xx < 6 && yy >= 6) {
1.152 + ec = c;
1.153 + }
1.154 + break;
1.155 + case gl.MIRRORED_REPEAT:
1.156 + if (xx % 4 < 2 && yy % 4 >= 2) {
1.157 + ec = c;
1.158 + }
1.159 + break;
1.160 + }
1.161 + var off = ((y * 12 + yy) * 24 + x * 12 + xx) * 4;
1.162 + if (buf[off + 0] != ec[0] ||
1.163 + buf[off + 1] != ec[1] ||
1.164 + buf[off + 2] != ec[2] ||
1.165 + buf[off + 3] != ec[3]) {
1.166 + var msg = 'at (' + (x * 12 + xx) + ', ' + (y * 12 + yy) +
1.167 + ') expected: ' +
1.168 + ec[0] + ', ' + ec[1] + ', ' + ec[2] + ', ' + ec[3] + ' found: ' +
1.169 + buf[off + 0] + ', ' +
1.170 + buf[off + 1] + ', ' +
1.171 + buf[off + 2] + ', ' +
1.172 + buf[off + 3];
1.173 + testFailed(msg);
1.174 + passed = false;
1.175 + }
1.176 + }
1.177 + }
1.178 + }
1.179 + if (passed) {
1.180 + testPassed("rendered as expected");
1.181 + }
1.182 +}
1.183 +
1.184 +init();
1.185 +successfullyParsed = true;
1.186 +</script>
1.187 +<script>finishTest();</script>
1.188 +
1.189 +</body>
1.190 +</html>
1.191 +
