让 Web 3D 引擎跑在
所有终端上
渲染引擎线是六条渲染运行时的统称:ThreeX、BabylonX、GalaceanX、PlayCanvasX、WebGPUX、VergeX。它们各自对接一条上游引擎,彼此独立、互不依赖,输出到小程序、原生 App、桌面与 XR。
点击 chip 可跳转到下方模块矩阵的对应行并展开七个字段。
三层结构,一条横穿的宿主适配带
下图描述单条运行时内部的层次;六条运行时各自独立实现,彼此之间无调用关系、无共享组件、无共同资产。画布、文件系统、输入事件、音频、网络、计时器这六项,是移植真正的工作量所在。
六个模块,同一套七字段
逐行展开,字段固定为:上游 / 定位 / 关键能力 / 接入方式 / 适用场景 / 与上游差异 / 状态。不增不减,不做成卡片墙。六条运行时彼此独立,行与行之间没有依赖。
六项工程机制
区别于上游引擎的六项工程能力,每条运行时各自实现。
渲染后端可切换
WebGL / WebGPU / 原生接口,同一场景不换业务代码。
宿主生命周期接管
引擎循环跟随宿主前后台切换,不再依赖请求动画帧。
资源管线
纹理与模型的异步加载、压缩格式、缓存与显式释放。
事件系统
触摸、指针、手势、键盘统一为引擎输入。
包体与内存
按平台裁剪,小程序走分包加载。
可观测性
脱离浏览器调试工具的日志与性能采样通道。
平台支持矩阵
横轴为终端平台,纵轴为六个模块。
| 模块 | 小程序 | 原生 AppiOS、Android | 桌面Win、macOS、Linux | XR |
|---|---|---|---|---|
| ThreeX | 可用 | 可用 | 可用 | 可用 |
| BabylonX | 可用 | 可用 | 可用 | 可用 |
| GalaceanX | 可用 | 可用 | 可用 | 可用 |
| PlayCanvasX | 可用 | 可用 | 可用 | 可用 |
| WebGPUX | 可用 | 可用 | 可用 | 可用 |
| VergeX | 内测 | 内测 | 内测 | 内测 |
兼容 SDK 接入三步
三步是真实序列,按 01 / 02 / 03 执行。下方为接入前后的代码对比。
引入兼容层 SDK
按所用上游引擎选择对应的运行时包,业务侧保持原有的场景、材质与动画写法。
替换渲染入口并注册宿主
把浏览器侧 Renderer 换成运行时渲染入口,注册宿主画布与输入,渲染循环交由宿主生命周期接管。
按目标终端接入资源与后端
配置资源加载通道与渲染后端,按平台裁剪包体,完成多端构建与出帧验证。
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
import { createRenderer } from '@onekit/render';
const renderer = createRenderer({
canvas: host.canvas, // 注册宿主画布
input: host.input, // 注册宿主输入
backend: 'webgl', // 后端可切
});
renderer.mount(scene, camera);
// 渲染循环由宿主生命周期接管
开始评估
迁移评估与示例工程索取,两个入口均可联系未来之门。
迁移评估
提供现有工程的上游引擎、技术栈与目标终端,我们按项目给出接入路径与工作量判断。
联系未来之门索取示例工程
获取可运行的接入示例,用于验证宿主画布、输入与资源通道在目标终端上的行为。
联系未来之门