occlusion-query-scissor.html (3465B)
1 <!-- 2 Copyright (c) 2022 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 <title>WebGL Occlusion Query w/Scissor Conformance Tests</title> 12 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 13 <script src="../../js/js-test-pre.js"></script> 14 <script src="../../js/webgl-test-utils.js"></script> 15 </head> 16 <body> 17 <div id="description"></div> 18 <canvas id="canvas" style="width: 50px; height: 50px;"> </canvas> 19 <div id="console"></div> 20 <script> 21 "use strict"; 22 description("This test verifies the functionality of occlusion query objects with the scissor test."); 23 debug('Regression test for <a href="http://anglebug.com/7157">http://anglebug.com/7157</a>'); 24 25 debug(""); 26 27 const wtu = WebGLTestUtils; 28 29 const wait = () => new Promise(resolve => setTimeout(resolve)); 30 31 async function runOcclusionQueryTest(gl) { 32 const kSize = 4; 33 const colors = [ 34 [0, 0, 0, 255], 35 [255, 0, 0, 255], 36 [0, 255, 0, 255], 37 [255, 255, 0, 255], 38 ]; 39 const framebuffers = colors.map((color, index) => { 40 const tex = gl.createTexture(); 41 gl.bindTexture(gl.TEXTURE_2D, tex); 42 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, kSize, kSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 43 44 const fb = gl.createFramebuffer(); 45 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 46 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); 47 48 gl.clearColor(index & 1, (index >> 1) & 1, (index >> 2) & 1, 1); 49 gl.clear(gl.COLOR_BUFFER_BIT); 50 51 wtu.checkCanvasRect(gl, 0, 0, kSize, kSize, color); 52 53 return fb; 54 }); 55 56 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "setup should succeed"); 57 58 gl.viewport(0, 0, kSize, kSize); 59 60 const program = wtu.setupSimpleColorProgram(gl, 0); 61 gl.uniform4f(gl.getUniformLocation(program, "u_color"), 0, 1, 0, 1); 62 wtu.setupUnitQuad(gl, 0); 63 64 const query = gl.createQuery();; 65 66 for (let i = 0; i < 256; ++i) 67 { 68 gl.beginQuery(gl.ANY_SAMPLES_PASSED, query); 69 let drawn = false; 70 71 framebuffers.forEach((fb, index) => { 72 gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 73 const scissor = (i >> 4 >> index) & 1; 74 if (i & (1 << index)) 75 { 76 if (scissor) 77 { 78 gl.enable(gl.SCISSOR_TEST); 79 gl.scissor(0, 0, 0, 0); 80 } 81 wtu.drawUnitQuad(gl); 82 drawn ||= !scissor; 83 if (scissor) 84 { 85 gl.disable(gl.SCISSOR_TEST); 86 gl.scissor(0, 0, kSize, kSize); 87 } 88 } 89 }); 90 91 gl.endQuery(gl.ANY_SAMPLES_PASSED); 92 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should draw"); 93 94 do { 95 await wait(); 96 } while (!gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE)); 97 98 const result = gl.getQueryParameter(query, gl.QUERY_RESULT); 99 100 const expected = drawn ? 1 : 0; 101 assertMsg(result === expected, `pass ${i}, result: ${result} === expected: ${expected}`); 102 } 103 finishTest(); 104 } 105 106 const canvas = document.getElementById("canvas"); 107 const gl = wtu.create3DContext(canvas, null, 2); 108 109 if (!gl) { 110 testFailed("WebGL context does not exist"); 111 } else { 112 testPassed("WebGL context exists"); 113 runOcclusionQueryTest(gl); 114 } 115 </script> 116 </body> 117 </html>