glsl-function-texture2dprojlod.html (5546B)
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="vshader2dvec3" type="x-shader/x-vertex"> 22 attribute vec4 vPosition; 23 varying vec4 color; 24 uniform sampler2D tex; 25 uniform float divisor; 26 uniform float lod; 27 void main() { 28 gl_Position = vPosition; 29 color = texture2DProjLod(tex, vec3(0.75 * divisor, 0.25 * divisor, divisor), lod); 30 } 31 </script> 32 <script id="vshader2dvec4" type="x-shader/x-vertex"> 33 attribute vec4 vPosition; 34 varying vec4 color; 35 uniform sampler2D tex; 36 uniform float divisor; 37 uniform float lod; 38 void main() { 39 gl_Position = vPosition; 40 color = texture2DProjLod(tex, vec4(0.75 * divisor, 0.25 * divisor, 123.0, divisor), lod); 41 } 42 </script> 43 <script id="fshader2d" type="x-shader/x-fragment"> 44 precision mediump float; 45 varying vec4 color; 46 void main() { 47 gl_FragData[0] = color; 48 } 49 </script> 50 <script> 51 "use strict"; 52 description("tests GLSL texture2DProjLod function"); 53 54 var wtu = WebGLTestUtils; 55 var canvas = document.getElementById("example"); 56 57 shouldBe("canvas.width", "256"); 58 shouldBe("canvas.height", "256"); 59 60 var colors = [ 61 {name: 'red', color:[255, 0, 0, 255]}, 62 {name: 'green', color:[0, 255, 0, 255]}, 63 {name: 'blue', color:[0, 0, 255, 255]}, 64 {name: 'yellow', color:[255, 255, 0, 255]}, 65 {name: 'magenta', color:[255, 0, 255, 255]}, 66 {name: 'cyan', color:[0, 255, 255, 255]}, 67 {name: 'pink', color:[255, 128, 128, 255]}, 68 {name: 'gray', color:[128, 128, 128, 255]}, 69 {name: 'light green', color:[128, 255, 128, 255]}, 70 ]; 71 var contextTypes = ["2d", "webgl"]; 72 var vectorTypes = ["vec3", "vec4"]; 73 74 var gl = wtu.create3DContext(canvas); 75 if (gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) > 0) { 76 runTest(); 77 } else { 78 testPassed("MAX_VERTEX_TEXTURE_IMAGE_UNITS == 0, this is okay."); 79 } 80 81 82 function runTest() { 83 // Avoid creating a WebGL context for every test, as it causes: 84 // Too many active WebGL contexts. Oldest context will be lost. 85 var canvasWebGL = document.createElement("canvas"); 86 var ctxWebGL = canvasWebGL.getContext("webgl"); 87 88 // Might as well do the same for canvas 2d 89 var canvas2d = document.createElement("canvas"); 90 var ctx2d = canvas2d.getContext("2d"); 91 92 shouldBe("colors.length", "9"); 93 contextTypes.forEach((context) => { 94 vectorTypes.forEach((vectorType) => { 95 debug(""); 96 debug(`testing ${context} context with ${vectorType} vertex shader`); 97 var program = wtu.setupProgram( 98 gl, ['vshader2d' + vectorType, 'fshader2d'], ['vPosition', 'texCoord0'], [0, 1]); 99 wtu.setupUnitQuad(gl, 0, 1); 100 101 var tex = gl.createTexture(); 102 gl.bindTexture(gl.TEXTURE_2D, tex); 103 gl.texParameteri( 104 gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); 105 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 106 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 107 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 108 109 // Fill the top right quadrant of each texture level with one of the colors 110 for (var ii = 0; ii < colors.length; ++ii) { 111 var color = colors[ii]; 112 var size = Math.pow(2, colors.length - ii - 1); 113 114 if (context === "2d") { 115 canvas2d.width = size; 116 canvas2d.height = size; 117 ctx2d.fillStyle = "rgb(0,0,0)"; 118 ctx2d.fillRect(0, 0, size, size); 119 ctx2d.fillStyle = "rgb(" + color.color[0] + "," + color.color[1] + "," + color.color[2] + ")"; 120 ctx2d.fillRect(size / 2, 0, size / 2, size / 2); 121 gl.texImage2D(gl.TEXTURE_2D, ii, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d); 122 } else if (context === "webgl") { 123 canvasWebGL.width = canvasWebGL.height = size; 124 ctxWebGL.clearColor(0, 0, 0, 1); 125 ctxWebGL.clear(gl.COLOR_BUFFER_BIT); 126 ctxWebGL.enable(gl.SCISSOR_TEST); 127 ctxWebGL.scissor(size/2, size/2, size/2, size/2) 128 ctxWebGL.clearColor(color.color[0]/255, color.color[1]/255, color.color[2]/255, 1) 129 ctxWebGL.clear(gl.COLOR_BUFFER_BIT); 130 gl.texImage2D(gl.TEXTURE_2D, ii, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvasWebGL); 131 } 132 } 133 134 var lodLoc = gl.getUniformLocation(program, "lod"); 135 var divLoc = gl.getUniformLocation(program, "divisor"); 136 137 for (var div = 1; div < 4; ++div) { 138 for (var ii = 0; ii < colors.length - 1; ++ii) { 139 gl.uniform1f(lodLoc, ii); 140 gl.uniform1f(divLoc, div); 141 var lodColor = colors[ii]; 142 var size = Math.pow(2, colors.length - ii - 1); 143 wtu.clearAndDrawUnitQuad(gl); 144 wtu.checkCanvas( 145 gl, lodColor.color, 146 "sampling with lod = " + ii + 147 " divider = " + div + 148 " should be " + lodColor.name); 149 } 150 } 151 }); 152 }); 153 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors."); 154 } 155 156 var successfullyParsed = true; 157 158 </script> 159 <script src="../../../js/js-test-post.js"></script> 160 161 </body> 162 </html>