我们正在开发一种交易卡视频游戏（对于桌面和移动设备，理想情况下对于移动设备来说非常快，否则我们将不得不使用HTML5和画布技术在这些低端设备上停用此图形功能）。
我们发现如果我们可以在某些特定的画布/场景元素上实现一些热变形（或某种水下/湍流）效果，它会为我们的顶视图环境（关卡）增加很多生命。只有草地和植被道具，以便在视觉上模拟（在某种程度上）随机动画风湍流对那些特定画布/场景元素的影响（理想情况下使用蒙版，以便仅影响预定区域）画布）。
根据风力，控制使效果强烈或微妙，以及对风向的控制将非常容易实现。我们只需要找到一些坚实的基础来开始工作。
为了确保您正确理解我们需要的效果，请查看这些视频：http://www.youtube.com/watch?v=brcMUHPNy-Y / http://www.youtube.com/watch?v=nZtmLCaYoHc
我们为此搜索了很多内容，并没有找到任何预先制定的解决方案来实现这种相对简单的效果。我们希望尽可能避免使用WebGL和threeJS，以及预渲染或预先设置任何图形的动画。
如何使用代码实现此效果？
答案 0 :(得分：0)
这是您开始进行性能测试的起点，但我警告说，对移动设备的动荡影响可能会超出可接受性的资源。
Almer Thie使用html canvas做了很好的水波纹效果：
http://code.almeros.com/code-examples/water-effect-canvas/#.VCr6tfldV8E
他的解决方案通过 context.getImageData 使用像素操作来实现效果。实际上，所有像素湍流效果都必须使用.getImageData来完成所需的像素操作。
问题是.getImageData永远不会被GPU优化，因此它在较少供电的设备（如移动设备）上运行速度非常慢。
您可以使用Almers演示作为基线来判断像素操作对于您的移动项目是否可行。我祝你万事如意......但我担心最坏的情况： - （