WebGL上的快速纹理乒乓实现

Question

我正在尝试在WebGL上实现GPGPU计算，我需要在其中存储中间结果。整个计算不适合一个片段着色器，因此我必须将其拆分为几轮。

我实现了纹理乒乓技术，其中有两个纹理，可以交换每个渲染。

我有数千次渲染回合来获取结果数据，其中新数据依赖于以前的数据（不可能并行执行）。我有一个很大的纹理来存储所有数据，但是每轮需要在几个像素上进行计算（每轮8-20像素，纹理为1024x1024）。

我典型的片段着色器代码如下：

void main () {
    vec4 c = gl_FragCoord - 0.5;
    float position = (c.y * TEXTURE_SIZE) + c.x;
    float offset = mod(position, BLOCK_SIZE);
    float block = floor(position / BLOCK_SIZE);

    if ( offset >= (TMP_WORK_OFFSET) && offset < (TMP_WORK_OFFSET + WORKS_PER_ROUND)) {
         //Do the computation here
    } else {
         //Just return the pixel from the texture
         gl_FragColor = texture2D(uSampler, vTextCoord.st);
    }
}

目前，我每轮渲染整个帧，并且我想配置顶点以仅渲染优化所需的像素。第一个想法如下：

1. Set full frame squad vertecies.
2. Switch to simpleCopy shader program.
3. Copy texture to the framebuffer.
4. Switch to shader program to needed for computations.
5. Set vertices only for needed pixels.
6. Render computations to the framebuffer.
7. Swap textures and go to the #1

如您所见，在计算本身之前有5个步骤。恐怕每轮更改着色器程序和顶点（您还记得，我有成千上万的短轮要做）会产生巨大的开销。

另一个问题，它会比仅仅更快吗：

1. Render whole frame with needed complex shader program (which returns the origin pixel on unused pixels);
2. Swap textures and go to the #2.  

我还能做哪些其他优化？