Three.js 使用总结

来新公司后被调到了一个做 H5游戏的小组,用 three.js 来做了一个“跳一跳”,中间遇到过很多问题,在此记录和总结一下,以为以后类似的事情做一个前车之鉴。

three.js 是啥?

一个图形库,类似于Ogre,因为缺少很多游戏引擎所必须的东西,所以不能称之为一个游戏引擎。例如物理、UI和一些工程化的东西。

为什么要用three.js ?

由于刚接到这任务的时候,对于 H5的游戏引擎,我是没有熟悉的,但是听说微信的跳一跳是用three.js 来做的,于是我也就选了three.js

three.js 有啥优缺点?

因为它本身不是一个游戏引擎,缺少物理、UI 这两个模块,没有编辑器,只能靠运行代码来看效果,开发效率低下,缺少外部资源处理的 pipline,例如将多个模型的贴图打包成Atlas 然后在游戏中使用,虽然有 FBXLoader 可以加载fbx 文件到游戏中,但是其本身还不太成熟,存在一些 bug,例如动画播放https://discourse.threejs.org/t/wrong-orientation-when-play-animation/3182 , 缺少 batch https://github.com/mrdoob/three.js/issues/10654 , 不支持 FBX 文件中的动画切分,所以一个FBX 文件只能支持一个动画,缺少粒子系统,动画不能拷贝https://github.com/mrdoob/three.js/issues/11574 ,官方文档对 shadow 描述不清,自己写 shader 去实现阴影投射和阴影接收困难,https://github.com/mrdoob/three.js/issues/12114 , https://discourse.threejs.org/t/custom-shader-with-shadow/2847

性能如何?

WebglRendererantialias 参数会使显存占用增加一倍,但其实用不用看出去区别。 devicePixelRatio 对性能影响很大。 shadow 对性能影响很大。没有 batch 功能。不适合复杂游戏开发。

有什么教训?

关于初期游戏引擎的选择方面,需要慎重考虑,不然会给后续开发留下无尽的坑。关于游戏引擎的选择,吸取这次的教训,至少需要考虑下面一下问题:

  1. shader好不好写,阴影如何实现
  2. 有没有粒子系统
  3. 骨骼动画、变形动画
  4. UI 方案;
  5. Texture atlas 支持,压缩格式贴图支持
  6. 资源的加载和释放是否有明确时机
  7. shader 预加载(预编译)支持。类似https://docs.unity3d.com/ScriptReference/ShaderVariantCollection.html
  8. 物理支持?
  9. 有editor?
  10. 多线程,异步支持?
  11. gpu instance ?
  12. 阴影抗锯齿怎么实现? 静态物体的阴影优化 Freezing Shadow in static world [Babylon.js], 类似于unity中的lightmap ref https://support.unity3d.com/hc/en-us/articles/207820473-Mixed-mode-lighting-my-baked-objects-are-not-casting-shadows-on-RealTime-objects ref https://docs.unity3d.com/Manual/LightMode-Mixed-Subtractive.html
  13. shadow cascade ?
  14. static/dynamic batching
  15. 类似unity中的 sharedMaterial/sharedMesh
  16. layerMask ?

建议?

如果要开发下一款 H5 的游戏,我会选择 Babylon.js