【WebGL】GPUパーティクル、GPUトレイルの実装

WebGL Shader

f:id:ueshita:20200922164416p:plain

概要

8月に勢いで実装したWebGL2で動作するモノです。

デモ

リポジトリ

github.com

解説

TransformFeedbackは使用せず、複数のテクスチャをダブルバッファ的に使用してパーティクルの更新を行います。

テクスチャレイアウト

X Y Z W
Tex0(RW) Pos X Pos Y Pos Z Dir XYZ
Tex1(RW) Age Lifetime Seed Vel XYZ

1テクセルが1パーティクルに割り当てられます。

パーティクル

処理は以下の通りです。

  1. perticle-emit
  2. particle-update
  3. particle-render

emitは1ピクセルのポイントスプライトをgl.drawArrays(gl.POINTS, 0, this.newParticleCount);で描画して、指定のテクセルに書き込まれるようにします。

updateは四角形をgl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);してフラグメントシェーダで全パーティクルを更新

renderはgl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, this.maxParticleCount);で全パーティクルを描画(寿命が過ぎたパーティクルは縮退ポリゴンで消去)します。

トレイル(軌跡)

軌跡情報は2Dテクスチャ配列をリングバッファ的に使って保持します。 gl.copyTexSubImage3DでTex0をコピーして更新します。

処理は以下の通りです。

  1. perticle-emit
  2. particle-update
  3. (gl.copyTexSubImage3D)
  4. trail-render

2まではパーティクルと同じ処理です。

トレイルメッシュをgl.drawArraysInstancedでインスタンス描画しています。