A-Frame: aframe-particle-system-componentの調査

前回A-Frameで利用できるパーティクルコンポーネントを[調査](https://qiita.com/matsukatsu/items/adec590eddad5510c196)したところ、もっとも利用されていそうなコンポーネントが[aframe-particle-system-component](https://www.npmjs.com/package/aframe-particle-system-component)だとわかりました。
パーティクルを使いこなせるようになる為、コンポーネントの各プロパティがどのような意味を持つのか、詳しく見ていこうと思います。

同じシーン内に、同じプロパティを持つパーティクルを並べ、テキストで表示したプロパティのみ値を変化させた場合に、どのような違いがでるか比較してみます。

### preset
![preset.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/7da8f8a4-6b65-4e63-a322-26ae44a29522.gif)
プリセット構成。可能な値は、デフォルト、ほこり、雪、雨です。
type: string
default: default
oneOf: default, dust, snow, rain
[demo](https://k38.github.io/aframe/particle-system/preset.html)

### maxAge
![maxAge.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/ef458707-1c1f-4321-4b04-1be939ffaf91.gif)
パーティクルの最大経過時間（秒単位）。
type: number
default: 6
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/maxAge.html)

### type
![type.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/6b4eb325-dad7-2d70-4d21-41bf91bfce9e.gif)
このエミッターがパーティクルのスポーン位置とフォース動作を制御するために使用するデフォルトの分布。可能な値は、1（ボックス）、2（球）、3（ディスク）です。
type: number
default: 1 (box)
oneOf: 1, 2, 3
[demo](https://k38.github.io/aframe/particle-system/type.html)

*パーティクルが存在する範囲が変化するようですが、どれを設定してもボックスになっているように感じます*

### positionSpread
![positionSpread.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/cf7f970c-6c11-9d7e-cced-6cd8c5a6ce6c.gif)
パーティクルごとにこのエミッタの位置の変動を記述します。
type: vec3
default: 0 0 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/positionSpread.html)

### rotationAxis
![rotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/487dd985-93d4-540a-fabe-01a7dedb0c15.gif)
このエミッタの回転軸について説明します。可能な値はx、y、およびzです。
type: string
default: x
oneOf: x, y, z
[demo](https://k38.github.io/aframe/particle-system/rotation.html)

### rotationAngle
![rotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/487dd985-93d4-540a-fabe-01a7dedb0c15.gif)
ラジアンで指定された回転角度。ダストプリセットは3.14です。
type: number
default: 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/rotation.html)

### rotationAngleSpread
![rotationAngleSpread.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/abb95dfc-66a2-d0c1-f338-1a17da98ce53.gif)
ラジアンで指定された、粒子ごとの回転角の分散量。
type: number
default: 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/rotationAngleSpread.html)

### accelerationValue
![accelerationValue.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/f283853b-e0a7-f42e-a771-60f8127d9b67.gif)
このエミッタのベースアクセラレーションについて説明します。
type: vec3
default: 0, -10, 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/accelerationValue.html)

### accelerationSpread
![accelerationSpread.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/2ff0bfc9-01cd-ac09-d91f-d792e201dc49.gif)
このエミッターの加速分散をパーティクル単位で説明します。
type: vec3
default: 10 0 10
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/accelerationSpread.html)

### velocityValue
![velocityValue.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/88b995c3-aca6-9007-f47b-e3180913dcc6.gif)
このエミッタのベース速度を説明します。
type: vec3
default: 0 25 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/velocityValue.html)

### velocitySpread
![velocitySpread.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/da163905-c6f3-6521-ba7d-b9d7fb9874e4.gif)
このエミッターの加速分散をパーティクル単位で説明します。
type: vec3
default: 10 7.5 10
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/velocitySpread.html)

### dragValue
![dragValue.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0162a39a-7051-ea52-a302-910e9658c880.gif)
すべてのパーティクルに適用されるドラッグを説明する0〜1の数値。
type: number
default: 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/dragValue.html)

*ドラッグとは何のことか、このコンポーネントの説明では良くわからなかったので、調べてみました。*
*このコンポーネントが利用している[ShaderParticleEngine](https://squarefeet.github.io/ShaderParticleEngine/docs/api/global.html#GroupOptions)の説明によると、`このパーティクルのドラッグを説明するオブジェクト。 ドラッグは、速度と加速度の両方の値に適用されます。`という事でした。まだ良くわからないですが、どうやら速度と加速度に影響するパラメータのようです。*
*[3DS MAX](https://knowledge.autodesk.com/ja/support/3ds-max/learn-explore/caas/CloudHelp/cloudhelp/2016/JPN/3DSMax/files/GUID-BE4B4519-E11C-42C6-A58E-25BCCFC1FFB7-htm.html)のドラッグの説明によると、パーティクルを減衰させるパラメータのようです。おそらく、火山の噴煙が上空で滞留するような表現で利用できそうです。*
*ただし、設定しても変化がないように見えます。*

### dragSpread
![dragSpread.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/71ecb695-c3ac-da65-2b9c-e832edec9f74.gif)
パーティクルごとにドラッグの分散を説明する数値。
type: number
default: 0
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/dragSpread.html)

*設定しても変化がないように見えます。*

### dragRandomise
![dragRandomise.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/8497c17d-866c-4700-946e-115ca2e7a849.gif)
ドラッグを再ランダム化する必要があるかどうかにかかわらず、パーティクルが再スポーンされるとき。パフォーマンスが低下する可能性があります。
type: boolean
default: FALSE
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/dragRandomise.html)

