3D可视化引擎ThreeJS-基于WebGL的Web3D引擎

Ricardo (@mrdoob) 来自西班牙巴塞罗那，是多个优秀开源框架的作者，贡献了包括基于WebGL的3D引擎three.js，JS性能监控工具stats.js，纹理生成工具texgen.js等优秀项目，其中three.js俨然已成为当下前端搭建3D项目/可视化的首选方案。而且Ricardo是一名自学成才的程序员，早年也做过设计师，通过业余时间的学习，他走上了图形编程的道路。

– 如何定义元宇宙与three.js的关系？你觉得three.js未来的应用场景可以切合元宇宙吗 – How to define the relationship between the metaverse and three.js? Do you think the future application scenarios of Three.js will fit into the metaverse 或许可以切合，但是在这个时间点，还不能看清未来的形式，听起来承担的责任太大。确实，three.js 会对 metaverse 有帮助，但是我也有会有些担心。

– 在元宇宙概念大热的今天，如何看待WebGL、图形学的发展趋势？目前是否处于技术大变革的前夜？泛前端技术人员应该在哪些领域耕耘？ – Nowadays, metaverse has become a popular topic. How do you perceive the future trend of WebGL and graphics? And what are the areas that are worth further exploration? 现在的 web 大部分都是用 html 呈现的。对于 metaverse 的话，我们需要定义一个让所有的 VR 设备都能懂得东西来呈现 metaverse。这样大家才能一起去创建一个 metaverse。或许有人可以独自创建一个足够吸引人的 metaverse 吧，这样就没啥争论了。但我觉得还是有很多事情要做的。谁知道 10 年后人们会怎么使用我的框架呢，哈哈。

– 元宇宙和云计算的关系(技术方面)？ – What is the relationship between the metaverse and cloud computing（technically） 更沉浸式的，metaverse 不是一个简单的屏幕，你会有更好的交互体验。你戴上头盔后，你可以看到很多虚拟的屏幕，你可以做这做那。metaverse 总得来自于什么地方吧，所以我觉得云计算是可以提供这部分的东西。

– 看到 ricardo 在 twitter 上说 “Web3 is the web after three.js, obviously”请问他如何看待 Web3？ – You have tweeted that Web3 is the web after Three.js. Can you explain your perceptions about web3 furthermore? 这是一个玩笑，因为最近每个人都尝试去定义 Web3，而我的玩笑点是 Web + three.js 听起来像 Web3。Web3 应该是类似区块链， nft，边缘节点共享数据库等等，这是我对 Web3 的理解。

– WebVR WebAR 聚合 – web端在VR领域有什么机会吗？ – Are there any potential opportunities for Web developers in VR? VR 早期需要支持很多机器，但现在一般只需要关注 oculus 就好了。而且你大概也只需要学习使用 unity，至少在我的视野里，他们也很欢迎 web 工程师的参与。现阶段的电脑你的交互是很有限的，但在 VR 你可以有更多的交互方式，所以如果你希望的话，你可以有很多事情可以做。

– 看到 three.js 的 WebGLDeferredRenderer 被移除了，请问后面有计划支持一下延迟渲染(reandering delay)么？ – It can be seen that the WebGLDeferredRenderer of Three.js has been removed . Are there any future plans to support rendering delay? 现在暂时没有计划来做这件事情。维护一个渲染器就已经很难了，要在这个基础上做更多的改动更难。看吧，看接下来业界的渲染器都会有什么趋势，但现在确实没有支持延迟渲染的计划。

– 如何优雅地modify内置的Material（不看源码的情况下）？ – Is there an elegant way to modify internal material without inspecting the source code? 目前有一些工具用来连接 nodes, materials，但准确来说，目前还没有简单的方式编辑内置 material。但是希望能明年能有一个编辑器来帮助做这件事。当然，这并不是唯一的编辑 material 的方式。

– Three.js 什么时候会采用语义化版本控制 ？现在的方式在升级时不能直观确定兼容性？ When will Three.js adopt semantic versioning? As the current method cannot guarantee compatibility when upgrading. 对于 Three.js，这是比较难处理的问题，经常有 3 到 4 个版本需要同时维护，这并不是一个常规的场景，升级的过程中发生了很多的事情，让我们看看五年后会怎么样吧。

– 做3D渲染的时候，CSR和SSR的优缺点是啥？ – When doing 3D rendering, what are the pros and cons between Client Side Rendering and Server Side Rendering? 我觉得这更类似 React, Vue 的相关概念。对于 Three.js 来说，一直都是前端渲染。

