framebuffer-state-restoration.html (3602B)
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 <title>WebGL Framebuffer state restoration Test</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 <canvas id="example" width="50" height="50"> 18 </canvas> 19 <div id="description"></div> 20 <div id="console"></div> 21 <script> 22 "use strict"; 23 var wtu = WebGLTestUtils; 24 description(); 25 26 function test() { 27 var gl = wtu.create3DContext("example", {preserveDrawingBuffer: true}); 28 if (!gl) { 29 testFailed("context does not exist"); 30 finishTest(); 31 return; 32 } 33 var program = wtu.setupColorQuad(gl); 34 var colorLoc = gl.getUniformLocation(program, "u_color"); 35 gl.enable(gl.DEPTH_TEST); 36 gl.depthFunc(gl.LESS); 37 38 var testDrawToBackBuffer = function(label) { 39 debug(""); 40 debug("drawing to backbuffer " + label); 41 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 42 // Draw in green 43 gl.uniform4fv(colorLoc, [0, 1, 0, 1]); 44 gl.drawArrays(gl.TRIANGLES, 0, 6); 45 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 46 // Draw in red, should not draw because of depth test. 47 gl.uniform4fv(colorLoc, [1, 0, 0, 1]); 48 gl.drawArrays(gl.TRIANGLES, 0, 6); 49 wtu.checkCanvas(gl, [0, 255, 0, 255], "should still be green"); 50 } 51 52 var testDrawToFBO = function(label ) { 53 debug(""); 54 debug("drawing to framebuffer " + label); 55 // Draw in green 56 gl.uniform4fv(colorLoc, [0, 1, 0, 1]); 57 gl.drawArrays(gl.TRIANGLES, 0, 6); 58 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green"); 59 // Draw in red as there is not depth buffer. 60 gl.uniform4fv(colorLoc, [1, 0, 0, 1]); 61 gl.drawArrays(gl.TRIANGLES, 0, 6); 62 wtu.checkCanvas(gl, [255, 0, 0, 255], "should be red"); 63 } 64 65 testDrawToBackBuffer("start"); 66 67 var fbo = gl.createFramebuffer(); 68 var tex = gl.createTexture(); 69 gl.bindTexture(gl.TEXTURE_2D, tex); 70 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 50, 50, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 71 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 72 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 73 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 74 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 75 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 76 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); 77 if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) { 78 finishTest(); 79 return; 80 } 81 82 wtu.checkCanvas(gl, [0, 0, 0, 0], "should be zero"); 83 testDrawToFBO("start"); 84 85 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 86 testDrawToBackBuffer("after drawing to framebuffer"); 87 88 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 89 testDrawToFBO("after drawing to backbuffer"); 90 91 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 92 wtu.waitForComposite(function() { 93 testDrawToBackBuffer("after composite"); 94 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 95 testDrawToFBO("after drawing to backbuffer after composite"); 96 wtu.waitForComposite(function() { 97 testDrawToFBO("after composite"); 98 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 99 testDrawToBackBuffer("after drawing to framebuffer after composite"); 100 101 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 102 finishTest(); 103 }); 104 }); 105 } 106 test(); 107 108 var successfullyParsed = true; 109 </script> 110 </body> 111 </html>