Skip to main content

自研 Web 3D 引擎架构思路

在 Web 3D 或图形学相关的高级面试中，面试官可能会问：“面对复杂的 3D 业务（如数字孪生、元宇宙大屏、3D 展厅），你会如何设计 Web 3D 的架构体系？”

真实业务场景通常分为两条路线：基于 Three.js / Babylon.js 进行上层业务引擎扩展，以及为了极致性能或特定需求完全基于原生 WebGL/WebGPU 从零自研底层引擎。

路线一：基于 Three.js 等开源库扩展 (主流工业实践)​

Three.js 只是一个 3D 渲染库，而非游戏引擎。它缺乏完整的物理、事件、资源和生命周期管理。因此，架构师需要在此基础上封装一套业务级 3D 引擎框架。

1. 架构设计要点​

  • 生命周期与系统调度 (System Loop)： 接管 Three.js 裸露的 requestAnimationFrame。设计统一的 App 或 Engine 类，提供类似 Unity 的 Awake, Start, Update, Destroy 生命周期钩子，统一调度渲染、动画、物理等子系统。
  • 资源中心化管理 (Asset Manager)： 封装统一的资源加载器（Loader），支持队列控制、并发限制和加载进度（Progress）。更重要的是，建立资源对象池（Object Pool）和 LRU 缓存淘汰机制，防止频繁加载导致内存溢出。
  • 业务逻辑解耦 (ECS 模式引入)： 虽然 Three.js 是典型的面向对象（OOP）层级，但我们在外层可以引入 ECS（实体组件系统）的思想。创建一个虚拟的 Entity 关联到 Three.js 的 Object3D，然后将“巡逻逻辑”、“发光逻辑”封装成独立的 Component 挂载上去，实现逻辑复用。
  • 交互与事件层 (Interaction Layer)： 将 Three.js 的 Raycaster（射线检测）进行高阶封装，支持事件冒泡和捕获机制。对外暴露类似 DOM 的 onClick, onHover, onDrag 事件，让前端开发 3D 交互像写 DOM 一样简单。

路线二：从零自研 WebGL 引擎 (考察硬核深度)​

如果业务极度追求极致的轻量化（如小程序内核）、或者需要定制特殊的渲染管线，面试官会深入考察从底层（WebGL）自研引擎的架构能力。

自研 3D 引擎比 2D Canvas 引擎复杂得多，它不仅涉及场景管理，还深谙 GPU 渲染管线、着色器（Shader）编译、资源调度以及 3D 数学。

以下是构建底层 Web 3D 引擎的核心架构设计思路：

1. 核心架构分层 (Architecture Layers)​

1.1 基础数学与核心数据结构 (Math & Core)​

3D 引擎的基石是线性代数，它决定了所有的空间变换与运算效率。

  • 数学库：必须提供高性能的 Vector2/3/4（向量）、Matrix3/4（矩阵，特别是 4x4 仿射变换矩阵）和 Quaternion（四元数，用于解决欧拉角旋转带来的万向节死锁问题）。通常基于 Float32Array 实现，以便与 WebGL 显存数据直接交互。
  • 包围盒：AABB（轴对齐包围盒）、OBB（定向包围盒）和 BoundingSphere（包围球），用于视锥体剔除和碰撞检测。
  • 射线检测 (Raycaster)：用于实现鼠标在 3D 空间中的拾取（点击检测）。

1.2 场景图模型 (Scene Graph)​

与 2D 引擎类似，3D 场景也需要一棵树来管理所有的节点（Object3D）。

  • 空间继承：每个节点都有局部的 position, rotation, scale。子节点的最终世界坐标（World Matrix）必须由其局部矩阵乘以父节点的世界矩阵得到（树的深度优先遍历更新）。
  • 组件化架构 (ECS - Entity Component System)：现代 3D 引擎（如 Unity, PlayCanvas）常抛弃纯粹的面向对象继承，采用 ECS 架构。实体（Entity）只是一个 ID，组件（Component，如 Mesh, Light, Collider）附加在实体上，系统（System）负责统一处理同类组件的数据。这种数据驱动模式对 CPU 缓存极为友好。

1.3 渲染抽象层 (Render API Abstraction)​

直接调用 WebGL API 非常繁琐且容易出错。引擎需要封装一层 RHI (Render Hardware Interface)，甚至为未来接入 WebGPU 预留接口。

  • Geometry (几何体)：封装顶点数据（顶点坐标、法线、UV、顶点颜色等），对应 WebGL 的 VBO 和 VAO。
  • Material & Shader (材质与着色器)：封装 Vertex Shader 和 Fragment Shader，以及传入 Shader 的全局变量（Uniforms）。
  • Texture (纹理)：封装图片的加载、采样过滤模式（gl.texParameteri）及 Mipmap 生成。
  • Mesh (网格)：一个 Mesh = Geometry + Material，它是可渲染的基本单元。

