Javascript WebGL有许多纹理

我在WebGL中从事图像处理工作，遇到了一个似乎无法解决的问题。我与德国劳埃德船级社的合作不多，我感觉我误解了一些基本和简单的东西

我的目标是模拟层。最初，我使用不同的上下文设置每个层，然后将每个层编译成最终渲染的画布，但从画布创建纹理时，每次渲染都很慢。接下来，我为每个包含图像数据的层使用了一个

Uint8Array

，速度快得多，但导致了我现在遇到的问题

问题是当我添加超过8层时。如果我有8层，并添加另一层，第一层似乎是空的-层成为空白。我尝试从

Uint8Array

更改为对每个层使用纹理，但问题仍然存在

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

八层，正确渲染：

九层，打破事物：

编辑：这里有一些代码，我忘了提到我正在使用

首先，我设置图层纹理：

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;
}

---

可以看到一些代码和着色器吗？很难准确理解您在API级别上所做的工作。添加了相关代码。着色器非常简单，有四个顶点和复制片段，因此工作肯定很好。如果更容易解释如何在没有twgl的情况下完成这项工作，那就完全好了。我甚至不想使用该库，但正如我所说，我没有太多使用webgl，使用它似乎更简单。是否需要调用

gl.readPixels

？可以直接渲染到纹理（将其附加到帧缓冲区）。速度会快得多。至于为什么它在8层失败，到目前为止，您发布的代码中没有任何明确的内容。你能在这个问题上举个有效的例子吗？我想我的代码可能太复杂了。我将尝试简化事情，我将在这里发布更新。可能会看到一些代码和你的着色器吗？很难准确理解您在API级别上所做的工作。添加了相关代码。着色器非常简单，有四个顶点和复制片段，因此工作肯定很好。如果更容易解释如何在没有twgl的情况下完成这项工作，那就完全好了。我甚至不想使用该库，但正如我所说，我没有太多使用webgl，使用它似乎更简单。是否需要调用

gl.readPixels

？可以直接渲染到纹理（将其附加到帧缓冲区）。速度会快得多。至于为什么它在8层失败，到目前为止，您发布的代码中没有任何明确的内容。你能在这个问题上举个有效的例子吗？我想我的代码可能太复杂了。我将尝试简化事情，我将在这里发布更新。