javascript - 如何实时混合两个 WebGL 画布？

Question

所以，我读了这个答案，虽然它似乎有效，但它大大降低了我的 FPS，通常我的程序只能在 WebGL 完全崩溃之前运行 10 秒。

基本上，我正在尝试在我的 2D 自上而下游戏中实现照明。我通过拥有两个 WebGL 画布来做到这一点。在第一个中，每个像素的范围从纯黑色到纯白色，每个像素代表该位置的光强度。第二个 WebGL 画布只是我的常规游戏画布，游戏中的所有内容都在其中被渲染。然后，在运行期间，每帧将这两个画布混合在一起，以模拟照明。

我不只是使用单个画布，因为我不确定如何只使用一个画布。我不能简单地使我的游戏画布变暗，然后选择性地使照明区域变亮，因为原始像素颜色会从变暗着色器中丢失。因此，我尝试使用两个画布。第一个累加所有的光照值，然后当所有的光照值都确定后，就有一个混合两个画布的混合操作。

同样，这是有效的，但它非常慢并且容易崩溃。我认为问题在于我每帧创建两个纹理（一个照明画布和一个游戏画布），然后将所有纹理数据上传到每个纹理，然后进行混合。

有没有更有效的方法来执行这个操作？似乎每帧上传所有这些纹理数据完全是在扼杀性能。

标签： javascriptperformanceshaderwebglblending