dom/canvas/test/webgl-conf/checkout/conformance/rendering/line-loop-tri-fan.html

   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>