WebGL有很多纹理

Question

我正在处理WebGL中的图像处理，并遇到了一个我似乎无法解决的问题。我对GL没有多少工作，我觉得我误解了一些基本而简单的东西。

我的目标是模拟图层。最初我使用不同的上下文设置每个图层，然后将每个图层编译成最终渲染的画布，但是从画布创建每个渲染的纹理都很慢。接下来，我为每个包含图像数据的图层使用了Uint8Array，但速度要快得多，但却导致了我现在遇到的问题。

问题是当我添加超过8层时。如果我有8层并添加另一层，则第一层似乎被清空 - 该层变为空白。我尝试从Uint8Array更改为每个图层使用纹理，但问题仍然存在。

如果需要，我可以提供一些代码段，但是在多个文件中有很多代码，而且我已经尝试解决这个问题，这有点乱。使用两个帧缓冲区编译图层以来回绘制，着色器处理数学。

八层，渲染得当：

九层，破坏事物：

编辑：这是一些代码，我忘了提到我正在使用helper library twgl。

首先我设置图层纹理：

this.renderTexture = twgl.createTexture(gl, {
    width: this.width,
    height: this.height,
    target: gl.TEXTURE_2D,
    min: gl.NEAREST,
    max: gl.NEAREST,
    wrap: gl.CLAMP_TO_EDGE
});

我将一些东西（如图像）绘制到帧缓冲区，然后更新相应图层的纹理：

gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, this.buf8);

twgl.setTextureFromArray(gl, this.renderTexture, this.buf8, {
    width: this.width,
    height: this.height
});

最后我将每一层渲染成一层：

// create two buffers to ping pong
var blendedFramebufferInfo = [
    twgl.createFramebufferInfo(gl, [{
        src: $this.layers.length === 1 ? null : bottomLayer.buf8,
        width: gl.canvas.width,
        height: gl.canvas.height,
        target: gl.TEXTURE_2D,
        format: gl.RGBA,
        min: gl.NEAREST,
        max: gl.NEAREST,
        wrap: gl.CLAMP_TO_EDGE
    }], gl.canvas.width, gl.canvas.height),

    twgl.createFramebufferInfo(gl, [{
        width: gl.canvas.width,
        height: gl.canvas.height,
        target: gl.TEXTURE_2D,
        format: gl.RGBA,
        min: gl.NEAREST,
        max: gl.NEAREST,
        wrap: gl.CLAMP_TO_EDGE
    }], gl.canvas.width, gl.canvas.height)
];

var layers = [...],
    activeBuffer = 1;

while (layer = layers.shift()) {
    // bind to either buffer or canvas
    twgl.bindFramebufferInfo(gl, layers.length ? blendedFramebufferInfo[activeBuffer] : null);

    // set proper program
    var programInfo = $this.setBlendProgram(layer.blendMode());

    // set uniforms
    twgl.setUniforms(programInfo, {
        u_dst: blendedFramebufferInfo[activeBuffer ? 0 : 1].attachments[0],
        u_src: layer.renderTexture
    });
    // draw
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    // draw to other texture next time around
    activeBuffer = activeBuffer ? 0 : 1;
}