使用精灵和spritesheets的三个JS廉价人群

时间：2014-08-12 13:59:50

标签： 3d three.js sprite sprite-sheet

我正在开发一个three.js项目，该项目要求我创建大量人群作为可视化的一部分。

我已经确定使用精灵而不是3D模型将是一个很好的性能解决方案，因为从理论上讲，我可以拥有性能影响最小的逼真人物。

我在创建一个具有许多女性精灵的粒子系统方面取得了相当的成功。显然，当相机移动并且女人继续面对相机时，幻觉就会消失。那就是说，这是我的问题：

第一部分 - Spritesheets

有没有办法让我可以制作three.js 调整用于精灵的实际图像的可见部分（取决于相机指向它的角度相对于指定的物体方向？

这项技术在许多视频游戏中都很明显，例如Mario Kart 64，其中高级3D模型的图像只是从许多角度拍摄并包含在一个大的spritesheet中。根据需要用字符的正确部分替换字符图像，以创建高质量字符的幻觉。

Mario Kart 64 video（注意巧妙地使用精灵来表示角色和物品） https://www.youtube.com/watch?v=aundeN2eX_E

Mario Kart 64 Sprite

这种错觉对于我的情况来说是相当完美的，因为人群中的人物的逼真质量与流畅的表现相结合将很容易弥补“跳跃”的轻微刺耳的视觉效果。从一个角度到另一个角度，特别是因为人群不会成为主要焦点。

第二部分 - 粒子系统

如果可以，有没有办法可以创建这些特殊精灵对象的粒子系统，以便在性能方面以低成本填充所需区域？

附注

  • （理想情况下，我当然希望这个区域能够填充第一部分中不同的人选，但有些事情告诉我这将是最不重要的问题）

  • （另一方面说明，我的初始测试场景在查看精灵的透明部分时产生了一些奇怪的效果 - 只有一些会被渲染 - 尽管我仍在研究这个问题）

我非常感谢有关此主题的任何帮助。我担心我对三个人的了解。我只是不能与我在这里需要做的事情相提并论。如果这一切都不可能，任何人都可能有任何其他的建议，如何创造大量人群的错觉，而不会产生数百个复杂的3D模型的巨大性能成本。

非常感谢你提前。

1 个答案:

答案 0 :(得分：2)

有趣！还有很多东西需要考虑，所以不要在这里写一个文字墙，而只是我身边的大脑转储：

  • THREE.ParticleSystem使用GL_Point渲染，你已经明白了。
  • 粒子系统只是平放。但是你需要考虑相机高度，因此需要考虑相机与人之间的角度，并扭曲图像以使透视看起来正确。我为我的树叶引擎做了类似的事情：viewHeight = cos(atan(abs(cameraPosition.y - position.y) / length(position.xz - cameraPosition.xz)));
  • 让这个人从几个360°（比如8个角度）开始，每个图像之间有45°。为了弥补这一点，我将计算摄像机和点之间的距离（在片段着色器中）并考虑法线贴图以在那里执行一些光计算！只为那些附近的人，你可以为每个角色使用相同的法线贴图:)（可能它不值得，所以我一开始就省略它）
  • 一个简单的步行＆amp;角色的立场动画将是(2 (walk) + 1 (stand)) * 8 (angles) = 24 images per character，加上一张普通地图。所以我建议使用不同的角色是将它们从3D模型渲染到精灵表上，然后重新构造它们以便有几个不同的角色。
  • 你想让你的角色走来走去吧？为此你需要
    • 在粒子系统上启用深度排序
    • 动态位置，因为你从计算的新位置（这是“天真”的方式）一直更新它们，在这种情况下更好的方式是DataTextures。

我想到的（相对较小的）缺点：

  • Sprites具有透明度，您可以进行深度排序。这也是一个性能打击
  • 人们互相走过（否则你的表现会走下坡路）

顺便说一句：在3D术语中，spritesheet是一个“纹理图集”，你在片段着色器中为你的spritesheet设置了“纹理图集查找”。

如果有什么东西出现在我脑海里，我明天会写更多关于它的信息:) gl hf！

相关问题
最新问题