dom/canvas/test/webgl-conf/checkout/conformance/glsl/samplers/glsl-function-texture2d-bias.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL texture2D GLSL conformance test.</title>
  12 <link rel="stylesheet" href="../../../resources/js-test-style.css"/>
  13 <link rel="stylesheet" href="../../../resources/glsl-feature-tests.css"/>
  14 <script src="../../../js/js-test-pre.js"></script>
  15 <script src="../../../js/webgl-test-utils.js"> </script>
  16 </head>
  17 <body>
  18 <canvas id="example" width="256" height="256" style="width: 16px; height: 16px;"></canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script id="vshader2d" type="x-shader/x-vertex">
  22 attribute vec4 vPosition;
  23 attribute vec2 texCoord0;
  24 varying vec2 texCoord;
  25 void main() {
  26     gl_Position = vPosition;
  27     texCoord = texCoord0;
  28 }
  29 </script>
  30 <script id="fshader2d" type="x-shader/x-fragment">
  31 precision mediump float;
  32 uniform sampler2D tex;
  33 uniform float bias;
  34 varying vec2 texCoord;
  35 void main() {
  36     gl_FragData[0] = texture2D(tex, texCoord, bias);
  37 }
  38 </script>
  39 <script>
  40 "use strict";
  41 description("tests GLSL texture2D function with bias");
  42
  43 var wtu = WebGLTestUtils;
  44 var canvas = document.getElementById("example");
  45
  46 shouldBe("canvas.width", "256");
  47 shouldBe("canvas.height", "256");
  48
  49 var gl = wtu.create3DContext(canvas);
  50 var program = wtu.setupProgram(
  51     gl, ['vshader2d', 'fshader2d'], ['vPosition', 'texCoord0'], [0, 1]);
  52 wtu.setupUnitQuad(gl, 0, 1);
  53
  54 var colors = [
  55   {name: 'red', color:[255, 0, 0, 255]},
  56   {name: 'green', color:[0, 255, 0, 255]},
  57   {name: 'blue', color:[0, 0, 255, 255]},
  58   {name: 'yellow', color:[255, 255, 0, 255]},
  59   {name: 'magenta', color:[255, 0, 255, 255]},
  60   {name: 'cyan', color:[0, 255, 255, 255]},
  61   {name: 'pink', color:[255, 128, 128, 255]},
  62   {name: 'gray', color:[128, 128, 128, 255]},
  63   {name: 'light green', color:[128, 255, 128, 255]},
  64 ];
  65
  66 shouldBe("colors.length", "9");
  67
  68 var tex = gl.createTexture();
  69 gl.bindTexture(gl.TEXTURE_2D, tex);
  70 gl.texParameteri(
  71     gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  72 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  73 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  74 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  75
  76 for (var ii = 0; ii < colors.length; ++ii) {
  77   var color = colors[ii];
  78   var size = Math.pow(2, colors.length - ii - 1);
  79   wtu.fillTexture(gl, tex, size, size, color.color, ii);
  80 }
  81
  82 var loc = gl.getUniformLocation(program, "bias");
  83
  84 for (var ii = 0; ii < colors.length; ++ii) {
  85   gl.uniform1f(loc, ii);
  86   var color = colors[ii];
  87   wtu.clearAndDrawUnitQuad(gl);
  88   wtu.checkCanvas(
  89       gl, color.color,
  90       "256x256 texture drawn to 256x256 dest with bias = " + ii +
  91       " should be " + color.name);
  92 }
  93 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");
  94
  95 var successfullyParsed = true;
  96
  97 </script>
  98 <script src="../../../js/js-test-post.js"></script>
  99
 100 </body>
 101 </html>