GPU Particle 2

PC環境でのChromeまたはFirefoxで動作確認済です。
スマホ環境だと動くかどうか怪しいです。

canvasに対応していません。

■粒子の密度 (密度を下げると処理が軽くなります)
低い 高い

■粒子の色




■粒子に働く力の強さ
 抵抗力
 反発力
 重力

■カメラの回転速度


■背景の表示


■デバッグ用(計算用フレームバッファの可視化)

説明

旧GPUパーティクルデモは2D空間での実装でしたが、今回は3D空間へ拡張して、スクリーン空間の深度情報で当たり判定をとるようにしました。

マウスを押している間はパーティクルが画面上部に集結しようとします。

実装について

基本的な考え方は、計算用フレームバッファ(レンダーテクスチャ)の各ドットにパーティクルの位置情報を割り当てるというものです。

旧デモは2D空間の実装だったので、1ドットの各要素RGBAに(RG..パーティクルの座標 , BA..パーティクルの速度)という情報を割り当てていましたが、今回これを3D拡張しようとすると要素数が足りません。

考えられるアイデアは
1. 複数のドットに1パーティクルの情報を割り当てる …… パーティクル数が減る。
2. マルチレンダーターゲットで複数のフレームバッファに情報を割り当てる …… ちょっと大がかり。
3. 速度情報を持たない。代わりに計算で参照するフレームバッファを前回と前々回の2枚分にして、座標の差分を速度とする …… 書き込み用、参照用(前回)、参照用(前々回)のトリプルバッファになる。
今回は3の方法をとりました。結構うまくいきます。

当たり判定について。
事前にヒットをとるオブジェクトを専用のフレームバッファに書き出しておきます(深度バッファ)
この時、書き込む要素はそれぞれ(RGB..ワールド空間での法線情報, A..線形な深度情報)です。
パーティクル座標を計算する際に、パーティクルの深度が深度バッファの深度よりも深ければ、深度バッファの法線情報方向へ速度加算してやります。
当然、隠蔽された箇所の深度情報は持てないので、この部分に関しては怪しい挙動をとりますが、エフェクト的な使い方であればそれっぽくみえてカッコいいのでありかと思います。

一般的に3D空間でのGPUパーティクルはどのように実装するものなのか調べていないので、もっと素敵な実装アイデアがあるのかもしれません。

トップページへ戻る


Tweet Follow @yunta_robo