VOIDRUNNER / ENGINEERING THE EXPERIENCE

Voidrunner
保留速度感,认真处理每一帧。

在原作的悬浮赛车与立体赛道上,针对模型载入、渲染开销和中断恢复进行工程改造。与七名对手竞速三圈,也可以打开技术观察面板,查看当前设备上的实际运行状态。

Three.jsLOD / 静态合批像素预算渲染生命周期

基于原作工程改造 · 保留原游戏来源与署名 · 本站直接运行 · 默认流畅画质

Voidrunner 本站性能改造版实际画面,悬浮赛车、立体赛道与中文交互界面
游戏实际运行画面。本页只展示静态封面,进入游戏后才加载游戏内容。
FIRST LAP / 第一圈就能上手

先稳住方向,
出弯再冲刺。

选择飞船后开始比赛,按住 W 或 ↑ 才会向前加速。先用默认流畅画质熟悉路线,再根据设备表现切换精细画质;顶部随时可查看操作说明。

  1. 移动与过弯W / ↑ 加速,S / ↓ 刹车,A D / ← → 转向;Q / E 分别使用左、右气刹。
  2. 冲刺与武器Shift 冲刺,空格使用武器。观察能量与当前武器,出弯稳定后再使用冲刺。
  3. 暂停与手机触屏Esc 或暂停按钮暂停。手机使用屏幕加速、转向与动作按钮;建议横屏,操作时视野更宽。
CONTROLS / 操作速查

四组操作,快速进入比赛。

先按住加速,再逐步增加转向和气刹。

01 / DRIVE

W / ↑ 加速

S / ↓ 刹车;A D / ← → 转向。持续按住加速键,逐步熟悉悬浮赛车的转弯节奏。

02 / AIRBRAKE

Q 左气刹 · E 右气刹

转弯时配合对应方向的气刹调整车身。提前观察下一段赛道,减少撞墙损失。

03 / BOOST & WEAPON

Shift 冲刺 · 空格 武器

有可用能量时进行短时冲刺;拾取武器后择机释放。直道和出弯后的稳定路段更适合提速。

04 / PAUSE & INSPECT

Esc 暂停

暂停后可以继续比赛或重新开始。机库提供飞船观察入口;技术观察面板用于查看这台设备的实际运行数据。

WHAT CHANGED / 可在代码中核对

改造落在资源、绘制和恢复过程。

保留原作内容,具体修改浏览器的运行方式。

01 / LOD & RESOURCE LOADING

先载入轻量飞船,精细模型按需读取

默认使用原项目提供的 LOD 飞船。切换精细画质时再载入完整模型,让初次体验和进一步观察使用不同的资源预算。

02 / STATIC BATCHING

按材质和空间合并静态场景

对静态不透明赛道几何分组并合批,减少重复绘制提交,同时保留空间剔除能力。飞船、动态拾取物和透明效果继续使用各自的绘制方式。

03 / PIXEL BUDGET

根据画质限制渲染像素

流畅模式将渲染限制在 921,600 像素以内、像素比不超过 1;精细模式预算为 1,600,000 像素。持续掉帧时先降低分辨率,再调整帧率目标,控制高分辨率屏幕的绘制开销。

04 / PAUSE & CONTEXT RECOVERY

离开时停绘,中断时给出恢复路径

暂停与切到后台时停止持续绘制,并处理输入及音频状态。遇到 WebGL 上下文丢失,显示明确的恢复提示与重新加载入口;上下文恢复后重新载入游戏,再进入新的一局。

OBSERVE THE RUNTIME / 看真实运行状态

把优化做成可以观察的变化。

进入游戏,打开技术观察面板,查看实际渲染尺寸、最近一帧绘制调用、三角形数和累计绘制帧数。面板分别显示目标帧率与计时采样帧率,便于比较画质切换前后的运行状态。

面板读取当前游戏的运行数据;数值只代表这台设备、这一时刻。模型、光影与系统负载都会影响结果,设备较弱时优先使用流畅模式。首页与介绍页只展示静态封面,点击后才加载游戏。

TRY THE CHANGE

先体验,再观察

用流畅画质开始一圈。
查看技术观察面板。
切换精细画质,比较资源与画面变化。

进入游戏与技术观察 ↗
SOURCE & ENGINEERING WORK

原作来源与本站承担的工作

原项目来自 alesha-pro / bench-portal ↗ 中的 Voidrunner。保留原作飞船、赛道与竞速战斗玩法,原始演示 ↗可供对照。

本站工程改造实现本站资源部署、中文交互、模型分层加载、静态合批、像素预算、暂停与后台停绘、上下文中断后的重新加载提示和技术观察面板。此案例按基于原作改造展示。

来源与范围原游戏与素材归原作者及相应权利人。查看来源和依赖说明 →,或阅读两款作品的实现分工。实际性能以当前设备体验为准。

开始游玩 ↗← 返回全部作品演示