1.4 渲染管线与调度 (Render Pipeline)​

这是 3D 引擎的心脏，决定了画面的最终呈现方式和性能。

  • 前向渲染 (Forward Rendering)：最经典的渲染方式。遍历场景中所有的物体，为每个物体计算所有的光照。缺点是多光源场景下性能会急剧下降。
  • 延迟渲染 (Deferred Rendering)：高级引擎标配。第一遍将几何信息（法线、深度、颜色）渲染到多重渲染目标（G-Buffer）上，第二遍再根据这些信息统一计算光照。极大提升多光源性能。
  • 渲染队列排序：不能简单地按层级遍历绘制。必须进行排序：
    1. 不透明物体（Opaque）：通常从前往后画（Front-to-Back），利用 Early-Z 剔除被遮挡的片元。
    2. 透明物体（Transparent）：必须严格从后往前画（Back-to-Front），并通过 Alpha 混合公式进行颜色叠加。
  • 视锥体剔除 (Frustum Culling)：在送入 GPU 前，计算物体的包围盒是否在相机的视锥体（Frustum）外部，在外部的直接丢弃，不发起 drawCall。

1.5 资源管理器 (Resource Manager / Loader)​

3D 资产（模型、贴图）通常体积庞大。

  • 异步加载机制：统一的 Loader 接口，支持并发加载与进度回调。
  • 解析器：解析业界标准的格式，特别是 glTF / GLB（目前 Web 3D 领域的绝对主流），以及 OBJ, FBX 等。
  • 资源缓存与释放：GPU 显存极其宝贵。需要实现引用计数机制，当一个纹理或模型不再使用时，必须显式调用 gl.deleteTexture 或 gl.deleteBuffer 清理显存。

2. 进阶引擎特性设计 (Advanced Features)​

要打造一个生产级的引擎，还需要具备以下高级能力：

  1. 后处理特效 (Post-Processing)： 利用 Framebuffer Object (FBO) 将整个场景先渲染到一张纹理上，然后再用一个全屏的矩形去渲染这张纹理，并在 Fragment Shader 中实现 Bloom（泛光）、SSAO（屏幕空间环境光遮蔽）、DOF（景深）、抗锯齿（FXAA/SMAA）。
  2. 光照与阴影 (Lighting & Shadows)：
    • 支持 PBR（基于物理的渲染）材质，这是现代 3D 表现真实感的标配。
    • 阴影映射（Shadow Mapping）：通过在光源位置生成深度图，然后在摄像机渲染时对比深度来判断片元是否在阴影中。
  3. 骨骼动画 (Skeletal Animation)： 实现蒙皮网格渲染，通过在顶点着色器中计算骨骼矩阵权重，让角色动起来。
  4. 实例化渲染 (Instanced Rendering)： 当场景中有成千上万个相同模型（如森林里的树、草地）时，利用 WebGL 的 ANGLE_instanced_arrays 扩展，通过一次 Draw Call 将它们全部画出，这是解决 CPU 提交瓶颈的终极武器。

3. 总结：面试沟通话术建议​

在面试中回答“如何架构一个 Web 3D 引擎”时，建议采用以下结构化表达：

“设计一个 Web 3D 引擎，我会从数据流与渲染流两个维度来构建。

首先是底层数据与场景图：我会实现一套基于 Float32Array 的高性能数学矩阵库，并采用 ECS (实体组件系统) 或树状结构来管理场景图，实现父子节点的矩阵级联更新。

其次是渲染抽象层 (RHI)：我会将繁琐的 WebGL API 封装为更高阶的 Geometry、Material 和 Texture 对象，隔离底层硬件调用的复杂性，甚至为 WebGPU 预留后路。

最核心的是渲染管线 (Render Pipeline)：在每一帧中，我会先通过摄像机执行视锥体剔除减少冗余渲染；然后对渲染队列进行排序（不透明物体从前向后优化 Early-Z，透明物体从后向前处理混合）；并引入 PBR 材质系统和后处理 (FBO) 管线以保障视觉质量。

最后，考虑到 Web 端性能，引擎必须内置资源管理器以控制显存的分配与释放，并全面支持 glTF 模型解析与实例化渲染 (Instancing) 优化，解决海量对象的 Draw Call 瓶颈。”