javascript - Canvas 快速纹理映射

Question

我正在制作一款具有简单 3d 图形的俯视游戏。 (如果它像 gta 2 我会很高兴。)我已经实现了我发现的仿射纹理映射 here但它过于占用 CPU。

所以我的问题是:是否有更好的解决方案？我不了解 WebGL，但也许硬件加速纹理映射会比这更好？我需要一个函数，它将在四边形上映射纹理。

你可以试试我的游戏here . (按 J 查看线框，按 K 或 L 提高 fps 或质量)如您所见，它确实需要一些优化。 :-)

Answer 1

首先，这是一个很棒的演示!感谢您为此付出了如此多的努力。

对于这样的用法，WebGL 绝对会给您带来更好的性能，并且考虑到您看起来只需要一些带纹理的立方体，我认为这对您来说也不会非常困难。是的，3D 比 2D Canvas 工作更容易学习，但考虑到您已经做了很多数学运算来模拟 3D，您可能会发现“真正的”3D 更容易!

开始的好地方是 LearningWebGL.com 上的类(class).他们将向您介绍基础知识，而纹理映射(您想要的部分)只需 5 节课。

当然，您也可以有点疯狂，使用纯 CSS 获得您想要的效果!有一个 pretty cool demo有人实际上用它构建了一个城市场景，所以这当然是可能的。不过，这感觉有点牵强，从功能的 Angular 来看，直接使用 WebGL 可能会好得多。