61KB HTML实现WebGPU实时海洋：Claude Code单提示词生成

一个 61 KB 的 HTML 文件，能在浏览器里渲染出带日落效果的实时海洋——FFT 波浪模拟、白浪花、物理天空和太阳闪光一应俱全。这不是某个游戏引擎的演示，而是开发者 Noniv 用 Claude Code（Opus 5.5）在约 30 分钟内从零构建的 WebGPU 场景。

核心亮点：单文件、零依赖、纯 WebGPU

据 Reddit 原帖描述，这个项目最令人惊讶的地方不在于画面本身，而在于它的体积与实现方式。整个场景被压缩进一个 61 KB 的 HTML 文件，没有引擎、没有第三方库，渲染器完全从零手写。

Noniv 给 Claude Code 的提示词只有一句话：用 WebGPU 做出你能做的最真实的水面场景，并配一个可自由漂浮的摄像机。随后模型自主完成了渲染管线、着色器与波浪物理的搭建。

从技术组成看，这个场景至少包含四层系统：基于 FFT 的波浪频谱模拟、白浪花的破碎效果、带有云层的物理天空模型，以及太阳在海面上的镜面闪光。这几项通常需要图形工程师逐一手动调参，而在这里被一次性纳入同一份提示词的产物中。

WebGPU 是 W3C 主导的新一代 Web 图形与计算 API，可视为 WebGL 的继任者。它直接映射 Vulkan、Metal、D3D12 等现代底层图形接口，向 JavaScript 暴露显式的渲染管线、计算着色器、绑定组等概念，因而能更充分地压榨 GPU 性能，也支持通用计算任务。代价是 API 更贴近硬件、抽象层级更低，写一个最小三角形所需的样板代码远多于 WebGL。正因如此，图形社区长期认为它上手门槛高、生态不成熟。该场景能在浏览器里跑到数百帧，正是借助了 WebGPU 的低开销与计算着色器能力。

基于 FFT 的海洋波浪模拟源自 Tessendorf 的经典方法：先在频域用统计模型（如 Phillips 或 JONSWAP 频谱）生成海浪的能量分布，加入随时间演化的相位，再通过快速傅里叶变换把频谱转换成空间域的高度场。相比直接叠加大量正弦波，FFT 能用 O(N log N) 的代价生成细节丰富、统计特性符合真实海面的波形，并且天然支持在 GPU 上用计算着色器每帧更新。白浪花通常依据波浪陡度或高度阈值生成，物理天空则多采用 Preetham 或 Hosek-Wilkie 等解析大气散射模型，太阳闪光则来自海面法线与视线之间的镜面高光项。

自我评审：子代理交叉打分的工作流

更值得关注的是 Noniv 采用的验证方式。Claude Code 会自行截取渲染输出的画面，再把截图交给独立的子代理（subagent）进行批判性评估，而不是让写代码的同一个实例给自己的作品打分。

这种自评与他评分离的机制，恰好绕开了 AI 编程中常见的“自我确认偏差”——模型倾向于认为自己写的代码是对的。让另一个代理以截图为准做评审，等于引入了一个视觉层面的验收环节。

按帖子说法，从提示词到最终成品大约耗时 30 分钟。这个时间成本，放在传统图形开发流程里，可能还不够完成一版波浪参数的手动调试。

**子代理（subagent）**指由主代理派生、拥有独立上下文窗口的从属智能体。Claude Code 这类工具可让主代理把一项任务（如此处的画面评审）委派给子代理，子代理不会继承主代理的全部推理过程，只根据收到的输入（这里是一张渲染截图）独立给出结论。这种隔离带来两个好处：一是避免主代理“看过自己写的代码”而先入为主，二是评审任务与生成任务使用不同的上下文，等于形成类似“写代码的人”和“验收的人”分离的流程。在缺乏单元测试的渲染类项目中，这种基于视觉产物的评审是一种务实的替代方案。

硬件门槛与运行条件

WebGPU 的普及度决定了这个项目并非人人可跑。开发者明确提示，体验需要支持 WebGPU 的 GPU，并且建议使用 Chrome。

在笔记本上，还需要手动强制 Chrome 使用独立显卡，否则可能出现性能不佳甚至完全无法运行的情况。作为性能参照，Noniv 在 RTX 5070 Ti 上以 2560×1440 分辨率跑出了约 260 FPS。

交互方式相对简单：点击画布后可环顾四周，WASD 控制移动，按 H 呼出设置面板。该场景可免费在线体验，仓库同时提供了未压缩、结构更清晰的版本供参考。

强制 Chrome 使用独立显卡是笔记本上常见的排查手段。多数双显卡笔记本默认让集成显卡驱动浏览器，以节省功耗，集成显卡虽可能支持 WebGPU，但算力远不足以驱动实时海洋这类重负载场景。在 Windows 上，可通过“设置 → 系统 → 显示 → 图形”将 Chrome 指定为高性能模式，或在 NVIDIA 控制面板的“管理 3D 设置”里为 chrome.exe 选择独显；macOS 则通常无需干预，系统会按负载自动切换。若仍无法运行，可在 chrome://gpu 页面查看 WebGPU 的实际启用状态。

对 AI 编程能力的一次侧写

这个案例的价值，在于它把“AI 能否写图形代码”这个问题具体化了。图形渲染历来是对数学、硬件特性和工程细节都极其敏感的领域，WebGPU 更是相对年轻、文档与生态都不算成熟的 API。

在单个提示词下产出可运行、且性能达到高帧率的完整场景，说明模型在跨领域知识整合上具备一定深度。不过也要看到，这类结果高度依赖开发者的验收判断——Noniv 设计了截图评审流程，本身就是对模型输出不完全信任的体现。

对想复现的读者来说，真正的门槛可能不是提示词技巧，而是能否识别渲染结果中的问题，并搭建起让模型自我验证的闭环。

项目仓库：github.com/Noniv/web-ocean；在线体验：ocean-noniv.vercel.app