Three.js大概是从什么时候开始关注性能优化问题的？以及你认为目前为止做出的最重要的三个性能优化点是什么？ – When did Three.js start to optimize its performance? And what are the top three key optimizations you have made to Three.js so far? 优化是无法从一开始就被考虑的，我一开始的时候对 webgl 不熟。3 年前吧，我需要移除很多 generative geometry 的代码，因为它们不是很高效，尽管它们能让开发者更快的画出图形。有些很是很喜欢深入代码库的，会看渲染器的底层实现，比如在渲染五十个圆球，渲染成红色，需要红色的材质。这些材质是在 gpu 的，需要使用着色器。因为这些材质都是一样的，是红色的，所以你不需要 50 个相同的材质，我们会想办法不会生成很多相同的材质来下发给 GPU。这让我们的渲染器快了一点点。我们还有很多类似的例子，你可以去源码里看看那些 merge, 你会看到我们清理了很多代码。优化永远在路上。当然了，还要处理很多数学的事情，比如我们会推出更多和 material 相关的代码，比如用于光线的折射，会用到很多数学。

– 在包含有大量实时光源的场景中如何做性能优化？ – How to optimize performance in scenarios with lots of real-time light sources? 我们需要限制光源的数量和类型。如果你的场景里光源太多的话，计算会非常复杂。通常，你可以使用 blender 来把光照直接渲染成静态的材质，假设光源不动的话。thee.js 当然可以渲染动态的光源，但是如果 three.js 暴露太多和光照有关的东西， 那就得有太多参数了。 代码很难完美实现现实中的光线表现，要实现光照效果，我们有很多 hack 的方法。

– threejs内存释放，总是释放不干净，有没有彻底释放内存的方法 – Some people say they often encounter memory leak issues in developing Three.js applications. Is there an elegant way to manage memory? 当你渲染很多对象的额时候，他们都有自己的元信息，程序得追踪这些信息。我觉得你可以有一个元信息对象，用来管理所有你的资源，然后就可以统一释放资源了。但这也只是我自己的做法。很难处理所有的场景。

– 怎么看待 babylonjs？ – What do you think of Babylon.js? 有另一个选项永远是好的。我们会互相借鉴，但我们会有不同的解决方案。Babylon 比较适合游戏开发。three.js 更像是 flash. 我们互相帮助解决对方在浏览器里可能遇到的问题。任何开源的框架越多越好，而不是只能先选 farcry 引擎啥的。 我们会一起研究有些 3D 是如何实现的，比如上月我们或许可以为 camera 加一个 attribute，会和他们一起交流，他们也会有反馈，总之我们喜欢帮助彼此，也能理解彼此面对的难题。

9 We already have an excellent WebGL library Three.js. Should we spend time studying at the low level fields underlying Three.js, such as Computer Graphics? 不一定吧，我一开始从 flash 学期的，学的时候很多东西不work，我会去查为什么，慢慢的才把这些事情学起来。我更喜欢从上到下的学习，不像很多人是从下向上，从基础学习的。这个框架本来就是让大家能更方便的展示自己的想法，所以他们不是很需要学习底层技术，但如果真的想学的话，当然好啊。你永远不会停止学习计算机，驱动是怎么样的，很多工具是什么样的，学习 webgl 不一定能让你更加有效率。

– 你怎么会想到开发一个three.js 的库 – 7 How did the idea of creating Three.js come to you? 更像是一个急迫的，必须的任务，因为我需要做一些 3d，但找不到好的工具。我一直想有一个自己的引擎来实现我想要的东西。但我现在其实根本没有时间来使用 three.js 了。

– WebGL和WebGPU的对比? 如果要投入学习的话应该选择哪一个? 如果想学习VR是不是要学Unity? – 6 Would you please make some comparisons between Web Graphic Library and WebGPU? And if a person is to choose one of them to learn in depth, which one would you recommend as a starter? Should we learn Unity if we want to learn VR? 如今其实两者都可以学习一下。如果在 5 年前的话，我会说学 webgl 吧。但是 webgl 是 10， 15 年前被设计出来的？他不适应如今的硬件，无论是他的 api 设计还是语言本身。所以才出现了 WebGPU。WebGPU 更直接，和硬件的互动更好，但我认为对新手来说更加困难。况且 WebGPU 在浏览器里还不稳定， 希望两年后大家可以用 WebGPU 吧。 today, good to leanr both. if 5 years ago , webgl. main thing is webgl is 15 years old issh, but the design the langugae, not for todya. so comes the new api to cope with graphic cards today. webgpu is harder to understand for starters. the benifits is more direct with hardware. cpu do less. more optimized. in 2 years ,ppl can start t learn webgpu. webgpu is not stable in browsers now.

问题2回答：当你自学编程的时候， 遇到过什么困难?—— 我现在还是认为我自己更像一个 graphic designer. 我在以前学习的时候，其实收到了一个叫做 James (做吸尘器）的人的启发，他说做同一样东西的人应该坐在一起做这个事情。所以我才开始了学习做一个自己的 framework. 我希望我的框架是简单的，但其实其中的物理啊，着色器啊什么的其实很复杂的，我读完就忘了。我的数学也不是很好，而且我也说实话不是一个好的工程师，因为管理这么一个项目，你需要管理很多同事，确保社区尊重彼此，需要确保不同水平的人都能同意你想做的事情，复杂的想开一个公司。