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

所以，我读了，虽然它看起来很有效，但它大大降低了我的FPS，通常我的程序在WebGL完全崩溃之前只能运行10秒

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

我不只是使用一个画布，因为我不知道如何使用一个画布。我不能简单地将游戏画布变暗，然后有选择地将照亮的区域变亮，因为变暗着色器会丢失原始像素颜色。所以我试着用两张画布。第一个操作累积所有照明值，然后在确定所有照明值时，有一个混合操作来混合两个画布

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

---

是否有更有效的方法执行此操作？似乎每帧上传所有这些纹理数据都会完全破坏性能。

你需要仔细研究一下。是的，我最终解决了这个问题，创建了两个帧缓冲区（一个用于所有灯光，一个用于游戏的其余部分），然后创建一个混合它们的着色器。