line-loop-tri-fan.html (8545B)
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 vec2 pos; 16 17 void main() 18 { 19 gl_Position = vec4(pos, 0, 1); 20 } 21 </script> 22 23 <script id="fshader" type="x-shader/x-fragment"> 24 precision mediump float; 25 26 void main() 27 { 28 gl_FragColor = vec4(0, 1, 0, 1); 29 } 30 </script> 31 32 <script> 33 "use strict"; 34 var wtu = WebGLTestUtils; 35 36 // Check a single 32-bit RGBA pixel. 37 function checkPixel(buf, index, correct) { 38 for (var i = 0; i < 4; ++i) { 39 if (buf[index + i] != correct[i]) { 40 return false; 41 } 42 } 43 return true; 44 } 45 46 // Check the line loop by reading the pixels and making sure just the edge 47 // pixels are green and the rest are black. 48 function checkLineLoop(gl, w) { 49 var buf = new Uint8Array(w * w * 4); 50 gl.readPixels(0, 0, w, w, gl.RGBA, gl.UNSIGNED_BYTE, buf); 51 var green = [0,255,0,255]; 52 var black = [0,0,0,255]; 53 var isCorrect = true; 54 for (var j = 0; j < w * w * 4; j += 4) { 55 var correct = black; 56 if (j < w * 4 || j > w * (w - 1) * 4 || j % (w * 4) == 0 || j % (w * 4) == (w - 1) * 4) { 57 correct = green; 58 } 59 // ignore corner pixels 60 if ((j == 0) || (j == 4*(w-1)) || (j == 4*w*(w-1)) || (j== 4*(w*w - 1))) { 61 continue; 62 } 63 if (!checkPixel(buf, j, correct)) { 64 isCorrect = false; 65 break; 66 } 67 } 68 if (isCorrect) { 69 testPassed("Line loop was drawn correctly."); 70 } else { 71 testFailed("Line loop was drawn incorrectly."); 72 } 73 } 74 75 // Check the tri fan by reading the pixels and making sure they are all green. 76 function checkTriFan(gl, w) { 77 var buf = new Uint8Array(w * w * 4); 78 gl.readPixels(0, 0, w, w, gl.RGBA, gl.UNSIGNED_BYTE, buf); 79 var filled = true; 80 for (var j = 0; j < w * w * 4; j += 4) { 81 if (!checkPixel(buf, j, [0,255,0,255])) { 82 filled = false; 83 break; 84 } 85 } 86 if (filled) { 87 testPassed("Triangle fan was drawn correctly."); 88 } else { 89 testFailed("Triangle fan was drawn incorrectly."); 90 } 91 } 92 93 function runTest() { 94 var gl = wtu.create3DContext('testbed', { antialias: false }); 95 if (!gl) { 96 testFailed('could not create context'); 97 return; 98 } 99 gl.clearColor(0, 0, 0, 1); 100 var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['pos']) 101 var w = document.getElementById('testbed').width; 102 103 gl.enableVertexAttribArray(0); 104 105 //---------- LINE_LOOP---------- 106 var d = 1/w; 107 var vertices = new Float32Array([-1+d, -1+d, 1-d, -1+d, 1-d, 1-d, -1+d, 1-d]); 108 var vertBuf = gl.createBuffer(); 109 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 110 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 111 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 112 var indBuf = gl.createBuffer(); 113 var indices = new Uint16Array([0, 1, 2, 3]); 114 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); 115 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 116 117 debug('Draw a square using a line loop and verify that it draws all four sides and nothing else.'); 118 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 119 gl.drawArrays(gl.LINE_LOOP, 0, vertices.length / 2); 120 checkLineLoop(gl, w); 121 122 debug('Draw a square using an indexed line loop and verify that it draws all four sides and nothing else.'); 123 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 124 gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT, 0); 125 checkLineLoop(gl, w); 126 127 vertices = new Float32Array([0, 0, 0, 0, 0, 0, -1+d, -1+d, 1-d, -1+d, 1-d, 1-d, -1+d, 1-d]); 128 vertBuf = gl.createBuffer(); 129 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 130 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 131 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 132 indBuf = gl.createBuffer(); 133 indices = new Uint16Array([0, 1, 2, 3, 4, 5, 6]); 134 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); 135 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 136 137 debug('Draw a square using a line loop with a vertex buffer offset and verify that it draws all four sides and nothing else.'); 138 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 139 gl.drawArrays(gl.LINE_LOOP, 3, vertices.length / 2 - 3); 140 checkLineLoop(gl, w); 141 142 debug('Draw a square using an indexed line loop with an index buffer offset and verify that it draws all four sides and nothing else.'); 143 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 144 gl.drawElements(gl.LINE_LOOP, indices.length - 3, gl.UNSIGNED_SHORT, 3 * 2); 145 checkLineLoop(gl, w); 146 147 //---------- LINE_LOOP UBYTE ---------- 148 var degenVerts = new Array(252 * 2); 149 for (var j = 0; j < 252 * 2; ++j) { 150 degenVerts[j] = -1+d; 151 } 152 degenVerts = degenVerts.concat([-1+d, -1+d, 1-d, -1+d, 1-d, 1-d, -1+d, 1-d]); 153 vertices = new Float32Array(degenVerts); 154 vertBuf = gl.createBuffer(); 155 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 156 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 157 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 158 indBuf = gl.createBuffer(); 159 var degenInd = new Array(252); 160 for (var j = 0; j < 252; ++j) { 161 degenInd[j] = j; 162 } 163 degenInd = degenInd.concat([252, 253, 254, 255]); 164 indices = new Uint16Array(degenInd); 165 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); 166 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 167 168 debug('Draw a square using an ubyte indexed line loop with 256 indices and verify that it draws all four sides and nothing else.'); 169 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 170 gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT, 0); 171 checkLineLoop(gl, w); 172 173 //---------- TRIANGLE_FAN ---------- 174 vertices = new Float32Array([0, 0, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1]); 175 vertBuf = gl.createBuffer(); 176 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 177 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 178 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 179 indices = new Uint16Array([0,1,2,3,4,5]); 180 indBuf = gl.createBuffer(); 181 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); 182 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 183 184 debug('Draw a filled square using a triangle fan and verify that it fills the entire canvas.'); 185 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 186 gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2); 187 checkTriFan(gl, w); 188 189 debug('Draw a filled square using an indexed triangle fan and verify that it fills the entire canvas.'); 190 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 191 gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT, 0); 192 checkTriFan(gl, w); 193 194 vertices = new Float32Array([1, 1, 1, 1, 1, 1, 0, 0, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1]); 195 vertBuf = gl.createBuffer(); 196 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 197 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 198 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 199 indices = new Uint16Array([0,1,2,3,4,5,6,7,8]); 200 indBuf = gl.createBuffer(); 201 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); 202 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 203 204 debug('Draw a filled square using a triangle fan with a vertex buffer offset and verify that it fills the entire canvas.'); 205 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 206 gl.drawArrays(gl.TRIANGLE_FAN, 3, vertices.length / 2 - 3); 207 checkTriFan(gl, w); 208 209 debug('Draw a filled square using an indexed triangle fan with an index buffer offset and verify that it fills the entire canvas.'); 210 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 211 gl.drawElements(gl.TRIANGLE_FAN, indices.length - 3, gl.UNSIGNED_SHORT, 3 * 2); 212 checkTriFan(gl, w); 213 } 214 </script> 215 </head> 216 <body> 217 <canvas id="testbed" width="10" height="10" style="width:50px; height:50px"></canvas> 218 <div id="description"></div> 219 <div id="console"></div> 220 <script> 221 "use strict"; 222 description('Verify that LINE_LOOP and TRIANGLE_FAN works correctly.'); 223 runTest(); 224 var successfullyParsed = true; 225 </script> 226 <script src="../../js/js-test-post.js"></script> 227 228 </body> 229 </html>