ext-clip-control.html (6139B)
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 EXT_clip_control 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 EXT_clip_control 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(0x935C /* CLIP_ORIGIN_EXT */)"); 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(0x935D /* CLIP_DEPTH_MODE_EXT */)"); 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 43 function checkEnums() { 44 debug(""); 45 debug("Check enums"); 46 shouldBe("ext.LOWER_LEFT_EXT", "0x8CA1"); 47 shouldBe("ext.UPPER_LEFT_EXT", "0x8CA2"); 48 49 shouldBe("ext.NEGATIVE_ONE_TO_ONE_EXT", "0x935E"); 50 shouldBe("ext.ZERO_TO_ONE_EXT", "0x935F"); 51 52 shouldBe("ext.CLIP_ORIGIN_EXT", "0x935C"); 53 shouldBe("ext.CLIP_DEPTH_MODE_EXT", "0x935D"); 54 } 55 56 function checkQueries() { 57 debug(""); 58 debug("Check default state"); 59 shouldBe('gl.getParameter(ext.CLIP_ORIGIN_EXT)', 'ext.LOWER_LEFT_EXT'); 60 shouldBe('gl.getParameter(ext.CLIP_DEPTH_MODE_EXT)', 'ext.NEGATIVE_ONE_TO_ONE_EXT'); 61 debug(""); 62 debug("Check state updates using the new function"); 63 ext.clipControlEXT(ext.UPPER_LEFT_EXT, ext.ZERO_TO_ONE_EXT); 64 shouldBe('gl.getParameter(ext.CLIP_ORIGIN_EXT)', 'ext.UPPER_LEFT_EXT'); 65 shouldBe('gl.getParameter(ext.CLIP_DEPTH_MODE_EXT)', 'ext.ZERO_TO_ONE_EXT'); 66 ext.clipControlEXT(ext.LOWER_LEFT_EXT, ext.ZERO_TO_ONE_EXT); 67 shouldBe('gl.getParameter(ext.CLIP_ORIGIN_EXT)', 'ext.LOWER_LEFT_EXT'); 68 shouldBe('gl.getParameter(ext.CLIP_DEPTH_MODE_EXT)', 'ext.ZERO_TO_ONE_EXT'); 69 ext.clipControlEXT(ext.UPPER_LEFT_EXT, ext.NEGATIVE_ONE_TO_ONE_EXT); 70 shouldBe('gl.getParameter(ext.CLIP_ORIGIN_EXT)', 'ext.UPPER_LEFT_EXT'); 71 shouldBe('gl.getParameter(ext.CLIP_DEPTH_MODE_EXT)', 'ext.NEGATIVE_ONE_TO_ONE_EXT'); 72 ext.clipControlEXT(ext.LOWER_LEFT_EXT, ext.NEGATIVE_ONE_TO_ONE_EXT); 73 shouldBe('gl.getParameter(ext.CLIP_ORIGIN_EXT)', 'ext.LOWER_LEFT_EXT'); 74 shouldBe('gl.getParameter(ext.CLIP_DEPTH_MODE_EXT)', 'ext.NEGATIVE_ONE_TO_ONE_EXT'); 75 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 76 } 77 78 function checkDepthMode() { 79 debug(""); 80 debug("Check depth mode toggling"); 81 82 gl.enable(gl.DEPTH_TEST); 83 gl.clear(gl.DEPTH_BUFFER_BIT); 84 85 const program = wtu.setupProgram(gl, [wtu.simpleVertexShader, 86 wtu.simpleColorFragmentShader]); 87 gl.useProgram(program); 88 const colorLoc = gl.getUniformLocation(program, "u_color"); 89 wtu.setupUnitQuad(gl); 90 91 // Draw red at 0 with the default depth mode 92 gl.uniform4f(colorLoc, 1, 0, 0, 1); 93 ext.clipControlEXT(ext.LOWER_LEFT_EXT, ext.NEGATIVE_ONE_TO_ONE_EXT); 94 wtu.drawUnitQuad(gl); 95 wtu.checkCanvasRect(gl, 0, 0, w, h, [255, 0, 0, 255]); 96 97 // Draw green at 0, depth test must fail 98 gl.uniform4f(colorLoc, 0, 1, 0, 1); 99 wtu.drawUnitQuad(gl); 100 wtu.checkCanvasRect(gl, 0, 0, w, h, [255, 0, 0, 255]); 101 102 // Draw green at 0 after switching the depth mode 103 ext.clipControlEXT(ext.LOWER_LEFT_EXT, ext.ZERO_TO_ONE_EXT); 104 wtu.drawUnitQuad(gl); 105 wtu.checkCanvasRect(gl, 0, 0, w, h, [0, 255, 0, 255]); 106 107 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 108 } 109 110 function checkClipOrigin() { 111 debug(""); 112 debug("Check clip origin toggling"); 113 114 gl.disable(gl.DEPTH_TEST); 115 116 const vertexShader = ` 117 attribute vec4 vPosition; 118 varying float y; 119 void main() { 120 gl_Position = vPosition; 121 y = vPosition.y; 122 }`; 123 const fragmentShader = ` 124 precision mediump float; 125 varying float y; 126 void main() { 127 if (y > 0.0) { 128 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 129 } else { 130 gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 131 } 132 }`; 133 134 const program = wtu.setupProgram(gl, [vertexShader, fragmentShader]); 135 gl.useProgram(program); 136 137 wtu.setupUnitQuad(gl); 138 139 ext.clipControlEXT(ext.LOWER_LEFT_EXT, ext.NEGATIVE_ONE_TO_ONE_EXT); 140 wtu.drawUnitQuad(gl); 141 wtu.checkCanvasRect(gl, 0, 0, w, h / 2 - 2, [0, 255, 0, 255]); 142 wtu.checkCanvasRect(gl, 0, h / 2 + 2, w, h / 2 - 2, [255, 0, 0, 255]); 143 144 ext.clipControlEXT(ext.UPPER_LEFT_EXT, ext.NEGATIVE_ONE_TO_ONE_EXT); 145 wtu.drawUnitQuad(gl); 146 wtu.checkCanvasRect(gl, 0, 0, w, h / 2 - 2, [255, 0, 0, 255]); 147 wtu.checkCanvasRect(gl, 0, h / 2 + 2, w, h / 2 - 2, [0, 255, 0, 255]); 148 149 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 150 } 151 152 function runTestExtension() { 153 checkEnums(); 154 checkQueries(); 155 checkDepthMode(); 156 checkClipOrigin(); 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("EXT_clip_control"); 169 170 wtu.runExtensionSupportedTest(gl, "EXT_clip_control", ext !== null); 171 172 if (ext !== null) { 173 runTestExtension(); 174 } else { 175 testPassed("No EXT_clip_control 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>