FIELD

262,144 根草葉不是貼圖:草場、潮汐、餘燼、晶格四種場景共用一段緩衝區,每幀由計算通道完整重寫,捲動時平滑過渡並標示即時幀率,依照提示詞即可重現同款。

Loading preview...
從這段提示詞開始

同一段緩衝區依序化為草場、潮汐、餘燼與晶格:262,144 根草葉,每一幀皆由 WebGPU 重新計算。

加入參數滑桿

為草場、潮汐、餘燼、晶格四種狀態各加入密度、風速、顏色滑桿,拖曳時即時反映在畫面中,保留實作重點與幀率標示。

試用 Kimi 建置應用程式
製作一個 WebGPU 程序化場景頁面:一段固定緩衝區依序由四種場景重複使用——隨風搖曳的草場、漲落的潮汐、將熄的餘燼、規則的晶格,262,144 根草葉(或等效粒子)每一幀皆由計算通道完整重寫,零貼圖、零模型;向下捲動時,四種狀態平滑過渡,頁面標示各狀態的實作重點與即時幀率,不支援 WebGPU 時,顯示優雅降級提示。單一檔案靜態頁面。
加入第五種狀態

在四種狀態後加入靜靜飄落的雪原作為第五種狀態,向下捲動時與前四種狀態一樣平滑過渡。

試用 Kimi 建置應用程式
製作一個 WebGPU 程序化場景頁面:一段固定緩衝區依序由四種場景重複使用——隨風搖曳的草場、漲落的潮汐、將熄的餘燼、規則的晶格,262,144 根草葉(或等效粒子)每一幀皆由計算通道完整重寫,零貼圖、零模型;向下捲動時,四種狀態平滑過渡,頁面標示各狀態的實作重點與即時幀率;不支援 WebGPU 時,顯示優雅降級提示。單一檔案靜態頁面。
加入環視模式

除了捲動過渡外,加入滑鼠拖曳環繞視角,可從不同角度觀察同一片由 WebGPU 逐幀重新計算的狀態場。

試用 Kimi 建置應用程式
製作一個 WebGPU 程序化場景頁面:一段固定緩衝區依序由四種場景重複使用——隨風搖曳的草場、漲落的潮汐、將熄的餘燼、規則的晶格,262,144 根草葉(或等效粒子)每一幀皆由計算通道完整重寫,零貼圖、零模型;向下捲動時,四種狀態平滑過渡,頁面標示各狀態的實作重點與即時幀率;不支援 WebGPU 時,顯示優雅降級提示。單一檔案靜態頁面。