| <!-- |
| Copyright (c) 2019 The Khronos Group Inc. |
| Use of this source code is governed by an MIT-style license that can be |
| found in the LICENSE.txt file. |
| --> |
| |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>WebGL Scissor FBO Test</title> |
| <link rel="stylesheet" href="../../resources/js-test-style.css"/> |
| <script src="../../js/js-test-pre.js"></script> |
| <script src="../../js/webgl-test-utils.js"></script> |
| </head> |
| <body> |
| <canvas id="canvas" width="16" height="16" style="width: 40px; height: 40px;"> </canvas> |
| <div id="description"></div> |
| <div id="console"></div> |
| <script> |
| "use strict"; |
| description("Checks the scissor does not change when switching framebuffers."); |
| |
| var wtu = WebGLTestUtils; |
| |
| function makeFramebuffer(width, height) { |
| var tex = gl.createTexture(); |
| gl.bindTexture(gl.TEXTURE_2D, tex); |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); |
| var fb = gl.createFramebuffer(); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, fb); |
| gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); |
| shouldBe('gl.checkFramebufferStatus(gl.FRAMEBUFFER)', 'gl.FRAMEBUFFER_COMPLETE'); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, null); |
| return fb; |
| } |
| |
| function checkCanvasRect(x, y, width, height, color, msg) { |
| debug("checking: " + x + ", " + y + ", " + width + ", " + height); |
| wtu.checkCanvasRect(gl, x, y, width, height, color, msg); |
| } |
| |
| var gl = wtu.create3DContext("canvas", {antialias: false}); |
| if (!gl) { |
| testFailed("context does not exist"); |
| } else { |
| testPassed("context exists"); |
| |
| var fb8x8 = makeFramebuffer(8, 8); |
| var fb32x32 = makeFramebuffer(32, 32); |
| |
| var testScissor = function(scissorX, scissorY, scissorWidth, scissorHeight, msg) { |
| debug(""); |
| debug(msg); |
| |
| var test = function(fb, size) { |
| debug(""); |
| debug("checking size: " + size); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, fb); |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| var scissorRight = Math.min(scissorX + scissorWidth, size); |
| var scissorTop = Math.min(scissorY + scissorHeight, size); |
| var scWidth = scissorRight - scissorX; |
| var scHeight = scissorTop - scissorY; |
| var rightWidth = Math.min(size - scissorRight, 0); |
| var topHeight = Math.max(size - scissorTop, 0); |
| checkCanvasRect(scissorX, scissorY, scWidth, scHeight, [0, 255, 0, 255], "should be green"); |
| checkCanvasRect(0, 0, size, scissorY, [255, 0, 0, 255], "should be red"); |
| checkCanvasRect(0, scissorTop, size, topHeight, [255, 0, 0, 255], "should be red"); |
| checkCanvasRect(0, 0, scissorX, size, [255, 0, 0, 255], "should be red"); |
| checkCanvasRect(scissorRight, 0, scissorX, rightWidth, [255, 0, 0, 255], "should be red"); |
| }; |
| |
| gl.disable(gl.SCISSOR_TEST); |
| gl.clearColor(1, 0, 0, 1); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, null); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, fb8x8); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.bindFramebuffer(gl.FRAMEBUFFER, fb32x32); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| gl.bindFramebuffer(gl.FRAMEBUFFER, fb32x32); |
| gl.enable(gl.SCISSOR_TEST); |
| gl.scissor(scissorX, scissorY, scissorWidth, scissorHeight); |
| test(null, 16); |
| test(fb8x8, 8); |
| test(fb32x32, 32); |
| test(null, 16); |
| }; |
| |
| testScissor(2, 4, 12, 10, "test scissor in middle"); |
| testScissor(0, 0, 12, 10, "test scissor at 0,0"); |
| testScissor(0, 0, 16, 16, "test scissor with size that matches drawingbuffer"); |
| |
| wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors"); |
| } |
| |
| debug(""); |
| var successfullyParsed = true; |
| </script> |
| <script src="../../js/js-test-post.js"></script> |
| |
| </body> |
| </html> |