渲染引擎 / Cross-Platform Runtime Line

让 Web 3D 引擎跑在
所有终端上

渲染引擎线是六条渲染运行时的统称:ThreeX、BabylonX、GalaceanX、PlayCanvasX、WebGPUX、VergeX。它们各自对接一条上游引擎,彼此独立、互不依赖,输出到小程序、原生 App、桌面与 XR。

点击 chip 可跳转到下方模块矩阵的对应行并展开七个字段。

S2 / Architecture

三层结构,一条横穿的宿主适配带

下图描述单条运行时内部的层次;六条运行时各自独立实现,彼此之间无调用关系、无共享组件、无共同资产。画布、文件系统、输入事件、音频、网络、计时器这六项,是移植真正的工作量所在。

RENDER ENGINE / INTERNAL LAYERS 箭头方向:上游引擎 → 兼容层 SDK → 运行时核心 → 渲染后端 → 终端平台
上游引擎→ 兼容层 SDK→ 运行时核心→ 渲染后端→ 终端平台
兼容层 SDKUPPER / API
与原引擎一致的 API业务侧几乎不改按上游引擎各自实现
运行时核心MIDDLE / RUNTIME
渲染图调度资源管理场景更新事件派发生命周期
渲染后端LOWER / BACKEND
WebGLWebGPU平台原生图形接口 · 可切换
宿主适配 · 横向穿过三层HOST ADAPTATION / THE REAL WORK
画布
文件系统
输入事件
音频
网络
计时器
三层使用同一蓝色系的深浅区分;宿主适配带为强调色,六项能力在图上显性列出。 终端平台:小程序 / 原生 App / 桌面 / XR
S3 / Six Modules

六个模块,同一套七字段

逐行展开,字段固定为:上游 / 定位 / 关键能力 / 接入方式 / 适用场景 / 与上游差异 / 状态。不增不减,不做成卡片墙。六条运行时彼此独立,行与行之间没有依赖。

上游three.js
定位three.js 的跨平台运行时,覆盖最全的一条
关键能力场景、材质、光照、后处理沿用原实现;渲染后端可切;宿主生命周期接管
接入方式把 WebGLRenderer 换成渲染引擎入口,注册宿主画布与输入
适用场景已有 three.js 项目的多端发布,尤其是要保留原美术管线与 shader 的工程
与上游差异DOM 相关能力(CSS3DRenderer、DOM 叠加层)需换成宿主等价实现
状态可用
上游Babylon.js
定位工程可视化与数字孪生场景的运行时
关键能力场景图、动画系统、PBR 材质完整保留,粒子与后处理沿用原管线
接入方式以兼容 Engine 实例创建场景,Node 与 Input 层由宿主适配
适用场景工业场景、数字孪生、交互演示
与上游差异GUI 与 Inspector 属浏览器侧调试工具,不进入终端
状态可用
上游Galacean
定位内容型团队的多端投放
关键能力兼容 Galacean 资产与动画图
接入方式保留工程结构,接入宿主适配层与资源加载器
适用场景营销互动、品牌短片、电商 3D 展示
与上游差异依赖平台专属资源的加载策略需改走 OneKit 资源通道
状态可用
上游PlayCanvas
定位轻量首发,包体敏感场景
关键能力轻运行时移植,快速上线
接入方式导出工程或直连项目,由渲染引擎接管应用循环与资源管线
适用场景小程序首发、小型 3D 互动
与上游差异云端编辑器的实时预览不在终端运行,构建后走离线资源包
状态可用
上游WebGPU 规范
定位独立产品,与其余 X 并列,不是它们的附属层
关键能力统一 WebGPU 接口、命令缓冲、资源管理;可单独接入,也可作为其他 X 的后端
接入方式作为独立包引入,对接设备原生图形接口
适用场景突破 WebGL 上限的重负载——大场景、复杂材质、计算着色器
与上游差异目标设备需具备 WebGPU 或等价原生后端,老设备回落 WebGL
状态可用
上游Verge3D
定位内测,Blender 到终端的链路
关键能力继承 Verge3D 导出工程,替换运行时侧
接入方式继承 Verge3D 导出工程,运行时侧由渲染引擎接管
适用场景以 Blender 为主力工具的产品展示与工业交互
与上游差异以内测版本能力为准
状态内测
S4 / Engineering Mechanisms

六项工程机制

区别于上游引擎的六项工程能力,每条运行时各自实现。

单条运行时 INDEPENDENT 01 后端可切换 02 生命周期 03 资源管线 04 事件系统 05 包体内存 06 可观测性
01

渲染后端可切换

WebGL / WebGPU / 原生接口,同一场景不换业务代码。

解决什么问题:终端只提供原生图形接口时仍能出帧,不必为每个平台重写渲染路径。
02

宿主生命周期接管

引擎循环跟随宿主前后台切换,不再依赖请求动画帧。

解决什么问题:切后台后场景停摆、回来时间跳变的问题。
03

资源管线

纹理与模型的异步加载、压缩格式、缓存与显式释放。

解决什么问题:没有浏览器缓存与图片解码器时,加载阻塞首帧、内存只涨不落的问题。
04

事件系统

触摸、指针、手势、键盘统一为引擎输入。

解决什么问题:各终端输入模型不一致,业务代码里散落大量平台判断的问题。
05

包体与内存

按平台裁剪,小程序走分包加载。

解决什么问题:小程序主包体积限制下,运行时一次性打满包体的问题。
06

可观测性

脱离浏览器调试工具的日志与性能采样通道。

解决什么问题:真机没有 DevTools 时问题无法定位、性能回归看不见的问题。
S5 / Platform Matrix

平台支持矩阵

横轴为终端平台,纵轴为六个模块。

模块 小程序 原生 AppiOS、Android 桌面Win、macOS、Linux XR
ThreeX可用可用可用可用
BabylonX可用可用可用可用
GalaceanX可用可用可用可用
PlayCanvasX可用可用可用可用
WebGPUX可用可用可用可用
VergeX内测内测内测内测
可用内测
S6 / Integration

兼容 SDK 接入三步

三步是真实序列,按 01 / 02 / 03 执行。下方为接入前后的代码对比。

01

引入兼容层 SDK

按所用上游引擎选择对应的运行时包,业务侧保持原有的场景、材质与动画写法。

02

替换渲染入口并注册宿主

把浏览器侧 Renderer 换成运行时渲染入口,注册宿主画布与输入,渲染循环交由宿主生命周期接管。

03

按目标终端接入资源与后端

配置资源加载通道与渲染后端,按平台裁剪包体,完成多端构建与出帧验证。

before · three.js浏览器侧
import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(width, height);

function loop() {
  requestAnimationFrame(loop);
  renderer.render(scene, camera);
}
loop();
// 依赖 DOM 画布与浏览器 rAF
after · 渲染引擎兼容层
import { createRenderer } from '@onekit/render';

const renderer = createRenderer({
  canvas: host.canvas,      // 注册宿主画布
  input:  host.input,       // 注册宿主输入
  backend: 'webgl',        // 后端可切
});

renderer.mount(scene, camera);
// 渲染循环由宿主生命周期接管
S7 / Next Step

开始评估

迁移评估与示例工程索取,两个入口均可联系未来之门。

迁移评估

提供现有工程的上游引擎、技术栈与目标终端,我们按项目给出接入路径与工作量判断。

联系未来之门

索取示例工程

获取可运行的接入示例,用于验证宿主画布、输入与资源通道在目标终端上的行为。

联系未来之门