OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (C) 2011 Opera Software ASA. All rights reserved. |
| 3 |
| 4 Redistribution and use in source and binary forms, with or without |
| 5 modification, are permitted provided that the following conditions |
| 6 are met: |
| 7 1. Redistributions of source code must retain the above copyright |
| 8 notice, this list of conditions and the following disclaimer. |
| 9 2. Redistributions in binary form must reproduce the above copyright |
| 10 notice, this list of conditions and the following disclaimer in the |
| 11 documentation and/or other materials provided with the distribution. |
| 12 |
| 13 THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA. ''AS IS'' AND ANY |
| 14 EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| 15 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| 16 PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
| 17 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
| 18 EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
| 19 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR |
| 20 PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
| 21 OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 22 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 23 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 24 --> |
| 25 <!DOCTYPE html> |
| 26 <html> |
| 27 <head> |
| 28 <meta charset="utf-8"> |
| 29 <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
| 30 <script src="../../resources/js-test-pre.js"></script> |
| 31 <script src="../resources/webgl-test.js"></script> |
| 32 <script id="vshader" type="x-shader/x-vertex"> |
| 33 attribute vec2 pos; |
| 34 |
| 35 void main() |
| 36 { |
| 37 gl_Position = vec4(pos, 0, 1); |
| 38 } |
| 39 </script> |
| 40 |
| 41 <script id="fshader" type="x-shader/x-fragment"> |
| 42 precision mediump float; |
| 43 |
| 44 void main() |
| 45 { |
| 46 gl_FragColor = vec4(0, 1, 0, 1); |
| 47 } |
| 48 </script> |
| 49 |
| 50 <script> |
| 51 // Check a single 32-bit RGBA pixel. |
| 52 function checkPixel(buf, index, correct) { |
| 53 for (var i = 0; i < 4; ++i) { |
| 54 if (buf[index + i] != correct[i]) { |
| 55 return false; |
| 56 } |
| 57 } |
| 58 return true; |
| 59 } |
| 60 |
| 61 // Check the line loop by reading the pixels and making sure just th
e edge |
| 62 // pixels are green and the rest are black. |
| 63 function checkLineLoop(gl, w) { |
| 64 var buf = new Uint8Array(w * w * 4); |
| 65 gl.readPixels(0, 0, w, w, gl.RGBA, gl.UNSIGNED_BYTE, buf); |
| 66 var green = [0,255,0,255]; |
| 67 var black = [0,0,0,255]; |
| 68 var isCorrect = true; |
| 69 for (var j = 0; j < w * w * 4; j += 4) { |
| 70 var correct = black; |
| 71 if (j < w * 4 || j > w * (w - 1) * 4 || j % (w * 4) == 0 ||
j % (w * 4) == (w - 1) * 4) { |
| 72 correct = green; |
| 73 } |
| 74 // ignore corner pixels |
| 75 if ((j == 0) || (j == 4*(w-1)) || (j == 4*w*(w-1)) || (j== 4
*(w*w - 1))) { |
| 76 continue; |
| 77 } |
| 78 if (!checkPixel(buf, j, correct)) { |
| 79 isCorrect = false; |
| 80 break; |
| 81 } |
| 82 } |
| 83 if (isCorrect) { |
| 84 testPassed("Line loop was drawn correctly."); |
| 85 } else { |
| 86 testFailed("Line loop was drawn incorrectly."); |
| 87 } |
| 88 } |
| 89 |
| 90 // Check the tri fan by reading the pixels and making sure they are
all green. |
| 91 function checkTriFan(gl, w) { |
| 92 buf = new Uint8Array(w * w * 4); |
| 93 gl.readPixels(0, 0, w, w, gl.RGBA, gl.UNSIGNED_BYTE, buf); |
| 94 var filled = true; |
| 95 for (var j = 0; j < w * w * 4; j += 4) { |
| 96 if (!checkPixel(buf, j, [0,255,0,255])) { |
| 97 filled = false; |
| 98 break; |
| 99 } |
| 100 } |
| 101 if (filled) { |
| 102 testPassed("Triangle fan was drawn correctly."); |
| 103 } else { |
| 104 testFailed("Triangle fan was drawn incorrectly."); |
| 105 } |
| 106 } |
| 107 |
| 108 function runTest() |
| 109 { |
| 110 var gl = initWebGL('testbed', 'vshader', 'fshader', ['pos'], [0,
0, 0, 1], 1, { antialias: false }); |
| 111 if (!gl) { |
| 112 testFailed('initWebGL(..) failed'); |
| 113 return; |
| 114 } |
| 115 var w = document.getElementById('testbed').width; |
| 116 |
| 117 gl.enableVertexAttribArray(0); |
| 118 |
| 119 //---------- LINE_LOOP---------- |
| 120 var d = 1/w; |
| 121 var vertices = new Float32Array([-1+d, -1+d, 1-d, -1+d, 1-d, 1-d
, -1+d, 1-d]); |
| 122 var vertBuf = gl.createBuffer(); |
| 123 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); |
| 124 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); |
| 125 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| 126 var indBuf = gl.createBuffer(); |
| 127 var indices = new Uint16Array([0, 1, 2, 3]); |
| 128 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); |
| 129 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); |
| 130 |
| 131 debug('Draw a square using a line loop and verify that it draws
all four sides and nothing else.'); |
| 132 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 133 gl.drawArrays(gl.LINE_LOOP, 0, vertices.length / 2); |
| 134 checkLineLoop(gl, w); |
| 135 |
| 136 debug('Draw a square using an indexed line loop and verify that
it draws all four sides and nothing else.'); |
| 137 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 138 gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT,
0); |
| 139 checkLineLoop(gl, w); |
| 140 |
| 141 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]); |
| 142 vertBuf = gl.createBuffer(); |
| 143 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); |
| 144 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); |
| 145 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| 146 indBuf = gl.createBuffer(); |
| 147 indices = new Uint16Array([0, 1, 2, 3, 4, 5, 6]); |
| 148 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); |
| 149 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); |
| 150 |
| 151 debug('Draw a square using a line loop with a vertex buffer offs
et and verify that it draws all four sides and nothing else.'); |
| 152 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 153 gl.drawArrays(gl.LINE_LOOP, 3, vertices.length / 2 - 3); |
| 154 checkLineLoop(gl, w); |
| 155 |
| 156 debug('Draw a square using an indexed line loop with an index bu
ffer offset and verify that it draws all four sides and nothing else.'); |
| 157 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 158 gl.drawElements(gl.LINE_LOOP, indices.length - 3, gl.UNSIGNED_SH
ORT, 3 * 2); |
| 159 checkLineLoop(gl, w); |
| 160 |
| 161 //---------- LINE_LOOP UBYTE ---------- |
| 162 var degenVerts = new Array(252 * 2); |
| 163 for (var j = 0; j < 252 * 2; ++j) { |
| 164 degenVerts[j] = -1+d; |
| 165 } |
| 166 degenVerts = degenVerts.concat([-1+d, -1+d, 1-d, -1+d, 1-d, 1-d,
-1+d, 1-d]); |
| 167 vertices = new Float32Array(degenVerts); |
| 168 vertBuf = gl.createBuffer(); |
| 169 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); |
| 170 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); |
| 171 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| 172 indBuf = gl.createBuffer(); |
| 173 var degenInd = new Array(252); |
| 174 for (var j = 0; j < 252; ++j) { |
| 175 degenInd[j] = j; |
| 176 } |
| 177 degenInd = degenInd.concat([252, 253, 254, 255]); |
| 178 indices = new Uint8Array(degenInd); |
| 179 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); |
| 180 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); |
| 181 |
| 182 debug('Draw a square using an ubyte indexed line loop with 256 i
ndices and verify that it draws all four sides and nothing else.'); |
| 183 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 184 gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE,
0); |
| 185 checkLineLoop(gl, w); |
| 186 |
| 187 |
| 188 //---------- TRIANGLE_FAN ---------- |
| 189 vertices = new Float32Array([0, 0, -1, -1, 1, -1, 1, 1, -1, 1, -
1, -1]); |
| 190 vertBuf = gl.createBuffer(); |
| 191 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); |
| 192 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); |
| 193 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| 194 indices = new Uint16Array([0,1,2,3,4,5]); |
| 195 indBuf = gl.createBuffer(); |
| 196 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); |
| 197 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); |
| 198 |
| 199 debug('Draw a filled square using a triangle fan and verify that
it fills the entire canvas.'); |
| 200 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 201 gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2); |
| 202 checkTriFan(gl, w); |
| 203 |
| 204 debug('Draw a filled square using an indexed triangle fan and ve
rify that it fills the entire canvas.'); |
| 205 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 206 gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHO
RT, 0); |
| 207 checkTriFan(gl, w); |
| 208 |
| 209 vertices = new Float32Array([1, 1, 1, 1, 1, 1, 0, 0, -1, -1, 1,
-1, 1, 1, -1, 1, -1, -1]); |
| 210 vertBuf = gl.createBuffer(); |
| 211 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); |
| 212 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); |
| 213 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); |
| 214 indices = new Uint16Array([0,1,2,3,4,5,6,7,8]); |
| 215 indBuf = gl.createBuffer(); |
| 216 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indBuf); |
| 217 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); |
| 218 |
| 219 debug('Draw a filled square using a triangle fan with a vertex b
uffer offset and verify that it fills the entire canvas.'); |
| 220 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 221 gl.drawArrays(gl.TRIANGLE_FAN, 3, vertices.length / 2 - 3); |
| 222 checkTriFan(gl, w); |
| 223 |
| 224 debug('Draw a filled square using an indexed triangle fan with a
n index buffer offset and verify that it fills the entire canvas.'); |
| 225 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 226 gl.drawElements(gl.TRIANGLE_FAN, indices.length - 3, gl.UNSIGNED
_SHORT, 3 * 2); |
| 227 checkTriFan(gl, w); |
| 228 } |
| 229 </script> |
| 230 </head> |
| 231 <body> |
| 232 <canvas id="testbed" width="10px" height="10px" style="width:50px; heigh
t:50px"></canvas> |
| 233 <div id="description"></div> |
| 234 <div id="console"></div> |
| 235 <script> |
| 236 description('Verify that LINE_LOOP and TRIANGLE_FAN works correctly.
'); |
| 237 runTest(); |
| 238 successfullyParsed = true; |
| 239 </script> |
| 240 <script src="../../resources/js-test-post.js"></script> |
| 241 </body> |
| 242 </html> |
OLD | NEW |