FIELD — 1つのバッファの4つの状態
1つのバッファが、草原、潮流、燃えさし、格子へと次々に変化する。262,144本のストランドを、WebGPUのコンピュートパスがフレームごとに再計算する。
Loading preview...
1033 views
このプロンプトから始める
1つのバッファが、草原、潮の満ち引き、残り火、格子へと次々に姿を変えます。262,144本のストランドを、WebGPUのコンピュートパスが毎フレーム再計算します。
Websites Agentを試すFIELDという、1つのバッファの4つの状態を表現するWebGPUプロシージャルシーンページを作成します。ページ全体は1つの固定バッファで動作し、風に揺れる草原、満ち引きする潮、消えかけた残り火、規則的な格子という4つのシーンが順にこのバッファを再利用します。262,144本の草の葉、または後半のシーンにおける同数の粒子を、コンピュートパスが毎フレームすべて書き換えるため、画面上にテクスチャもモデルもありません。すべてのストランドを計算で生成します。訪問者が下へスクロールすると、4つの状態が滑らかに移り変わり、その下では同じバッファが再利用され続けます。各状態には、効果の仕組みを説明する短い実装メモとリアルタイムのフレームレート表示をページ上に付けます。ブラウザがWebGPUに対応していない場合は、シーンの代わりに自然なフォールバックメッセージを表示し、何も描画されない理由を訪問者に伝えます。単一ファイルの静的ページです。
パラメータスライダーを追加
草、潮、残り火、格子にはそれぞれ密度、風速、色を調整するライブスライダーがあり、スライダーをドラッグするとシーンがすぐに変化します。実装メモとフレームレート表示はそのまま残ります。
Websites Agentを試すFIELDという、1つのバッファの4つの状態を表現するWebGPUプロシージャルシーンページを作成します。ページ全体は1つの固定バッファで動作し、風に揺れる草原、満ち引きする潮、消えかけた残り火、規則的な格子という4つのシーンが順にこのバッファを再利用します。262,144本の草の葉、または後半のシーンにおける同数の粒子を、コンピュートパスが毎フレームすべて書き換えるため、画面上にテクスチャもモデルもありません。すべてのストランドを計算で生成します。訪問者が下へスクロールすると、4つの状態が滑らかに移り変わり、その下では同じバッファが再利用され続けます。 各状態には、効果の仕組みを説明する短い実装メモとリアルタイムのフレームレート表示をページ上に付けます。ブラウザがWebGPUに対応していない場合は、シーンの代わりに自然なフォールバックメッセージを表示し、何も描画されない理由を訪問者に伝えます。単一ファイルの静的ページです。
FIELDという、1つのバッファの4つの状態を表現するWebGPUプロシージャルシーンページを作成します。ページ全体は1つの固定バッファで動作し、風に揺れる草原、満ち引きする潮、消えかけた残り火、そして規則的な格子。262,144本の草の葉、または後半のシーンにおける同数の粒子を、コンピュートパスが毎フレームすべて書き換えるため、画面上にテクスチャもモデルもありません。すべてのストランドを計算で生成します。訪問者が下へスクロールすると、4つの状態が滑らかに移り変わり、その下では同じバッファが再利用され続けます。各状態には、効果の仕組みを説明する短い実装メモとリアルタイムのフレームレート表示をページ上に付けます。ブラウザがWebGPUに対応していない場合は、シーンの代わりに自然なフォールバックメッセージを表示し、何も描画されない理由を訪問者に伝えます。単一ファイルの静的ページです。
FIELDという、1つのバッファの4つの状態を表現するWebGPUプロシージャルシーンページを作成します。ページ全体は1つの固定バッファで動作し、風に揺れる草原、満ち引きする潮、消えかけた残り火、規則的な格子という4つのシーンが順にこのバッファを再利用します。262,144本の草の葉、または後半のシーンにおける同数の粒子を、コンピュートパスが毎フレームすべて書き換えるため、画面上にテクスチャもモデルもありません。すべてのストランドを計算で生成します。訪問者が下へスクロールすると、4つの状態が滑らかに移り変わります その下では同じバッファが再利用され続けます。各状態には、効果の仕組みを説明する短い実装メモとリアルタイムのフレームレート表示をページ上に付けます。ブラウザがWebGPUに対応していない場合は、シーンの代わりに自然なフォールバックメッセージを表示し、何も描画されない理由を訪問者に伝えます。単一ファイルの静的ページです。
