如何选择 WebGL 框架和引擎？

愉悦你我
1,089 阅读3分钟

小结

可以记一下我的看法：

和 Cocos

www.cocos.com/

，但需要注意它们只是源码开放，并不是无条件免费使用，需要仔细阅读使用协议。

  • 如果只想写原生 WebGL 特效，建议用 regl。​github.com/regl-project/regl
  • 如想支持大量光源和后期特效，又不需要支持 iOS，用 Claygl。claygl.xyz/
  • 如果熟悉 Unity，直接用它导出 WebGL 也是可行的。

后记：WebGL 为什么没火起来？

10 年前 WebGL 刚出来的时候我很期待，因为可以在 Web 上做出酷炫的三维效果了，看起来前景一片光明，然而现在除了小游戏，其它地方几乎没有人使用，也很少前端工程师了解，为什么呢？在我看来主要是这几方面的原因：

  1. WebGL 和前端开发差异性太大，前端工程师学 WebGL 相当于删号重练，除了繁琐的 API，图形学的数学知识也导致了门槛高，最基础的 MVP 就能劝退不少初学者，更别说后面的辐射度量及采样学知识了。
  2. 网速发展太慢，Web 不能像桌面游戏那样预先下载几十 G 的模型和材质，在 Draco 压缩技术出现前，随便一个模型文件就要十几 M，极大限制了 WebGL 能做的事情，没人愿意打开个页面还要先等几分钟加载。
  3. JavaScript 本身的性能限制，除了 JavaScript 虚拟机的消耗，在调用 WebGL API 的时候还需要经过一层转换，而很多浏览器是基于 ANGLE 支持 WebGL 的，在 ANGLE 中又会做一层检查，然后在 Windows 下还得将 GLSL 转成 HLSL，在 CPU 上要做的额外工作大大高于桌面程序。
  4. WebGL 2.0 相当缓慢的发展，使得 WebGL 引擎的技术也停滞不前，前面提到过 WebGL 1.0 缺少很多重要功能，比如 Draw Buffers、Occlusion queries 等现代渲染引擎优化性能所依赖的技术，而 WebGL 2.0 的发展又极其缓慢，尽管启动于 2013 年，但直到 2017 年才正式推出，要知道 OpenGL 的替代者 Vulkan 是在 2016 年推出的，所以 WebGL 2.0 还没发布就面临被淘汰，加上 Apple 的刻意打压，至今 Safari 在桌面和 iOS 上都不默认开启 WebGL 2.0，所以 WebGL 2.0 几乎没人使用，用也只能用那些支持面比较广的 WebGL 1.0 扩展功能。
  5. 经济方面的原因，前面提到的很多原因导致了 WebGL 只能开发小游戏，收益不高，收益不高投入就少，导致相关工具的缺乏，尤其是优秀的场景编辑器，UE4 之所以能实时渲染逼真画面，就是靠编辑器的烘焙和计算 Lightmass 来解决间接光照问题，编辑器开发成本极高，不如就只能等光线追踪普及并标准化，预计至少五年。

Web 的下一代技术是 WebGPU，它能极大提升性能，具体提升多少呢，在 WebGPU 官方 wiki 中拿了 Babylon 的例子：

www.babylonjs.com/demos/webgp…

www.babylonjs.com/Demos/WebGP…

我测试后发现 CPU 时间从 20ms 降到了 0.08ms，FPS 从 30 增加到了稳定 60，提升非常明显，是不是很期待 WebGPU 的未来？

然而这个对比并不公平，这里的性能提升不完全是 WebGPU 带来的，我猜是开发者在演讲前发现效果不明显，就先优化了一下，下面这段代码是 WebGPU 版本中多出的部分，如果加到 WebGL 版本中也能明显提升性能，因为每次循环的时候不需要重新计算了，可以显著减少 CPU 时间。

// After all the meshes creation, freeze as much as we can to improve perfs.
optimizeScene(scene);

const optimizeScene = function(scene) {
    scene.freezeMaterials();
    scene.meshes.forEach((m) => {
        m.isPickable = false;
        m.alwaysSelectAsActiveMesh = true;
        m.freezeWorldMatrix();
    });
    setTimeout(() => {
        scene.freezeActiveMeshes();
    }, 1000);
}
avatar
文章
阅读
粉丝