culling.html (3852B)
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 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 var vertices = new Float32Array(arr); 39 var vertBuf = gl.createBuffer(); 40 gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); 41 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 42 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 43 gl.uniform4fv(colLoc, col); 44 gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / 2); 45 } 46 47 function clear(gl, col) { 48 gl.clearColor(col[0], col[1], col[2], col[3]); 49 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 50 } 51 52 function check(gl, winding, shoulddraw) { 53 var msg = winding + ' face was ' + (shoulddraw ? '' : 'not ') + 'drawn.'; 54 wtu.checkCanvasRect(gl, 0, 0, 1, 1, [0, 255, 0, 255], msg); 55 } 56 57 function runTest() { 58 var cwVertices = [-1, -1, -1, 1, 1, -1, 1, 1]; 59 var ccwVertices = [-1, 1, -1, -1, 1, 1, 1, -1]; 60 var red = [1, 0, 0, 1]; 61 var green = [0, 1, 0, 1]; 62 var ok; 63 64 var gl = wtu.create3DContext('testbed', { antialias: false }); 65 if (!gl) { 66 testFailed('could not create context'); 67 return; 68 } 69 var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['pos']); 70 var colLoc = gl.getUniformLocation(program, 'col'); 71 72 gl.enableVertexAttribArray(0); 73 74 debug('CULL_FACE should be off by default'); 75 clear(gl, red); 76 draw(gl, ccwVertices, colLoc, green); 77 check(gl, 'CCW', true); 78 clear(gl, red); 79 draw(gl, cwVertices, colLoc, green); 80 check(gl, 'CW', true); 81 82 debug('Enabling CULL_FACE'); 83 gl.enable(gl.CULL_FACE); 84 85 debug('BACK and CCW should be set by default'); 86 clear(gl, red); 87 draw(gl, ccwVertices, colLoc, green); 88 check(gl, 'CCW', true); 89 clear(gl, green); 90 draw(gl, cwVertices, colLoc, red); 91 check(gl, 'CW', false); 92 93 var tests = [{ cullFace : 'BACK', frontFace : 'CCW', drawCCW : true, drawCW : false}, 94 { cullFace : 'BACK', frontFace : 'CW', drawCCW : false, drawCW : true}, 95 { cullFace : 'FRONT', frontFace : 'CCW', drawCCW : false, drawCW : true }, 96 { cullFace : 'FRONT', frontFace : 'CW', drawCCW : true, drawCW : false}, 97 { cullFace : 'FRONT_AND_BACK', frontFace : 'CCW', drawCCW : false, drawCW : false}, 98 { cullFace : 'FRONT_AND_BACK', frontFace : 'CW', drawCCW : false, drawCW : false}]; 99 100 for (var i = 0; i < tests.length; ++i) { 101 var t = tests[i]; 102 debug('Setting ' + t.cullFace + ' and ' + t.frontFace); 103 gl.cullFace(gl[t.cullFace]); 104 gl.frontFace(gl[t.frontFace]); 105 clear(gl, t.drawCCW ? red : green); 106 draw(gl, ccwVertices, colLoc, t.drawCCW ? green : red); 107 check(gl, 'CCW', t.drawCCW); 108 clear(gl, t.drawCW ? red : green); 109 draw(gl, cwVertices, colLoc, t.drawCW ? green : red); 110 check(gl, 'CW', t.drawCW); 111 } 112 } 113 </script> 114 </head> 115 <body> 116 <canvas id="testbed" width="16" height="16" style="width:50px; height:50px"></canvas> 117 <div id="description"></div> 118 <div id="console"></div> 119 <script> 120 "use strict"; 121 description('Verify that culling works'); 122 runTest(); 123 var successfullyParsed = true; 124 </script> 125 <script src="../../js/js-test-post.js"></script> 126 </body> 127 </html>