polygon-offset.html (4937B)
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 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 12 <script src="../../js/js-test-pre.js"></script> 13 <script src="../../js/webgl-test-utils.js"></script> 14 <script id="vshader" type="x-shader/x-vertex"> 15 attribute vec3 pos; 16 17 void main() 18 { 19 gl_Position = vec4(pos, 1); 20 } 21 </script> 22 23 <script id="fshader" type="x-shader/x-fragment"> 24 precision mediump float; 25 uniform vec4 col; 26 27 void main() 28 { 29 gl_FragColor = col; 30 } 31 </script> 32 33 <script> 34 "use strict"; 35 var wtu = WebGLTestUtils; 36 37 function draw(gl, arr, colLoc, col) 38 { 39 var vertices = new Float32Array(arr); 40 var vertBuf = gl.createBuffer(); 41 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 42 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 43 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 44 gl.uniform4fv(colLoc, col); 45 gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / 3); 46 } 47 48 function clear(gl, col, z) 49 { 50 gl.clearColor(col[0], col[1], col[2], col[3]); 51 gl.clearDepth(z); 52 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 53 } 54 55 function check(gl) 56 { 57 wtu.checkCanvasRect(gl, 0, 0, 16, 16, [0, 255, 0, 255], 'result should be green'); 58 } 59 60 function runTest() 61 { 62 var flatSquare = [-1, -1, 0, 63 -1, 1, 0, 64 1, -1, 0, 65 1, 1, 0]; 66 var slantedSquare = [-1, -1, -0.5, 67 -1, 1, -0.5, 68 1, -1, 0.5, 69 1, 1, 0.5]; 70 var red = [1, 0, 0, 1]; 71 var green = [0, 1, 0, 1]; 72 var blue = [0, 0, 1, 1]; 73 74 var gl = wtu.create3DContext('testbed', { antialias: false }); 75 if (!gl) 76 { 77 testFailed('could not create context'); 78 return; 79 } 80 var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['pos']); 81 var colLoc = gl.getUniformLocation(program, 'col'); 82 83 gl.enableVertexAttribArray(0); 84 85 gl.enable(gl.DEPTH_TEST); 86 gl.depthFunc(gl.LEQUAL); 87 88 debug('Polygon offset fill should be off by default'); 89 clear(gl, red, 1.0); 90 draw(gl, slantedSquare, colLoc, blue); 91 draw(gl, slantedSquare, colLoc, green); 92 check(gl); 93 94 debug('Polygon offset units should have no effect when fill is off'); 95 clear(gl, red, 1.0); 96 draw(gl, slantedSquare, colLoc, blue); 97 gl.polygonOffset(0, 10); 98 draw(gl, slantedSquare, colLoc, green); 99 check(gl); 100 101 debug('Polygon offset factor should have no effect when fill is off'); 102 clear(gl, red, 1.0); 103 gl.polygonOffset(0, 0); 104 draw(gl, slantedSquare, colLoc, blue); 105 gl.polygonOffset(1.0, 0); 106 draw(gl, slantedSquare, colLoc, green); 107 check(gl); 108 109 debug('Zero polygon offset units and factor should have no effect'); 110 clear(gl, red, 1.0); 111 gl.enable(gl.POLYGON_OFFSET_FILL); 112 gl.polygonOffset(0, 0); 113 draw(gl, slantedSquare, colLoc, blue); 114 draw(gl, slantedSquare, colLoc, green); 115 check(gl); 116 117 // It appears to be VERY common for drivers to implement the units offset in 118 // floating-point arithmetic, which results in rount-to-nearest-even to cause 119 // an offset of 1 to sometimes not alter the order between these polygons. 120 debug('Polygon offset units of 2 should alter order of flat polygons'); 121 clear(gl, red, 1.0); 122 draw(gl, flatSquare, colLoc, green); 123 gl.polygonOffset(0, 2); 124 draw(gl, flatSquare, colLoc, blue); 125 check(gl); 126 127 debug('Polygon offset factor of 0.1 should alter order of slanted polygons'); 128 clear(gl, red, 1.0); 129 gl.polygonOffset(0, 0); 130 draw(gl, slantedSquare, colLoc, green); 131 gl.polygonOffset(0.1, 0); 132 draw(gl, slantedSquare, colLoc, blue); 133 check(gl); 134 135 debug('Polygon offset factor of 0.1 should not alter order of flat polygons'); 136 clear(gl, red, 1.0); 137 gl.polygonOffset(0, 0); 138 draw(gl, flatSquare, colLoc, blue); 139 gl.polygonOffset(0.1, 0); 140 draw(gl, flatSquare, colLoc, green); 141 check(gl); 142 143 debug('Disabling polygon offset fill should leave order unaffected'); 144 clear(gl, red, 1.0); 145 gl.polygonOffset(0.1, 1); 146 gl.disable(gl.POLYGON_OFFSET_FILL); 147 draw(gl, slantedSquare, colLoc, blue); 148 draw(gl, slantedSquare, colLoc, green); 149 check(gl); 150 151 debug('Enabling polygon offset fill should affect order again'); 152 clear(gl, red, 1.0); 153 draw(gl, slantedSquare, colLoc, green); 154 gl.enable(gl.POLYGON_OFFSET_FILL); 155 draw(gl, slantedSquare, colLoc, blue); 156 check(gl); 157 } 158 </script> 159 </head> 160 <body> 161 <canvas id="testbed" width="16" height="16" style="width:50px; height:50px"></canvas> 162 <div id="description"></div> 163 <div id="console"></div> 164 <script> 165 "use strict"; 166 description('Verify that polygon offset works'); 167 runTest(); 168 var successfullyParsed = true; 169 </script> 170 <script src="../../js/js-test-post.js"></script> 171 172 </body> 173 </html>