返回项目

Web 开发 · AI 与机器学习

VRtor

在 VR 头显浏览器中直接打开的免费 3D 学习体验,从阿波罗 11 号到细胞内部,无需安装任何东西。

WebXR · Babylon.js · three.js · Cloudflare Workers · Durable Objects · WebRTC

VRtor 的四个场景:泰姬陵、马丘比丘的梯田、火星上的毅力号火星车,以及会议舞台上的一位演讲者。

案例研究

VRtor 是一组免费的 3D 课程,直接在 Quest 等 VR 头显的浏览器里运行。不用应用商店,不用安装,也不用注册账号。每个主题都有一个短地址(阿波罗 11 号是 vrtor.io/apo,细胞是 vrtor.io/cel),因为用手柄打字实在太痛苦。你可以坐进月球轨道上的哥伦比亚号,漫步马丘比丘,从放大 15 万倍的细胞里取出细胞器,或者亲手训练一个小型神经网络。在 3D 主题中,你还能看到其他访客,并通过空间语音和他们交谈。每个主题都是独立的 Babylon.js WebXR 应用,运行在各自的 Cloudflare Worker 上,全部从同一个源提供服务。

问题

大多数 VR 学习内容都藏在应用商店、账号和下载之后,老师或好奇的孩子得先跨过这些门槛才能开始。头显浏览器早就支持 WebXR,但沉重的 3D 场景必须稳住 Quest 的帧率,否则人会晕,而用手柄输入一个长网址就足以把人劝退。

方案

vrtor.io 是一个路由 Worker。每个主题都是 npm workspaces 单仓库中的独立应用,作为独立的 Worker 部署,路由通过 service binding 访问它,因此所有内容共享同一个源(只需一次 WebXR 授权,存储共享)。共享的 xr-shell 包为每个主题提供相同的针对 Quest 调优的会话设置、传送、舒适淡入淡出、帧率调节器和浮动信息卡。在线状态运行在每个房间一个的 Durable Object 上,通过 WebSockets 通信,语音则通过 WebRTC 点对点传输,并经由该房间进行信令。

关键决策

  • 三到四个字母的短代码(vrtor.io/mpc、vrtor.io/bdy),完整单词作为别名,因为戴着头显时你真正能打出来的就是这些。
  • 每个主题一个 Worker,通过 service binding 连接。一个主题出问题不会拖垮其他主题,每个主题都能单独部署。
  • 帧率调节器和舒适淡入淡出放在共享外壳里,这样每个新主题一开始在 Quest 上就很舒适,而不是逐个场景修补。
  • 每个房间最多 12 人,其余的人进入编号房间。头像开销很小(六次绘制调用,一个共享材质),并会随距离隐去。
  • 麦克风在你选择“说话”之前一直关闭,声音在 30 米外消失,静音某人只对你自己生效。
  • 只要有开放数据就使用开放数据,例如解剖学用 BodyParts3D,并在资源旁附上署名。

状态

已在 vrtor.io 上线,并且每周都在扩展。太空、阿波罗 11 号、莱特飞行器、虎鲸、跳伞、Cybertruck、Roadster、泰姬陵、马丘比丘、人体、AI 基础、细胞和 Sound Lab 已经开放,力学、数学和自然即将推出。

需要现代化改造系统、验证 AI 想法,或讨论高级职位?

我通常会在一个工作日内回复。