Open Sea — 即時 WebGPU 海洋
以 Three.js TSL 呈現的即時 WebGPU 海洋：Gerstner 湧浪、FBM 微表面細節、頻譜天空、海況與一天中時間控制，以及免操作的漂移模式。此案例由 Kimi K3 生成。
Loading preview...
149725 views
使用 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 時妥善降級。
建立一個名為「Open Sea」的自成一體即時海洋示範，在啟動時偵測 WebGPU 支援情況；無法使用 WebGPU 時，改用較輕量的 WebGL2 渲染器，且兩種路徑維持相同場景與控制方式。 呈現具備 FBM 微表面法線的 Gerstner 波浪湧浪，以及隨一天中時間變化的頻譜天空。支援拖曳環繞與滾動縮放相機控制，提供含海況與一天中時間滑桿、即時 FPS 顯示的 HUD 面板，以及讓相機自行滑行的漂移模式。所有內容皆置於單一靜態頁面，無需建置步驟；在渲染器啟動時顯示優雅的初始化狀態，並讓行動版版面將 HUD 收合為底部面板，支援觸控環繞。