1

当我尝试在 webgl2 中创建 2x8 R8 纹理时，出现错误。4x8 纹理不会发生这种情况。如果我将输入缓冲区的大小比我预期的大小增加一倍，则 2x8 成功。

创建/读取纹理时，webgl2 的“列对齐”是否为 4？

这是一些重现该问题的代码。我在 Chrome 和 Firefox 中的 Windows 上对其进行了测试：

function test_read(w) {
    let gl = document.createElement('canvas').getContext('webgl2');
    let h = 8;
    let data = new Uint8Array(w*h);
    data[5] = 5;

    let texture = gl.createTexture();
    let frameBuffer = gl.createFramebuffer();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, w, h, 0, gl.RED, gl.UNSIGNED_BYTE, data);
    if (gl.getError() !== gl.NO_ERROR) {
        return 'bad w=' + w;
    }
    return 'good w=' + w;
}

console.log(test_read(4)); // good w=4
console.log(test_read(2)); // bad w=2

出现的错误代码是 0x502 (INVALID_OPERATION)。读取通过扩展缓冲区创建的纹理时会发生类似的问题：它似乎期望“列对齐”为 4。

4

1 回答 1

2

你需要设置gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)

默认UNPACK_ALIGNMENT值为 4，这意味着 WebGL 期望每一行像素为 4 字节的倍数。由于您使用的是 R8（1 字节像素）且宽度为 2，因此您的行只有 2 字节长。当您将宽度更改为 4 时，它开始工作。

function test_read(w) {
    let gl = document.createElement('canvas').getContext('webgl2');
    let h = 8;
    let data = new Uint8Array(w*h);
    data[5] = 5;

    // ---=== ADDED ===---
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

    let texture = gl.createTexture();
    let frameBuffer = gl.createFramebuffer();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, w, h, 0, gl.RED, gl.UNSIGNED_BYTE, data);
    if (gl.getError() !== gl.NO_ERROR) {
        return 'bad w=' + w;
    }
    return 'good w=' + w;
}

console.log(test_read(4)); // good w=4
console.log(test_read(2)); // bad w=2

于 2017-11-18T03:41:39.473 回答