Graphics 使用多个着色器的WebGL渲染顺序/组织/流

我正在努力理解

webgl

中呈现组织的一些概念

我正在做一个2D游戏，它有两种类型的对象-精灵和多边形。我有不同的着色器，按类型对游戏对象进行排序，并分两批渲染它们。比如说：

for sprite in sprites {
    prepare data
}
use_program(sprite_shader)
draw_elements

for polygon in polygons {
    prepare data
}
use_program(polygon_shader)
draw_elements

现在，我试图通过向单个对象（光晕、模糊等）添加一个或多个效果来扩展此功能。据我所知，我应该做的是将原始对象渲染为纹理，然后使用不同的程序应用效果，最后将生成的纹理绘制到画布上。我不知道如何将其应用到上述批处理方法中

我有一些想法，但似乎并不明智：

根据需要切换每个对象的程序-似乎从一开始就否定了分组的好处

为每个具有效果的对象创建帧缓冲区，一次性渲染所有相同的对象类型，但渲染到不同的目标，然后在稍后的效果过程中更新这些目标-如何处理正确的定位、z顺序等

将所有对象渲染到帧缓冲区，对需要的对象运行效果，然后使用sprite着色器渲染它们以绘制画布。同样，所有帧缓冲区的大小是否与画布的大小相同

我想我可以以某种方式为精灵预生成模糊纹理，并进行渲染，但我不能为多边形预生成模糊纹理

我很确定我不理解这里的一些东西，但这似乎是一件很普通的事情，我找不到类似的例子或文章