*設定しても変化がないように見えます。*

### color
![color.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/47747f70-e871-d561-d812-623b3aeedbe2.gif)
粒子の色を記述します。このプロパティは「value-over-lifetime」プロパティです。つまり、パーティクルのライフタイムにわたる特定の値の変化を記述するために値の配列を指定できます。
type: array
default: #0000FF,#FF0000
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/color.html)

### size
![size.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0ad91f58-27ee-a425-818a-8ceeaa348366.gif)
粒子のサイズを記述します。
type: number
default: 1
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/size.html)

### direction
![direction.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/5332184f-8645-832d-b1b6-4814c47b8fef.gif)
エミッタの方向。値が1の場合、エミッターはパーティクルのライフサイクルの開始時に開始されます。値が-1の場合、エミッターはパーティクルのライフサイクルの終わりから開始し、逆方向に機能します。
type: number
default: 1
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/direction.html)

*設定しても変化がないように見えます。*

### duration
![duration.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/3267c0d0-9edd-877f-ef3a-468b17b9185a.gif)
このエミッターが生きるべき秒数。指定しない場合、エミッタはパーティクルを無期限に放出します。
type: number
default: null
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/duration.html)

### enabled
![enabled.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/2806e5fd-b088-5490-4f0c-d4b4dc8561ab.gif)
trueの場合、エミッターはパーティクルを放出し、falseの場合、放出しません。この値は、シーン中に動的に変更できます。パーティクルの放出中は、falseに設定するとすぐに消えます。
type: boolean
default: TRUE
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/enabled.html)

### particleCount
![particleCount.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/6f78f59b-0abd-cd68-bdab-dc251f586627.gif)
このエミッタが保持するパーティクルの総数。注：これは、1秒間に放出されるパーティクルの数などではありません。 1秒あたりに放出されるパーティクルの数はparticleCount / maxAgeによって計算されます（おおよそ！）
type: number
default: 1000
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/particleCount.html)

### texture
![texture.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/59d61dbc-7c45-067a-d276-402c0df24294.gif)
このエミッターが使用するテクスチャ。
type: asset
default: ./images/star2.png
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/texture_blending.html)

*gif, jpg, png, svgが利用できるようです*

### randomise
![randomise.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/555c1bdd-480f-b315-fcd8-1c29890fbe9b.gif)
パーティクルが再スポーンされるとき、その位置を再ランダム化する必要があるかどうか。パフォーマンスが低下する可能性があります。
type: boolean
default: FALSE
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/randomise.html)

*falseの方は3回目の描画以降、パーティクルの位置が固定されます。デフォルトがfalseなので、毎回同じパーティクルが描画され、はじめは戸惑いました。*

### opacity
![opacity.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/63dfffe7-c256-1110-da8b-75206b0aa663.gif)
粒子の不透明度を表す単一の数字。
type: array
default: 1
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/opacity.html)

### blending
![texture.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/59d61dbc-7c45-067a-d276-402c0df24294.gif)
パーティクルのブレンドモード。可能な値は、0（ブレンドなし）、1（通常）、2（加算）、3（減算）、4（乗算）です。
type: number
default: 2
oneOf: 0, 1, 2, 3, 4
[demo](https://k38.github.io/aframe/particle-system/texture_blending.html)

*アルファチャンネルを持つgifやpngでも、blendingが0や4だと透過されていないように見えます。*

### maxParticleCount
![maxParticleCount.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/6fda0b2e-b805-85b9-83fe-954beb9ad6be.gif)
type: number
default: 250000
oneOf: -
[demo](https://k38.github.io/aframe/particle-system/maxParticleCount.html)

## まとめ
各プロパティを確認してみました。
一部機能していなさそうなものもありましたが、これでも十分な場合も多いように思います。
3Dモデルと組み合わせたり、アニメーションさせたりする事で、さらなる没入感を加える事ができるのではないでしょうか。

機能していなさそうなプロパティ
- type
- drag(dragValue, dragSpread, dragRandomise)
- direction

## 参考
- [Japan Flag, toshio](https://www.motionelements.com/ja/stock-image-10012460-japan-flag)
- [方位磁石アイコン, TopeconHeroes !](https://icooon-mono.com/10976-%e6%96%b9%e4%bd%8d%e7%a3%81%e7%9f%b3%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/)