概要

SparkARを使用して、人の前後にパーティクルを表示させるフィルタを作成しました！

この記事では、

人の前にパーティクルを表示する方法
人の後ろにパーティクルを表示する方法
画像の比率を変更する方法

を紹介しています！

事前準備

まずは、人の前後に表示させる素材を用意します。

PNG
JPEG
SVG

SparkARStudioでは、上記３種類の画像形式のみ対応しているようです。
今回はこちらの画像を使用して作成しようと思います。

人の前にパーティクルを表示させる

Particle Systemを追加する
まずはパーティクルを表示させる元となるParticle Systemを追加します
- Scene内の右下にある＋ボタンを押下する
- SearchからParticle Systemを検索し、Insertする
Particle Systemの名前を変更する
他のエフェクトなどと見分けがつくように、名前を変更しておきます
- 追加したParticle Systemを右クリックしてRenameを押下する
- わかりやすい任意の名前に変更する(私は「Image」という名前に変更しました)
Particle Systemに表示したい画像を貼り付ける
- ParticleSystemの詳細からMaterialsの＋ボタンを押す
- Assets内に追加されたmaterialをクリックする
- materialの詳細にあるTextureのChoose Fileから表示したい画像を選択する
完成！
- あとは自分の好きなようにパーティクルの出方や見え方を調整してみてください！
  
  ※画像の比率が気になる人はこちらを参考にしてください

人の後ろにパーティクルを表示させる

次に、背景と人物を分離する方法を紹介します

まず、人の前にパーティクルを表示させる手順と同じく、人の手前にパーティクルを表示させます
レイヤーを2つ追加
パーティクルを人の後ろに表示させるために、レイヤー分けをします
- Layers内の右下にある＋ボタンを押下する
- 「layer0」と「layer1」がある状態にしておく
レイヤーの名前を変更する
レイヤーの見分けがつくように、名前を変更しておきます
- 追加したParticle Systemを右クリックしてRenameを押下する
- わかりやすい任意の名前に変更する
  - User：人物の切り抜き
  - Back Ground Animation：パーティクルを表示させる背景
Scene内のCameraの詳細から「Texture Extraction」と「Segmentation」を追加する
- ＋ボタンを押下する
- Texturesに自動的に「cameraTEXTURE0」と「segmentationMaskTexture0」が追加される
Rectangleを追加
- Scene内の右下にある＋ボタンを押下する
- SearchからRectangleを検索し、Insertする
Rectangleの名前を変更する
他のエフェクトなどと見分けがつくように、名前を変更しておきます
- 追加したRectangleを右クリックしてRenameを押下する
- わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)
Rectangleのサイズを変更する
- Rectangleの詳細にあるWidthとHeightの数値をクリックし、それぞれFullになるように選択する
Rectangleのレイヤーを人物の切り抜きレイヤーにする
- Rectangleの詳細にあるLayerから、手順３で作成した人物の切り抜きレイヤーを選択する
RectangleにMaterialを追加する
- Rectangleの詳細からMaterialsの＋ボタンを押し、Create New Materialを選択する
- 追加したMaterialを右クリックしてRenameを押下する
- わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)
Materialにカメラを追加する
- Materialの詳細にあるTextureからcameraTexture0を選択する
- Materialの詳細にあるAlphaにチェックを入れ、AlphaのTextureからsegmentationMaskTexture0を選択する
完成！
- 明るさが気になる場合はDirectionalLightをIntensityを調節してみてください！

画像の比率を変更する

SparkARでは画像が強制的に正方形になってしまうので、見た目が少し変わってしまうこともあります。
元々縦横比が同じ画像を用意すれば問題解決なのですが、使いたい画像がどうしても長方形になってしまう場合、下記を試してみてください！

下記サイトのPatchをインストールし、SparkARヘ読み込む
https://www.npmjs.com/package/sparkar-autofit?activeTab=readme
上のタブの「View」から「Show/Hide Patch Editor」を選択し、Patch Editorを表示させる
PatchをPatch Editorへドラッグ&ドロップ
Textureを該当する画像に変更する
該当するマテリアルのTextureの横にある「→」を押して、Patch Editorに表示させる
二つのPatchを繋いで、サイズと表示を変更する
- Texture Sizeでサイズ変更
- Expand/Shrinkのチェックを外す
- BackGround Colorを透明にする
完成！

参考にさせていただいた記事

https://www.npmjs.com/package/sparkar-autofit?activeTab=readme
https://youtu.be/Vy6u4Dmpl7g