Open Sea，实时 WebGPU 海洋

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

正在加载预览…

从这个提示词开始

一个独立的 WebGPU 海洋演示，配有旋转视角控制、海况和一天中的时间滑块，以及漂流模式。

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

改成夜间风暴

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

体验建站智能体

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

添加可操控的帆船

在海浪上放置一艘小型帆船，观看者可以用键盘操控它随浪涌航行。

体验建站智能体

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

提供 WebGL2 回退方案

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

体验建站智能体

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