搞Web3D真这么难吗，Three.js太碎片，Unity太笨重，PlayCanvas到底香不香？
今年年初的时候，我突发奇想，想在浏览器里搞个3D小项目玩玩。刚开始想用Three.js，但折腾了几天，光是搭物理引擎和动画状态机就快把我搞崩溃了，代码越写越乱，根本不知道从哪下手。后来我又试了Unity的Web导出，结果那个包大到离谱，加载慢得像老牛拉车，页面还跟我的前端代码各种打架，气得我差点放弃。
就在我快绝望的时候，一个搞技术的哥们跟我说，你试试PlayCanvas吧，它不像Three.js那样给你一堆零件自己拼，而是直接给你一辆装上发动机的整车。我一开始有点不信，一个浏览器里的游戏引擎能有多好用？结果真上手之后，我发现自己之前想得太复杂了，这种感觉就像玩那种搭积木游戏，人家直接给了你一个完整的小房子框架，你只需要在里面摆家具就行。
我觉得PlayCanvas最厉害的地方就是它那个可视化的编辑器。以前我搞3D，想让一个方块转起来，得写好几页的坐标和渲染逻辑，眼睛都要看花了。现在直接在浏览器里拖拖拉拉，实时就能看到效果，我这种半吊子都能很快上手。它真的解决了一个大问题，就是“程序员和设计师之间怎么合作”。我认识一个做3D设计的姐姐，她根本不会写代码，但能用这个编辑器搭出很酷的场景来，这就是它的厉害之处。
再说说它的技术底子，现在的WebGL2管线已经很成熟了，光影效果和阴影都做得挺漂亮的，基本能满足像汽车展示这种要求很高的场景。而且它还在快速适配那个新出的WebGPU，等以后普及了，性能还能往上翻番，这让我对它的未来挺有信心的。特别值得一提的是，它原生支持3D高斯泼溅技术，就是那种把真实物体快速扫描成3D模型的功能。我在网上看大神的Demo，直接用手机扫描一个雕像，在网页里就能转着看，加载还特别快，这技术以前在Web上想都不敢想。
物理和动画这块，它用的amnode.js引擎，做个小游戏里扔箱子、撞墙的物理效果，感觉跟真的差不多。动画系统也是基于状态机，控制角色的走路、跑步和跳跃，只需要设几个状态和触发条件就行，比那些手写代码简单了不知道多少倍。对于我这种只是业余玩玩，或者给公司做个产品展示的小项目来说，已经完全够用了。
对于前端开发的同学来说，PlayCanvas还有一个特别友好的地方，就是它跟React和Vue这种框架能无缝对接。比如`@playcanvas/react`这个包，让你可以用组件的方式来管理3D场景，把React的数据逻辑和3D的渲染循环完美结合起来。这就意味着，你不需要成为一个专业的3D工程师，只要会写点前端代码，就能在网页里轻松嵌入各种酷炫的3D交互效果。
跟其他工具比一下，差别就很明显了。Three.js就是给你一堆积木，让你自己去搭城堡，灵活是灵活，但要搭个完整的小区得累死。Unity WebGL就是一辆开不快的越野车，看着猛但上路就卡。Babylon.js也挺好，但我感觉PlayCanvas有那个完整的编辑器，还有个人气很高的SuperSplat工具专门处理高斯泼溅，另外它背后有Snap公司支持，又有MIT开源协议，社区很活跃，用起来心里比较踏实。
最后我用它做了个最简单的“旋转方块”，你们猜用了多少代码？核心部分还不到20行。就是创建一个应用，然后添加个实体，挂上渲染、相机和光照组件，最后在更新循环里让它转起来就行。如果结合Vue或者React，可以在点击按钮时改变方块的颜色或者加分数，真正做到了前端逻辑和3D效果的实时联动。
当然它也不是没缺点，如果做那种几百万个顶点的超大型开放世界，性能还是比不过原生的Unity或虚幻引擎。而且国内高质量的详细中文教程确实少，我学的时候基本都是啃英文文档和YouTube上的视频。但总的来说，它最大的价值就是大大降低了搞Web 3D的门槛。现在像Disney、宝马这些大公司都在用，说明它已经不只是小众玩具了。我觉得对于想进入3D世界的个人开发者，或者想做互动营销的企业来说，选择一个像PlayCanvas这样有完整工具链的平台，肯定是条捷径。等WebGPU大规模普及后，它的性能天花板还会被进一步打破，我挺期待能用它做出更好玩的东西来。
热门跟贴