Open Sea — 实时 WebGPU 海洋

使用 Three.js TSL 渲染的实时 WebGPU 海洋：Gerstner 涌浪、FBM 微表面细节、光谱天空、海况和时段控制，以及免操作的漂流模式。此案例由 Kimi K3 生成。

Loading preview...

使用此提示词开始

一个独立的 WebGPU 海洋演示，配备环绕控制、海况和时段滑块，以及漂流模式。

使用 WebGPU 和 Three.js TSL 构建一个名为“Open Sea”的独立实时海洋演示。渲染带有 FBM 微表面法线的 Gerstner 波浪涌浪，以及随时段变化的光谱天空。支持拖拽环绕、滚动缩放镜头控制；提供含海况和时段滑块及实时 FPS 读数的 HUD 面板；并加入让镜头自主滑行的漂流模式。所有内容均置于一个无需构建步骤的静态页面中，在渲染器启动时展示优雅的初始化状态，并在 WebGPU 不可用时优雅降级。

改造成夜间风暴

将午后的平静海面换成月光下的风暴，加入更大的涌浪、雨丝和偶尔闪现的雷电。

体验建站智能体

使用 WebGPU 和 Three.js TSL 构建一个名为“Open Sea — Night Storm”的独立实时海洋演示。 渲染带有 FBM 微表面法线的 Gerstner 波浪涌浪，以及随时段变化的光谱天空。 支持拖拽环绕、滚动缩放镜头控制；提供含风暴强度和浪高滑块及实时 FPS 读数的 HUD 面板；并加入让镜头自主滑行的漂流模式。所有内容均置于一个无需构建步骤的静态页面中，在渲染器启动时展示优雅的初始化状态，并在 WebGPU 不可用时优雅降级。

加入可操控的帆船

在海浪上放置一艘小帆船，让观众能够用键盘操控它乘着涌浪航行。

体验建站智能体

使用 WebGPU 和 Three.js TSL 构建一个名为“Open Sea”的独立实时海洋演示。渲染带有 FBM 微表面法线的 Gerstner 波浪涌浪，以及随时段变化的光谱天空。 加入一艘低多边形帆船，通过简单的浮力漂浮在涌浪上；观众可使用 WASD 操控帆船，镜头既可跟随帆船，也可自由环绕。 支持拖拽环绕、滚动缩放镜头控制；提供含海况和时段滑块及实时 FPS 读数的 HUD 面板；并加入让镜头自主滑行的漂流模式。所有内容均置于一个无需构建步骤的静态页面中，在渲染器启动时展示优雅的初始化状态，并在 WebGPU 不可用时优雅降级。

提供 WebGL2 回退方案

启动时检测 WebGPU 支持情况，并提供更轻量的 WebGL2 版本，让演示可在所有现代浏览器中运行。

体验建站智能体

构建一个名为“Open Sea”的独立实时海洋演示，在启动时检测 WebGPU 支持情况；当 WebGPU 不可用时，回退至更轻量的 WebGL2 渲染器，并在两种路径中保持相同的场景和控制方式。 渲染带有 FBM 微表面法线的 Gerstner 波浪涌浪，以及随时段变化的光谱天空。支持拖拽环绕、滚动缩放镜头控制；提供含海况和时段滑块及实时 FPS 读数的 HUD 面板；并加入让镜头自主滑行的漂流模式。所有内容均置于一个无需构建步骤的静态页面中，在渲染器启动时展示优雅的初始化状态；移动端布局则将 HUD 收起为支持触控环绕的底部面板。