A-Frame: パーティクルコンポーネント調査

CGで何かをつくると、見た目をそれらしくする為にエフェクトが求められます。
簡単にエフェクトをつけるにあたって、まずパーティクルを使う事になるかと思うので、A-Frameで利用できるパーティクルコンポーネントにどのようなものがあるか調査しました。

調査対象は、npmで `aframe particle` をキーワードとして検索して表示された10パッケージとしました。
npmでの人気順に紹介します。

### [aframe-particle-system-component](https://www.npmjs.com/package/aframe-particle-system-component)
A-Frameの公式チュートリアルでも利用されているコンポーネントです。
星や埃、雨の画像をパーティクルとして表示してくれます。
![image](https://cloud.githubusercontent.com/assets/674727/24214966/6d43ef14-0ef4-11e7-973f-c561b81d175f.gif)
demo
[Stars](https://ideaspacevr.github.io/aframe-particle-system-component/examples/stars/), [Dust](https://ideaspacevr.github.io/aframe-particle-system-component/examples/dust/), [Rain](https://ideaspacevr.github.io/aframe-particle-system-component/examples/rain/), [Snow](https://ideaspacevr.github.io/aframe-particle-system-component/examples/snow/), [Colors](https://ideaspacevr.github.io/aframe-particle-system-component/examples/colors/)

### [aframe-star-system-component](https://www.npmjs.com/package/aframe-star-system-component)
宇宙空間のような星空が作成できます。
Last publishが2 years agoですが、A-Frameの1.0.3でも動作するようでした。
![image](https://raw.githubusercontent.com/matthewbryancurtis/aframe-star-system-component/HEAD/screenshot.png)
[demo - 現在本家のデモは動いていないようです](https://matthewbryancurtis.github.io/aframe-star-system-component/)
[私の方でA-Frame 1.0.3で動作確認した結果はこちら](https://qiita.com/matsukatsu/items/5cba657b4b3304f63fce)

### [aframe-particleplayer-component](https://www.npmjs.com/package/aframe-particleplayer-component)
Blenderで作成したパーティクルを、A-Frameで実行できるようです。
![image](https://raw.githubusercontent.com/supermedium/aframe-particleplayer-component/HEAD/examples/magic/magic.gif)

### [aframe-particle-simulation](https://www.npmjs.com/package/aframe-particle-simulation)
なんともいえない感じのパーティクルができるようです。
![particle-simulation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/18492b88-a25b-ec6a-82a7-e3a713ecee24.gif)
demo(カメラを下に向けると見れます)
[Cylinder](https://famous-club.glitch.me/), [VR Mixed Reality](https://panoramic-candle.glitch.me/), [Multi User](https://field-spring.glitch.me/)

### [aframe-sprite-particles-component](https://www.npmjs.com/package/aframe-sprite-particles-component)
色々できるらしいのですが、デモが動作していないので後ほど詳しく調べてみます。
![image](https://github.com/harlyq/aframe-sprite-particles-component/blob/master/assets/screenshot.jpg?raw=true)
[demo](https://harlyq.github.io/aframe-sprite-particles-component/)

### [kks-magic](https://www.npmjs.com/package/kks-magic)
デモで花火が動作しています。
お手軽に実現できて、けっこうすごそうです。
![image](https://zhyuzh3d.github.io/kksMagic/showReels/kksMagic_sn&fw_170226b.gif)
[demo](https://zhyuzh3d.github.io/kksMagic/)

### [aframe-dust-component](https://www.npmjs.com/package/aframe-dust-component)
空間に粒子を配置するようです。
`aframe-star-system-component` と似たコンポーネントのようですが、指定できるパラメータはこちらの方が少ないようです。
![image](https://raw.githubusercontent.com/DougReeder/aframe-dust-component/HEAD/sample.png)
[demo](https://dougreeder.github.io/aframe-dust-component/example.html)

### [aframe-spe-particles-component](https://www.npmjs.com/package/aframe-spe-particles-component)
`aframe-sprite-particles-component` と同じ方が作成されたコンポーネントのようです。
デモのコードで使われているA-Frameのバージョンや、最後のコミットからこちらの方が古いもののようです。
ただ、こちらは動くデモが見られます。
これが使えるとすごく良さそうだと思いました。
![image](https://raw.githubusercontent.com/harlyq/aframe-spe-particles-component/HEAD/assets/screenshot.jpg)
[demo](https://harlyq.github.io/aframe-spe-particles-component/)

### [aframe-mesh-particles-component](https://www.npmjs.com/package/aframe-mesh-particles-component)
これまでのパーティクルは画像だったのですが、こちらはメッシュを使ったパーティクルです。
メッシュを使っているからか、デモが少し重い気がします。
`aframe-sprite-particles-component` や `aframe-spe-particles-component` と同じ方が作成されています。
![image](https://raw.githubusercontent.com/harlyq/aframe-mesh-particles-component/HEAD/assets/screenshot.jpg)
[demo](https://harlyq.github.io/aframe-mesh-particles-component/)

### [aframe-particle-system-component-fog-fix](https://www.npmjs.com/package/aframe-particle-system-component-fog-fix)
`aframe-particle-system-component` と指しているリポジトリは同じです。

## まとめ
この辺りが使いやすそうで、使い勝手も良さそうなので、使ってみます。

- aframe-particle-system-component
- aframe-star-system-component
- aframe-sprite-particles-component
- kks-magic

将来的にはこの辺りも使えると表現の幅が増えるかもしれません。

- aframe-particleplayer-component
- aframe-particle-simulation
- aframe-mesh-particles-component

これらは多分古かったり、機能が足りてなさそうなので見送ります。

- aframe-dust-component
- aframe-spe-particles-component
- aframe-particle-system-component-fog-fix