dom/canvas/test/webgl-conf/checkout/conformance/glsl/samplers/glsl-function-texture2dlod.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 vec4 color;
  25 uniform sampler2D tex;
  26 uniform float lod;
  27 void main() {
  28     gl_Position = vPosition;
  29     color = texture2DLod(tex, texCoord0, lod);
  30 }
  31 </script>
  32 <script id="fshader2d" type="x-shader/x-fragment">
  33 precision mediump float;
  34 varying vec4 color;
  35 void main() {
  36     gl_FragData[0] = color;
  37 }
  38 </script>
  39 <script>
  40 "use strict";
  41 description("tests GLSL texture2DLod function");
  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 colors = [
  50   {name: 'red', color:[255, 0, 0, 255]},
  51   {name: 'green', color:[0, 255, 0, 255]},
  52   {name: 'blue', color:[0, 0, 255, 255]},
  53   {name: 'yellow', color:[255, 255, 0, 255]},
  54   {name: 'magenta', color:[255, 0, 255, 255]},
  55   {name: 'cyan', color:[0, 255, 255, 255]},
  56   {name: 'pink', color:[255, 128, 128, 255]},
  57   {name: 'gray', color:[128, 128, 128, 255]},
  58   {name: 'light green', color:[128, 255, 128, 255]},
  59 ];
  60
  61 var gl = wtu.create3DContext(canvas);
  62 if (gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) > 0) {
  63   runTest();
  64 } else {
  65   testPassed("MAX_VERTEX_TEXTURE_IMAGE_UNITS == 0, this is okay.");
  66 }
  67
  68 function runTest() {
  69   var program = wtu.setupProgram(
  70       gl, ['vshader2d', 'fshader2d'], ['vPosition', 'texCoord0'], [0, 1]);
  71   wtu.setupUnitQuad(gl, 0, 1);
  72
  73   shouldBe("colors.length", "9");
  74
  75   var tex = gl.createTexture();
  76   gl.bindTexture(gl.TEXTURE_2D, tex);
  77   gl.texParameteri(
  78       gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
  79   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  80   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  81   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  82
  83   for (var ii = 0; ii < colors.length; ++ii) {
  84     var color = colors[ii];
  85     var size = Math.pow(2, colors.length - ii - 1);
  86     wtu.fillTexture(gl, tex, size, size, color.color, ii);
  87   }
  88
  89   var loc = gl.getUniformLocation(program, "lod");
  90
  91   for (var ii = 0; ii < colors.length; ++ii) {
  92     gl.uniform1f(loc, ii);
  93     var color = colors[ii];
  94     wtu.clearAndDrawUnitQuad(gl);
  95     wtu.checkCanvas(
  96         gl, color.color,
  97         "256x256 texture drawn to 256x256 dest with lod = " + ii +
  98         " should be " + color.name);
  99   }
 100   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors.");
 101 }
 102
 103 var successfullyParsed = true;
 104
 105 </script>
 106 <script src="../../../js/js-test-post.js"></script>
 107
 108 </body>
 109 </html>