手把手拆解:如何使用GPT-6 Astra 打造一款大型太空探索网页游戏

以 Void Explorer 为主案例,具体拆解如何先定义玩法与视觉,再搭建可观测测试、多尺度坐标、流式地形、性能基准和 Blender 资产管线。

如果目标只是让 AI 生成一个能运行的小型游戏原型,问题还相对简单;一旦目标扩大为一款能从星际空间连续飞到行星地表的大型浏览器游戏,美术方向、尺度表示、地形流式加载、操控、渲染、测试和性能就必须协同工作。

OpenAI 官方以 Void Explorer 为案例,展示了如何在 Codex 中使用 GPT-6 Astra 推进这套工程流程。最终成品拥有 2,048 个星系、超过 10,000 颗程序化行星,玩家可以选择可见恒星并飞往那里,也能从太空连续下降到海岸和地表。

难点不在于生成某一段代码,而在于怎样确定体验边界、让 Astra 看见并复现问题、用同一套测试比较修改前后的结果,再逐步扩大游戏规模。沿着这条制作顺序,下面的每个工程选择都能落回一个具体问题和检查方法。

Void Explorer 的 gameplay supercut

这套工作方法先设立明确约束,让 Astra 提出工程实现,再由人持续判断外观与操控手感,同时建立可复现的测试与调试闭环。


体验先行:用自然语言确立物理与视觉边界

这个项目没有从技术栈清单开始,而是先向 Astra 明确玩家应该获得的体验和不可改变的物理边界,再让这些约束反向影响工程架构。

在构建 Void Explorer 之初,最初的需求描述直接框定了整个宇宙的物理法则:

核心提示词(设计原则): “所有我能看到的东西都必须是可抵达的。保持真实的宇宙距离,然后通过尺度与航行速度来化解枯燥。我想直接从太空飞进行星的大气层并平稳降落到地面。行星可以像地球一样巨大,因此我们需要程序化地形和分块渲染器。”

这段描述给系统设定了三个明确边界:

  1. 远处的恒星不能只是背景上的光点,而要成为可选择、可飞往的目标。
  2. 接近行星时,它不能突然变成一个独立关卡;从太空到地面必须连续。
  3. 真实宇宙距离需要 pulse travel 与 hyperdrive 让旅程可行,而地球尺度的行星需要程序化地形和分块渲染。

视觉方向也在正式搭建大量游戏内容前用图像反复校准。第一批概念图太写实,下一版又太简单,于是继续用更具体的要求修正:

核心提示词(视觉校准): “现在这个版本太简单了。我们需要一个折中方案:更好的颜色、霓虹光感,以及深空的高对比度。请展示出飞船高速航行时的模样,周围带有恒星和尘埃。”

AI 生成的概念图,确立了象牙白飞船、多面体青色行星与洋红星环的视觉基调
AI 生成的概念图:最终确立了象牙白机体、青色天体与高饱和度深空照明的调色板

满意的图像被保存下来,成为轨道飞行、高速航行、大气进入和着陆的视觉参考。有了这些具体目标,后续版本是否接近预期就更容易判断。


架构演进:Three.js、WebGPU 与后台多线程解耦

前端技术选型采用了 TypeScript 与 Vite 构建工具,核心渲染层基于 Three.js。Three.js 赋予了代码对底层网格(Mesh)、材质(Material)、光照以及自定义程序化几何体的直接控制权,这正是 Void Explorer 绝大多数视觉表现的核心载体。

首个可玩渲染器使用 WebGL2。项目随后继续追问 Three.js 是否限制了视觉表现,Astra 建议保留宇宙、导航和地形系统,只把渲染层迁移到 Three.js 的 WebGPU 架构。

关键技术与分工:

  • 节点材质与 TSL:Three.js 的节点材质和 Three.js Shading Language 让大气、水体和光照效果可以用代码定义。
  • Web Workers:地形生成在负责输入与绘制的线程之外准备几何数据,避免把所有计算都挤在同一条执行线上。
  • Vitest 与 Playwright:Vitest 检查可重复生成、坐标数学和地形契约;Playwright 则在浏览器里操作游戏,验证完整交互。