Web3D技术

引用《从 WebGL 到 WebGPU——网页图形的全新时代》的观点，被称为“未来”的 WebGPU 标准或许正使得 Web 引擎们又站在了同一起跑线上。

关于web3D引擎，由于我们应用场景的特殊性及工作流程差异，较难避免大量定制底层引擎。我们拥有性能在第一梯队的royengine，但同时也有自研引擎的固有局限，包括资源投入度、功能完整性、保质效的工具链路、社区规模和生态系统等方面。

本文主要是结合实际需求出发，初步发掘合适我们的技术路线。

主流技术路线简介（由ai输出)

Three.js

特点：Three.js 是基于 WebGL 的开源 JavaScript 库，用于在浏览器中创建和展示3D内容。它提供了丰富的几何体、材质、光照、相机等组件，以及动画、粒子系统、骨骼动画等功能。
- 易用性：Three.js 提供了高级抽象层，简化了WebGL的复杂性，使得开发人员能够更专注于创意实现而非底层图形编程细节。
- 跨平台兼容：支持多种现代浏览器，并且可以与VR（虚拟现实）设备如Oculus Rift或HTC Vive结合使用。
- 社区活跃：拥有庞大的开发者社区和丰富的教程资源，许多高质量的示例项目可供参考。

Babylon.js

特点：
- 高性能：Babylon.js 同样是一个强大的WebGL游戏引擎，强调性能优化和高效的渲染能力，特别适用于游戏开发和交互式应用构建。
- 功能全面：提供完整的场景管理、物理引擎、光影效果、后期处理特效、动画系统、UI工具包等全套解决方案。
- 工具链集成：集成了诸如glTF格式支持、实时调试工具等，便于模型导入和快速迭代开发。
- 学习曲线：具有良好的文档和工具支持，为初学者降低了门槛。

Oasis Engine

特点：
- 阿里出品：Oasis Engine是由阿里巴巴集团研发的一款针对Web3D及移动端H5游戏的高性能图形渲染引擎。
- 移动端优化：着重于移动设备上的性能优化，尤其是在低端机型上的表现。
- 资源加载与管理：具备高效资源加载和自动资源分块机制，提升大型3D场景加载速度。
- 可视化编辑工具：提供配套的可视化编辑工具，方便非专业开发者进行3D内容创作。

XR-Frame

特点：
- AR/VR框架：XR-Frame主要面向增强现实（AR）和虚拟现实（VR）应用开发，整合WebXR API来支持跨平台XR体验。
- 模块化设计：采用模块化架构设计，允许开发者根据需求选择不同的AR/VR功能模块。
- 沉浸式体验：致力于提供流畅、低延迟的沉浸式Web3D体验，适合于制作虚拟展厅、教育培训等应用场景。

Verge3D

特点：
- 集成3D设计软件：深度集成Blender、3ds Max和Maya等三维建模软件，将设计成果直接转化为Web3D应用。
- 可视化编程：通过Puzzles视觉编程系统，实现零编码或低编码的Web3D互动内容创建。
- 行业应用广泛：适合电商、教育、工业等领域，尤其对于设计师群体友好，能快速搭建复杂的交互式3D应用。

SceneJS

特点：
- JSON配置驱动：以JSON文件描述场景结构和节点行为，易于理解和维护。
- 轻量级引擎：相较于其他全功能引擎，SceneJS更加轻巧，更适合嵌入式3D内容展示。
- 灵活可扩展：利用节点系统的灵活性，开发者可以通过组合节点自定义复杂的3D场景和动画逻辑。

对比总结：

Three.js 和 Babylon.js 都是成熟的WebGL库，前者提供更低级别的API，后者则更多地像是一个完整的游戏引擎，两者都有广泛的用户基础和强大的功能。
Oasis Engine 在移动端有特定优势，特别适合需要考虑不同手机性能差异的游戏和应用开发。
XR-Frame 更聚焦于AR/VR领域，满足混合现实应用的需求。
Verge3D 则是在3D设计工具集成方面独具特色，通过可视化编程大大降低3D内容创作者进入Web开发领域的难度。
SceneJS 以其独特的JSON配置方式和轻量级特性，适用于构建相对简单的嵌入式3D视图或小型应用。

考虑项目生态社区活跃因素，这里挑选threejs、Babylon、OasisEngine做关键能力对比：

	RoyEngine	ThreeJS	Babylon	OasisEngine
基本包体积(参考）	4.88M	256k	1.4M	200k
BPR	常规	常规	常规	常规
光影	优秀	常规	优秀	优秀
粒子系统	需要功能扩展	需要功能扩展	较完整	较完整
动画	常规	常规	常规	常规
WebXR	需要功能扩展	弱	基本能用	弱
物理	需要功能扩展	Cannon.js、Oimo.js、Ammo.js	Cannon.js、Oimo.js、Ammo.js	physics-lite、physics-physx
LOD	优秀	弱	开箱即用	无
声音	需要功能扩展	常规	常规	常规
WebGPU	定制	弱	开箱即用	弱
Offscreen Canvas	需要功能扩展	需要功能扩展	开箱即用	需要功能扩展
烘焙	第三方工具链	弱	第三方工具链	第三方工具链
工具	需要功能扩展	弱	演示工具、调试工具	可视化在线编辑器
开发语言	typescript	ES5	typescript	typescript
其它	深入定制	酷X乐借壳魔改使用	WebGPU前沿

本地测试表现：

极限压测环境下royengine、threejs、OasisEngine帧率差异不大; babylon略低10%；

基本测试并没针对引擎做优化，且引擎针对特性场景的可塑性很高，固酌情参考；

常规场景，所有引擎均能良好支持；但优先考虑BabylonJS；

高度定制场景、极致性能要求，选Royengine