Source code
Revision control
Copy as Markdown
Other Tools
<!--
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 BlitFramebuffer Tests</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="example" width="8" height="8"></canvas>
<div id="description"></div>
<div id="console"></div>
<script>
"use strict";
var wtu = WebGLTestUtils;
description("This test verifies the functionality of blitFramebuffer.");
var gl = wtu.create3DContext("example", undefined, 2);
function checkPixel(color, expectedColor) {
var tolerance = 3;
return (Math.abs(color[0] - expectedColor[0]) <= tolerance &&
Math.abs(color[1] - expectedColor[1]) <= tolerance &&
Math.abs(color[2] - expectedColor[2]) <= tolerance &&
Math.abs(color[3] - expectedColor[3]) <= tolerance);
}
function blitframebuffer_outside_readbuffer(readbufferFormat, drawbufferFormat) {
debug("");
debug("blitting outside of read framebuffer, read buffer format is: " + wtu.glEnumToString(gl, readbufferFormat) + ", draw buffer format is: " + wtu.glEnumToString(gl, drawbufferFormat));
// Initiate data to read framebuffer
var size_read = 3;
var uint_read = new Uint8Array(size_read * size_read * 4);
var start = 0x20;
for (var ii = 0; ii < size_read * size_read * 4; ii += 4) {
for (var jj = 0; jj < 3; ++jj) {
uint_read[ii + jj] = start;
}
uint_read[ii + 3] = 0xff;
start += 0x10;
}
// Create read framebuffer and feed data to read buffer
// Read buffer may has srgb image
var tex_read = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex_read);
gl.texImage2D(gl.TEXTURE_2D, 0, readbufferFormat, size_read, size_read, 0, gl.RGBA, gl.UNSIGNED_BYTE, uint_read);
var fbo_read = gl.createFramebuffer();
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_read);
gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex_read, 0);
// Initiate data to draw framebuffer
var size_draw = 7;
var uint_draw = new Uint8Array(size_draw * size_draw * 4);
for (var ii = 0; ii < size_draw * size_draw * 4; ii += 4) {
for (var jj = 0; jj < 3; ++jj) {
uint_draw[ii + jj] = 0x10;
}
uint_draw[ii + 3] = 0xff;
}
// Create draw framebuffer and feed data to draw buffer
// Draw buffer may has srgb image
var tex_draw = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex_draw);
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.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, drawbufferFormat, size_draw, size_draw, 0, gl.RGBA, gl.UNSIGNED_BYTE, uint_draw);
var fbo_draw = gl.createFramebuffer();
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo_draw);
gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex_draw, 0);
if (gl.checkFramebufferStatus(gl.READ_FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
var ref = [
// The reference pixels of the 1st line: (0, 0) ~ (6, 0)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 2nd line: (0, 1) ~ (6, 1)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 3rd line: (0, 2) ~ (6, 2)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x20, 0x20, 0x20, 0xff], [0x30, 0x30, 0x30, 0xff],
[0x40, 0x40, 0x40, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 4th line: (0, 3) ~ (6, 3)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x50, 0x50, 0x50, 0xff], [0x60, 0x60, 0x60, 0xff],
[0x70, 0x70, 0x70, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 5th line: (0, 4) ~ (6, 4)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x80, 0x80, 0x80, 0xff], [0x90, 0x90, 0x90, 0xff],
[0xa0, 0xa0, 0xa0, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 6th line: (0, 5) ~ (6, 5)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
// The reference pixels of the 7th line: (0, 6) ~ (6, 6)
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
[0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff], [0x10, 0x10, 0x10, 0xff],
];
// The 1st round test: blit read framebuffer to the image in draw framebuffer
// All directions of the read region have pixels outside of the read buffer
// The src region and/or dst region may be reversed during blitting.
var test1 = [
[-1, 4, 1, 6], // reverse neither src nor dst
[4, -1, 1, 6], // reverse src only
[-1, 4, 6, 1], // reverse dst only
[4, -1, 6, 1] // reverse both src and dst
];
var readbufferHasSRGBImage = (readbufferFormat == gl.SRGB8_ALPHA8);
var drawbufferHasSRGBImage = (drawbufferFormat == gl.SRGB8_ALPHA8);
for (var i = 0; i < 4; ++i) {
debug("");
switch (i) {
case 0: debug("reverse neither src region nor dst region"); break;
case 1: debug("reverse src region only"); break;
case 2: debug("reverse dst region only"); break;
case 3: debug("reverse both src region and dst region"); break;
}
var srcStart = test1[i][0];
var srcEnd = test1[i][1];
var dstStart = test1[i][2];
var dstEnd = test1[i][3];
var realBlittedDstStart = 2;
var realBlittedDstEnd = 5;
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_read);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo_draw);
gl.blitFramebuffer(srcStart, srcStart, srcEnd, srcEnd, dstStart, dstStart, dstEnd, dstEnd, gl.COLOR_BUFFER_BIT, gl.LINEAR);
// Read pixels and check the correctness.
var pixels = new Uint8Array(size_draw * size_draw * 4);
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_draw);
gl.readPixels(0, 0, size_draw, size_draw, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
for (var ii = 0; ii < size_draw; ++ii) {
for (var jj = 0; jj < size_draw; ++jj) {
var loc = ii * size_draw + jj;
var color = [pixels[loc * 4], pixels[loc * 4 + 1], pixels[loc * 4 + 2], pixels[loc * 4 + 3]];
// We may need to reverse the reference loc if necessary
var ref_loc = loc;
var reverse_src = (srcStart < srcEnd);
var reverse_dst = (dstStart < dstEnd);
var reversed = reverse_src ^ reverse_dst;
if (reversed) {
ref_loc = (size_draw - ii - 1) * size_draw + (size_draw - jj -1);
}
var expectedColor = ref[ref_loc];
// We may need to covert the color space for pixels in blit region
if ((readbufferHasSRGBImage ^ drawbufferHasSRGBImage) &&
(ii >= realBlittedDstStart && ii < realBlittedDstEnd && jj >= realBlittedDstStart && jj < realBlittedDstEnd)) {
if (drawbufferHasSRGBImage) {
expectedColor = wtu.linearToSRGB(expectedColor);
} else {
expectedColor = wtu.sRGBToLinear(expectedColor);
}
}
if (checkPixel(color, expectedColor) == true) {
testPassed("pixel at [" + jj + ", " + ii + "] is (" + color + "). It is correct!");
} else {
testFailed("pixel at [" + jj + ", " + ii + "] should be (" + expectedColor + "), but the actual color is (" + color + ")");
}
}
}
}
// The 2nd round test: blit read framebuffer to the image in draw framebuffer
// Only one direction of the read region have pixels outside of the read buffer
var tests = [
[-1, 0], // pixels are outside the left edge of the read buffer
[0, -1], // pixels are outside the bottom edge of the read buffer
[1, 0], // pixels are outside the right edge of the read buffer
[0, 1] // pixels are outside the top edge of the read buffer
];
for (var i = 0; i < 4; ++i) {
debug("");
switch (i) {
case 0: debug("verify that pixels lying outside the left edge of the read buffer should remain untouched"); break;
case 1: debug("verify that pixels lying outside the bottom edge of the read buffer should remain untouched"); break;
case 2: debug("verify that pixels lying outside the right edge of the read buffer should remain untouched"); break;
case 3: debug("verify that pixels lying outside the top edge of the read buffer should remain untouched"); break;
}
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_read);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo_draw);
var srcX = tests[i][0];
var srcY = tests[i][1];
var offset = dstStart - srcStart;
gl.blitFramebuffer(srcX, srcY, srcX + size_read, srcY + size_read,
srcX + offset, srcY + offset, srcX + offset + size_read, srcY + offset + size_read,
gl.COLOR_BUFFER_BIT, gl.LINEAR);
// Read pixels and check the correctness.
var pixels = new Uint8Array(size_draw * size_draw * 4);
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo_draw);
gl.readPixels(0, 0, size_draw, size_draw, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
for (var ii = srcY + offset; ii < srcY + offset + size_read; ++ii) {
for (var jj = srcX + offset; jj < srcX + offset + size_read; ++jj) {
var loc = ii * size_draw + jj;
var color = [pixels[loc * 4], pixels[loc * 4 + 1], pixels[loc * 4 + 2], pixels[loc * 4 + 3]];
var expectedColor = ref[loc];
// We may need to covert the color space for pixels in blit region
if ((readbufferHasSRGBImage ^ drawbufferHasSRGBImage) &&
(ii >= realBlittedDstStart && ii < realBlittedDstEnd && jj >= realBlittedDstStart && jj < realBlittedDstEnd)) {
if (drawbufferHasSRGBImage) {
expectedColor = wtu.linearToSRGB(expectedColor);
} else {
expectedColor = wtu.sRGBToLinear(expectedColor);
}
}
if (checkPixel(color, expectedColor) == true) {
testPassed("pixel at [" + jj + ", " + ii + "] is (" + color + "). It is correct!");
} else {
testFailed("pixel at [" + jj + ", " + ii + "] should be (" + expectedColor + "), but the actual color is (" + color + ")");
}
}
}
}
} else {
testFailed("framebuffer not complete");
}
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
gl.deleteFramebuffer(fbo_read);
gl.deleteFramebuffer(fbo_draw);
gl.deleteTexture(tex_read);
gl.deleteTexture(tex_draw);
};
if (!gl) {
testFailed("WebGL context does not exist");
} else {
testPassed("WebGL context exists");
blitframebuffer_outside_readbuffer(gl.RGBA8, gl.RGBA8);
blitframebuffer_outside_readbuffer(gl.RGBA8, gl.SRGB8_ALPHA8);
blitframebuffer_outside_readbuffer(gl.SRGB8_ALPHA8, gl.RGBA8);
blitframebuffer_outside_readbuffer(gl.SRGB8_ALPHA8, gl.SRGB8_ALPHA8);
}
var successfullyParsed = true;
</script>
<script src="../../js/js-test-post.js"></script>
</body>
</html>