TIDE.JS：三维空间数字化渲染引擎

近几年，随着3D扫描设备成本降低，三维扫描硬件、3D建模或重建技术以及VR/AR技术的逐渐成熟，三维数字化逐渐开始在生活中普及。如VR看房、VR购物、VR探厂、VR导航、数字沙盘、CIM平台等，并且诞生了一批三维扫描、智慧运维、VR/AR的创业公司。特别是近两年的疫情也加速了三维数字化进程，足不出户在家就可以线上体验的需求变得更加迫切。

1.1 一些业务形态（上图部分来自网络）:虚拟展厅、数字沙盘、智慧运维

团队在业务探索的过程中，尝试过各种不同的渲染引擎，例如ThreeJS，BabylonJS等，他们都是非常优秀的渲染引擎或者游戏引擎，但是在业务尝试的过程中，发现这些引擎在某些方面无法满足我们的业务需求。我们希望的引擎是：1.一个具有组件架构的渲染引擎、2.底层渲染层可以剥离便于自己掌控细节、3.在保证渲染能力强的前提下需要尽可能的轻量化。用比较通俗的话来说，我们需要一个麻雀虽小五脏俱全的渲染引擎。在这样的目标驱使下，我们开发的引擎具有一下特点：

组件化：TIDE.JS使用了EC/ECS（Entity & Component；Entity Component system）混用的组件开发方式搭建，与unity等主流引擎保持一致。针对拥有unity，unreal，cocos2dx开发经验的同学来说，有效降低了学习成本。下图展示了我们组件化架构，在具体的业务中发挥的作用。组件化设计便于我们沉淀特定业务组件，任意组合功能给其他业务，提高技术复用性。下图（2.1）展示了业务如何沉淀组件和组件的可复用性，以及支持的上层业务。

2.1 引擎的整体层级结构，并示意了各业务沉淀业务组件、组件共享复用的情况

组件由管理器统一进行管理，并执行其周期函数。目前我们支持的周期函数（运行时）如下，足以满足大多数互动需求。Editor模式下，还会有GUI、DrawGizmo、OnSelected等周期函数。周期函数会定义组件的具体行为，比如上图中提到的“倾斜摄影”业务下的“第一人称控制组件”，使用WASD/QE 来控制摄像机的飞行：

它在onStart时缓存要控制的transform对象，在update函数中，去取得键盘状态，并计算transform对象的新姿态；开发者不用关心onStart，update在后台是如何被调用的，只需要知道onStart在组件生命周期里只执行一次，而update每帧执行一次就足够了。

这个“第一人称控制”组件，如果添加到摄像机上，就可以让摄像机具备响应WASD/QE操控的能力；如果添加到“万花筒业务”的虚拟导购对象上，也可以让虚拟导购对象接受WASD/QE的控制。这也是组件复用的基本含义。

2.2 组件的周期函数（runtime）

组件的另一个核心主题，就是序列化/反序列化，这个操作是为了将“逻辑”复用。我们是通过Prefab/Package系统来完成这个任务的。Prefab管理器将Entity 对象序列化成一个json，只包括每个组件的参数，并不包括组件的代码。Package会将这个json、相关组件的代码、组件引用的资源文件等，打包到一起，用于项目间的复用。关于Prefab/Package系统本文不再累述，会在稍后的系列文章中做详细介绍。下图展示了Prefab与“逻辑复用”的情况：

2.3 prefab进行资源复用

对于AI的行为，我们也内置了两种典型的处理方案：有限状态机、行为树，并在实际的业务中使用起来；状态机的管理器也是基于组件的，所以Prefab管理器会将其直接序列化到json，并支持其他业务复用。更多关于有限状态机、行为树的内容将在之后的系列文章中做详细介绍。

轻量化：组件化的另一个优势是可以大大降低代码体积。每个业务只需要包含他需要的组件，以及渲染所需的基础渲染内核，即LLEF层（包名：@ali/llef)。LLEF层体积非常小（