1

对于游戏，我正在尝试计算光影。为此，我将我的画布分解为正方形区域，并计算在从玩家到每个正方形位置的途中是否会阻挡光线。我现在已经设法为这些计算达到了相当好的性能。

然后通过用黑色方块 ( Canvas.fillRect(...)) 覆盖不可见区域来可视化结果，但是当想要一个好的分辨率时，这个步骤变得过于昂贵，即大约 10'000 个方块用于计算。我尝试先将它们渲染到屏幕外画布（=缓冲区）中，然后在可见画布上绘制缓冲区，但我无法体验到任何显着的性能改进。

是我遗漏了什么，还是有其他方法可以加快绘图速度？

更新：

受影响的代码可以在这里找到：https ://github.com/otruffer/Ape_On_Tape/blob/master/src/client/js/visibility.js （代码有点太大，不能在这里发布）

实际绘图发生在该文件drawCloudAt(...)的flushBuffer()下部。

4

1 回答 1

1

在软件中进行实时光计算始终是性能杀手。您是否考虑过使用真正的 3d 引擎来代替视频卡上的光计算？是的，Javascript 现在可以做到这一点——这个新功能称为 WebGL。

当您只需要一种更快的方法来应用光照贴图时，您可以直接操作画布的 RGB 值，而不是使用 fillRect。您可以使用 getImageData 获取画布的原始 8 位 RGBA 值数组。然后，您可以操作此数组并使用 putImageData 将其放回原处。

于 2012-12-12T15:25:07.147 回答