OASIS Engine 技术详解

1. 引擎简介

OASIS Engine 是由蚂蚁集团 RichLab 互动科技团队自研的一款 Web 3D 互动图形引擎。作为阿里巴巴经济体互动技术方向的首选引擎，它驱动了支付宝五福、蚂蚁庄园等知名国民级应用。引擎设计核心理念是“Web 为先，移动为先”，致力于构建一个易用、轻量且功能强大的互动创作平台。

2. 核心架构设计

OASIS Engine 采用了经典的组件系统架构，摒弃了传统的深层继承体系。在这种架构下，万物皆组件。一个 Entity（实体）仅仅是一个容器，它本身不具备功能，所有的功能（如渲染、物理、脚本）都通过挂载不同的 Component（组件）来实现。

2.1 脚本系统与生命周期

脚本是引擎中最常用的一种特殊组件，用于编写业务逻辑。OASIS 提供了丰富的生命周期回调函数，开发者只需重写对应函数即可响应引擎事件。

核心生命周期：

• onStart()：组件首次激活时调用。
• onUpdate()：每帧更新时调用。
• onLateUpdate()：每帧更新结束后调用。
• onPhysicsUpdate()：物理模拟更新前调用。
• onEnable() / onDisable()：组件启用或禁用时调用。

2.2 变换系统（Transform）

Transform 是引擎中使用频率最高的组件之一，负责描述实体的位置、旋转和缩放。为了优化父子节点联动的计算性能，OASIS 在 Transform 内部实现了原子化的脏标记机制。只有当属性被修改（set）时才标记为“脏”，当属性被访问（get）时才检查是否需要重新计算世界矩阵，从而避免了不必要的矩阵乘法运算。

3. 渲染系统与材质

OASIS Engine 的渲染管线设计兼顾了效果与性能，支持从简单 Unlit 渲染到复杂的 PBR 渲染。

3.1 PBR 渲染流

引擎对 PBR 工作流进行了深度优化，包含环境光漫反射、镜面反射预烘焙以及线性色彩空间渲染。

• 环境光： 支持纯色模式和球谐模式。球谐模式能够提供比单一颜色更细腻、更真实的环境光照效果。
• 反射： 使用预烘焙的立方体贴图，并将不同粗糙度的反射数据存储在不同的 Mipmap 层级中，实现性能与效果的平衡。
• 高级材质： 支持 Clear Coat（清漆层）、Sheen（光泽度）等高级材质属性，能够模拟车漆、布料等复杂表面效果。

3.2 材质 API 统一

为了降低学习成本，OASIS 对不同材质的 API 进行了高度统一。无论是 UnlitMaterial、BlinnPhongMaterial 还是 PBRMaterial，都共享以下核心属性：

• baseColor：基础颜色。
• baseTexture：基础纹理（在 BlinnPhong 中对应 diffuse，在 PBR 中对应 albedo）。
• tilingOffset：纹理平铺与偏移。

3.3 Mesh 系统

OASIS 重新设计了 Mesh 系统，将其抽象为两种数据源以适应不同场景：

• BufferMesh： 面向 GPU，数据以 Buffer 概念组织。适合对图形学原理熟悉的开发者，用于实现高性能的自定义几何体操控（如 Spine 动画底层实现）。
• ModelMesh： 面向模型，数据以顶点概念组织，对接行业标准（如 glTF）。设计目标是易用和简洁。

4. 多后端物理系统

Web 端的物理模拟一直是性能瓶颈。OASIS 创新性地设计了多后端物理架构，允许开发者根据场景需求在不同物理引擎后端之间无缝切换。

4.1 架构设计

物理系统的代码结构分为三层：

• @core/physics： 核心层，包含 PhysicsManager，负责管理物理组件的创建与销毁，提供射线检测等功能。
• @design/physics： 接口层，定义纯接口，桥接核心层与具体实现。
• @physics-xxx： 实现层，如 physics-physx 和 physics-lite。

4.2 物理后端

后端名称	技术实现	特点
Physics-PhysX	基于 NVIDIA PhysX 4.1，通过 Emscripten 编译为 WASM。	功能最强大，支持刚体、布料、车辆等复杂物理模拟。但 WASM 文件较大，加载较慢。
Physics-Lite	基于 JavaScript 的轻量级实现。	文件极小，加载快。仅支持触发器和射线检测，无物理反馈。适合仅需碰撞检测的简单场景。

开发者只需在引擎初始化时注入不同的物理后端实现，后续的业务代码无需修改。

5. 资源管理与性能

5.1 引用计数与 GC

Web 端没有类似 C++ 的析构函数，显存管理是个难题。OASIS 引擎实现了资源引用计数机制。当实体销毁时，与其关联的资源引用计数自动减一。开发者只需在适当时机调用 engine.resourceManager.gc()，引擎将自动清理所有引用计数为 0 的资源（纹理、材质等），有效防止显存泄漏。

5.2 性能优化策略

• 静态批处理： 自动将场景中静态物体的渲染合并，减少 Draw Call。
• GPU 实例化： 针对场景中大量相同的动态物体（如树木、草丛），使用 GPU Instancing 技术，一次绘制即可渲染多个物体。
• 输入系统优化： 统一了鼠标和触摸事件，抽象为 Pointer 概念。交互逻辑直接与物理组件（Collider）绑定，无需开发者编写复杂的射线检测代码。

6. 动画系统

OASIS 的动画系统（Animator）不仅支持基础的蒙皮动画，还引入了现代化的动画控制能力：

• 动画过渡： 动作切换时自动插值，避免生硬的闪切。
• 动画混合： 支持多动画混合，例如实现角色上半身开枪、下半身跑动的复合动作。
• 动画事件： 动画事件与脚本系统深度集成，开发者可以直接在脚本中定义动画帧触发的事件处理函数。
• BlendShape： 支持混合变形动画，常用于面部表情等精细动画表现。

7. 代码示例

以下代码展示了 OASIS Engine 的基本初始化流程及如何切换物理后端。

import { WebGLEngine } from "oasis-engine";
import { PhysXPhysics, LitePhysics } from "@oasis-engine/physics-physx"; // 引入物理后端

// 1. 初始化引擎
const engine = new WebGLEngine("canvas");

// 2. 配置物理后端 (示例：使用 PhysX 后端)
// PhysX 的 WASM 文件加载是异步的，必须在初始化引擎前完成
PhysXPhysics.initialize().then(() => {
    // 初始化物理管理器，指定使用 PhysX 后端
    engine.physicsManager.initialize(PhysXPhysics);
    
    // 3. 运行引擎
    engine.run();
    
    // 后续创建实体、添加组件等逻辑...
    const scene = engine.sceneManager.activeScene;
    const rootEntity = scene.createRootEntity("root");
    
    // 创建一个实体并添加静态碰撞器
    const boxEntity = rootEntity.createChild("Box");
    // 添加物理组件逻辑...
});
    

---

8. 未来展望

OASIS Engine 持续演进，未来的规划包括：

• 编辑器开放： 提供可视化的编辑器，实现极简的工作流，连接程序员、设计师与策划。
• WebXR 支持： 深度集成 XR 能力，布局 VR/AR 业务形态。
• Shader 框架： 抽象着色器编写框架，支持多 Pass 和交叉编译，降低 Shader 编写门槛。
• 更极致的性能： 探索 WebGPU 标准，利用现代图形 API 获得更高的渲染性能。

© OASIS Engine Technical Deep Dive