9.0
重磅
AI SCORE
模型发布2026-09-06 09:30
GPT-6 Astra 发布：编程/安全专用旗舰模型
dev.to · AI#OpenAI#GPT-6#大模型
Editor brief · 编辑速览
OpenAI 发布 GPT-6 Astra，定位计算机使用、编程、网络安全和多步骤专业工作；128K 上下文，128K 输出，代码审查任务比 Claude Opus 5 强 22%。
当你的应用需要交互式星球、可工作的 3D 界面、科学内容和电影化叙事时，用 AI 构建应用会是怎样的体验？
这正是我一直在探索的课题——Loupe，一个借助 Claude 和 Codex 构建的交互式数字博物馆。
这个应用整合了关于太空、恐龙、人类进化、解剖学、喷气发动机以及阿波罗 11 号月球着陆的展览。
每个展览都呈现了不同的工程挑战。行星探测器需要相机控制和协调的观察模式。任务叙事需要滚动进度条。发动机展览需要让不可见的过程变得可理解。
本文将解释这些体验是如何运作的、应用是如何架构的，以及 AI 编程助手在整个开发过程中是如何发挥作用的。
Loupe 的主页将访客与不同主题和交互模式的展览连接起来。
起点是一个问题：
一个网站能否让探索科学主题的感觉像使用仪器一样？
访客应该能够选择一个对象、调查一个特征、改变视角，并理解发生了什么。
在 Loupe 中，这表现为多种形式：
这塑造了一个重要的产品决策：交互方式应该适配主题。
博物馆需要一个统一的身份，但一颗行星和一次月球着陆不应该看起来像是换了素材的同一页面。
核心技术栈对许多 React 开发者来说都很熟悉：
Next.js 和 TypeScript，用于路由、应用结构和类型化契约。
React，用于界面和组件组合。
Three.js 和 React Three Fiber，用于浏览器端 3D。
Drei，用于模型加载、轨道控制和场景工具。
GSAP，用于动画工具。
Zustand，用于共享展览状态。
Vitest 和 Playwright，用于自动化验证。
有趣的部分是这些组件如何划分职责。
界面处理选择：选择一个世界、打开一个面板、或切换模式。
渲染器处理持续变化：相机移动、对象旋转和粒子动画。
保持这些职责清晰有助于性能和可维护性。
一个交互式展览很快就会变得比包含一个模型的组件复杂得多。
它有内容、控件、视觉模式、来源信息、加载行为和状态转换。
对于 Atlas of Worlds，仓库将这些关注点分离为三个大致层次：
content/space/
atlas.ts
atlas-assets.ts
atlas-asset-licenses.json
lib/space/
atlas-schema.ts
atlas-store.ts
atlas-scale.ts
world-focus.ts
components/space/
AtlasExperience.tsx
AtlasStage.tsx
AtlasCanvas.tsx
AtlasFallback.tsx
Content 描述世界、资产、特征和解释。
Logic 处理计算、状态转换、比较策略和焦点行为。
Components 将这些决策转化为可见的体验。
从应用角度看，这意味着修改解释不需要编辑相机代码。
从开发角度看，这给人类和编程助手都提供了更小、更清晰的问题来解决。
地球仪、控件、特征选择和字段指南响应同一个展览状态。
Atlas 结合了程序化几何体、表面纹理、材质和选定的模型资产。
对于一个大致球形的世界，球体提供了基本形状。大部分可见细节来自纹理及其处理。
额外的模式引入了不同的层或表示。
这使得视觉质量与资产复杂度的关系比"多边形越多看起来越好"更有趣。
一个令人信服的结果还取决于：
正确的纹理映射。
适当的照明。
表面材质设置。
对象在视口中的比例。
渲染器限制了设备像素比，从而限制了高密度显示器的渲染成本。
这个选择很重要，因为画布需要对每个渲染的像素进行着色。分辨率上微小的视觉变化可能导致 GPU 工作负载的大幅变化。
目标是将在渲染工作上花费的精力集中在访客能够感知的地方。
当有人选择一个新行星时，应用需要更新的不仅仅是地球仪。
选择可以影响：
可用的观察模式。
比较世界。
Atlas 通过 Zustand store 协调这些变化。
例如，切换世界会将观察模式重置为新世界的默认值，清除选定的热点，并发出相机重置命令。
这可以防止不一致的状态，例如在渲染一个行星的同时显示另一个行星的特征。
相机命令还带有一个序列号。这允许重复操作——比如连续按两次重置——保持为不同的命令。
这些细节在初始原型中很容易被忽略。一旦人们开始自由探索，它们就变得重要了。
连续动画不应该每帧都要求 React 状态更新。
项目使用引用和 React Three Fiber 的 useFrame 直接更新场景对象。
一个简化的例子：
const mesh = useRef<THREE.Mesh>(null);
useFrame((_, delta) => {
if (!motionEnabled || !mesh.current) return;
mesh.current.rotation.y += delta * rotationSpeed;
});
在这里，React 控制是否启用运动。渲染循环更新旋转角度。
使用 delta 使运动依赖于已流逝的时间，这有助于在不同的帧率下保持预期的速度一致。
相机过渡遵循类似的模式。界面选择目的地，渲染器向其插值。
发动机展览在访客开始使用轨道控制时也会停止自动相机移动。
这是一个小实现细节，但有直接的产品后果：相机尊重访客的输入。
选择一个流量站，将发动机上的物理位置与其解释和运行值连接起来。
发动机展览将加载的 GLB 模型与程序化可视化相结合。
其气流粒子具有相位、角度、半径和速度等属性。着色器使用这些属性、时间和发动机参数来计算它们的位置和颜色。
这避免了在 React 中发送数千个单独的粒子位置更新。
实现还根据画布宽度调整粒子数量。例如，旁通流在更宽的布局中使用比更窄布局更多的粒子。
访客仍然看到流动关系，而渲染器在较小的显示器上执行较少的工作。
这里也有内容责任：可视化是一个解释模型。它的外观不应该暗示它是实时遥测或计算流体动力学模拟。
工程视觉和解释其局限性都是构建这个功能的一部分。
Thirteen Minutes 在访客进入下降叙事之前介绍任务。
对于阿波罗 11 号，核心交互是事件序列的推进。
架构分离了：
解释滚动位置。
识别活动叙事部分。
解析场景状态。
更新任务界面。
一个小工具确定视口中心包含哪个部分：
export function centeredBeatIndex(
bounds: ReadonlyArray<{ top: number; bottom: number }>,
viewportHeight: number,
) {
const center = viewportHeight / 2;
const index = bounds.findIndex(
({ top, bottom }) => top <= center && bottom > center,
);
return index >= 0 ? index : null;
}
因为它接收测量值并返回一个索引，这个函数可以在不挂载 3D 场景的情况下进行测试。
这种分离也有助于调试。错误的相机视图可能源于滚动解释、场景推进或相机插值。这些是不同的问题，即使访客将它们体验为"动画感觉不对"。
第一个可工作的模型是一个里程碑。使其在应用中良好运行需要更多迭代。
在开发过程中，恐龙展览暴露了问题，包括缺失的骨骼、不正确的模型呈现，以及切换标本时的延迟。
一种特别引人注意的行为是交互式模型出现前显示的静止图像。
快速显示某些东西可能有用，但过渡也可能让体验感觉像是加载了两次。
这教会我通过完整的交互来评估性能：
从点击标本到能够检查它之间发生了什么？
下载时间很重要。解码、GPU 准备、相机构图和视觉交接也同样重要。
预加载可以提供帮助，但 upfront 加载所有内容会带来带宽和内存成本。它需要有选择地应用。
我也不声称在没有跨代表性设备测量的情况下获得 Lighthouse 分数或通用帧率。应用的行为才是重要的证据。
Claude 和 Codex 最强的好处是它们能够帮助处理仓库中跨文件的关联问题。
渲染 bug 可能涉及多个文件：加载器、场景组件、状态存储和回退边界。
AI 可以帮助检查这个路径，提出实现方案，进行协调更改，并支持验证。
当 prompts 描述可观察行为和约束时，它们会更有用。
选择一个功能应该将其带入视图，同时保留手动轨道控制。检查坐标转换和焦点行为，解释当前失败的原因，并实现一个有针对性的修复。
这给了 AI 一个具体的追求结果。
开发循环变为：
定义访客应该体验到什么。
给 AI 相关的上下文。
实现一个有界限的更改。
检查应用。
报告具体失败。
人类的贡献仍然是实质性的：选择体验、判断结果、检查科学表述，以及决定什么值得进一步工作。
Loupe 在仓库中保持展览标准。
它们问的问题诸如：
访客应该理解什么？
每个控件都有有意义的行为吗？
来源和重建限制可见吗？
移动端会发生什么？
当资产失败时会发生什么？
这使得期望在开发会话之间可用。
项目还包括状态、计算、内容和浏览器交互的测试。但自动化检查只是验证的一部分。
测试可以确认焦点计算返回预期的方向。视觉检查仍然需要确认选定的特征在屏幕上是可以理解的。
无障碍和回退同样如此。Atlas 检查 WebGL 可用性并包含错误边界。阿波罗体验考虑了减少动作、减少数据和视口接近度。
这些行为帮助应用在非理想桌面场景下保持可用。
构建 Loupe 让我更愿意尝试跨多个技术学科的项目。
Claude 和 Codex 帮助提供探索这些想法所需的实现能力：组件、状态、图形、资产集成、调试和测试。
应用通过这种能力和深思熟虑的产品决策的结合而改进。
什么应该是交互式的？什么需要解释？运动在哪里有帮助？哪些细节值得其性能成本？
这些决策与代码一样塑造了结果。
如果你探索了这个应用，我特别希望收到关于模型加载、相机控制以及展览在你的设备上表现如何的反馈。
AI 编程工具让你愿意构建什么应用？
建议的 DEV 标签：ai, webdev, react, showdev
发布说明：将四张截图上传到 DEV 并用上传的图片 URL 替换本地路径。