webgl-polygon-mode.html (6221B)
1 <!-- 2 Copyright (c) 2023 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 WEBGL_polygon_mode Conformance Tests</title> 12 <LINK rel="stylesheet" href="../../resources/js-test-style.css"/> 13 <script src="../../js/js-test-pre.js"></script> 14 <script src="../../js/webgl-test-utils.js"></script> 15 </head> 16 <body> 17 <canvas width="32" height="32" id="c"></canvas> 18 <div id="description"></div> 19 <div id="console"></div> 20 <script> 21 "use strict"; 22 description("This test verifies the functionality of the WEBGL_polygon_mode extension, if it is available."); 23 24 debug(""); 25 26 var wtu = WebGLTestUtils; 27 var gl = wtu.create3DContext("c"); 28 var ext; 29 const w = gl.drawingBufferWidth; 30 const h = gl.drawingBufferHeight; 31 32 function runTestNoExtension() { 33 debug(""); 34 debug("Check the parameters without the extension"); 35 shouldBeNull("gl.getParameter(0x0B40 /* POLYGON_MODE_WEBGL */)"); 36 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "parameter unknown without enabling the extension"); 37 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 38 shouldBeNull("gl.getParameter(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */)"); 39 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "parameter unknown without enabling the extension"); 40 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 41 42 debug("Check the cap without the extension"); 43 gl.disable(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */); 44 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension"); 45 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 46 47 gl.enable(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */); 48 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension"); 49 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 50 51 shouldBeFalse("gl.isEnabled(0x2A02 /* POLYGON_OFFSET_LINE_WEBGL */)"); 52 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "cap unknown without enabling the extension"); 53 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 54 } 55 56 function checkEnums() { 57 debug(""); 58 debug("Check enums"); 59 shouldBe("ext.POLYGON_MODE_WEBGL", "0x0B40"); 60 shouldBe("ext.POLYGON_OFFSET_LINE_WEBGL", "0x2A02"); 61 shouldBe("ext.LINE_WEBGL", "0x1B01"); 62 shouldBe("ext.FILL_WEBGL", "0x1B02"); 63 } 64 65 function checkQueries() { 66 debug(""); 67 debug("Check default state"); 68 shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL'); 69 shouldBeFalse('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)'); 70 shouldBeFalse('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)'); 71 debug(""); 72 debug("Check state updates"); 73 ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.LINE_WEBGL); 74 shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.LINE_WEBGL'); 75 ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.FILL_WEBGL); 76 shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL'); 77 debug(""); 78 debug("Check errors"); 79 ext.polygonModeWEBGL(gl.FRONT, ext.LINE_WEBGL); 80 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "invalid face"); 81 ext.polygonModeWEBGL(gl.FRONT_AND_BACK, 0); 82 wtu.glErrorShouldBe(gl, gl.INVALID_ENUM, "invalid mode"); 83 shouldBe('gl.getParameter(ext.POLYGON_MODE_WEBGL)', 'ext.FILL_WEBGL'); 84 debug(""); 85 debug("Check cap updates"); 86 gl.enable(ext.POLYGON_OFFSET_LINE_WEBGL); 87 shouldBeTrue('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)'); 88 shouldBeTrue('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)'); 89 gl.disable(ext.POLYGON_OFFSET_LINE_WEBGL); 90 shouldBeFalse('gl.getParameter(ext.POLYGON_OFFSET_LINE_WEBGL)'); 91 shouldBeFalse('gl.isEnabled(ext.POLYGON_OFFSET_LINE_WEBGL)'); 92 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 93 } 94 95 function checkDiagonal(r, g, b) { 96 const pixels = new Uint8Array(w * h * 4); 97 gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels); 98 for (let i = 0; i < w; i++) 99 { 100 const baseOffset = (i * w + i) * 4; 101 if (pixels[baseOffset + 0] != r || 102 pixels[baseOffset + 1] != g || 103 pixels[baseOffset + 2] != b) { 104 testFailed(`Unexpected diagonal color at (${i}, ${i})`); 105 return; 106 } 107 } 108 testPassed("Expected diagonal color"); 109 } 110 111 function checkLineMode() { 112 debug(""); 113 debug("Check line polygon mode"); 114 115 gl.enable(gl.DEPTH_TEST); 116 117 const program = wtu.setupProgram(gl, [wtu.simpleVertexShader, 118 wtu.simpleColorFragmentShader]); 119 gl.useProgram(program); 120 const colorLoc = gl.getUniformLocation(program, "u_color"); 121 122 wtu.setupUnitQuad(gl); 123 124 // Draw red quad with lines 125 gl.uniform4f(colorLoc, 1, 0, 0, 1); 126 ext.polygonModeWEBGL(gl.FRONT_AND_BACK, ext.LINE_WEBGL); 127 wtu.clearAndDrawUnitQuad(gl); 128 129 // Nothing is drawn inside triangles 130 wtu.checkCanvasRect(gl, 2, 17, 13, 13, [255, 255, 255, 255]); 131 wtu.checkCanvasRect(gl, 17, 2, 13, 13, [255, 255, 255, 255]); 132 133 // Main diagonal is drawn 134 checkDiagonal(255, 0, 0); 135 136 // Test polygon offset 137 gl.polygonOffset(0, -2); 138 gl.enable(gl.POLYGON_OFFSET_FILL); 139 140 // Depth test must fail because line mode uses its own polygon offset toggle 141 gl.uniform4f(colorLoc, 0, 1, 0, 1); 142 wtu.drawUnitQuad(gl); 143 checkDiagonal(255, 0, 0); 144 145 // Depth test must pass 146 gl.enable(ext.POLYGON_OFFSET_LINE_WEBGL) 147 wtu.drawUnitQuad(gl); 148 checkDiagonal(0, 255, 0); 149 150 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 151 } 152 153 function runTestExtension() { 154 checkEnums(); 155 checkQueries(); 156 checkLineMode(); 157 } 158 159 function runTest() { 160 if (!gl) { 161 testFailed("WebGL context does not exist"); 162 return; 163 } 164 testPassed("WebGL context exists"); 165 166 runTestNoExtension(); 167 168 ext = gl.getExtension("WEBGL_polygon_mode"); 169 170 wtu.runExtensionSupportedTest(gl, "WEBGL_polygon_mode", ext !== null); 171 172 if (ext !== null) { 173 runTestExtension(); 174 } else { 175 testPassed("No WEBGL_polygon_mode support -- this is legal"); 176 } 177 } 178 179 runTest(); 180 181 var successfullyParsed = true; 182 </script> 183 <script src="../../js/js-test-post.js"></script> 184 </body> 185 </html>