【SparkAR Studio】人の前後にパーティクルを表示させてみた

## 概要

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

この記事では、
- 人の前にパーティクルを表示する方法
- 人の後ろにパーティクルを表示する方法
- 画像の比率を変更する方法

を紹介しています！

## 事前準備

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

SparkARStudioでは、上記３種類の画像形式のみ対応しているようです。
今回はこちらの画像を使用して作成しようと思います。
![tongull_mountain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/cebc9487-36f6-0912-ec10-8a8559c7dc79.png)


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

1. Particle Systemを追加する
    まずはパーティクルを表示させる元となるParticle Systemを追加します
    - Scene内の右下にある＋ボタンを押下する
    - SearchからParticle Systemを検索し、Insertする
   ![スクリーンショット 2022-03-23 14.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/5ac88309-6669-aa29-86b2-fb55c712bbbb.png)

1. Particle Systemの名前を変更する
    他のエフェクトなどと見分けがつくように、名前を変更しておきます
    - 追加したParticle Systemを右クリックしてRenameを押下する
    - わかりやすい任意の名前に変更する(私は「Image」という名前に変更しました)
   ![スクリーンショット 2022-03-23 14.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/92c95bf2-9654-ecef-aabe-134f72ed325d.png)

1. Particle Systemに表示したい画像を貼り付ける
    - ParticleSystemの詳細からMaterialsの＋ボタンを押す
   ![スクリーンショット 2022-03-23 14.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/eed47409-21eb-081e-ae67-9bfc111df57e.png)
    - Assets内に追加されたmaterialをクリックする
    - materialの詳細にあるTextureのChoose Fileから表示したい画像を選択する
    ![スクリーンショット 2022-03-30 18.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/fe9efcd9-86d6-d5b9-19d3-6142edf15551.png)


1. 完成！
    - あとは自分の好きなようにパーティクルの出方や見え方を調整してみてください！
    ![スクリーンショット 2022-03-30 16.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/a2d7bb8c-1038-f63f-3acc-376dde160444.png)
    ※画像の比率が気になる人は[こちら](##-画像の比率を変更する)を参考にしてください

## 人の後ろにパーティクルを表示させる
次に、背景と人物を分離する方法を紹介します

1. まず、[人の前にパーティクルを表示させる手順](##-人の前にパーティクルを表示させる)と同じく、人の手前にパーティクルを表示させます

1. レイヤーを2つ追加
    パーティクルを人の後ろに表示させるために、レイヤー分けをします
    - Layers内の右下にある＋ボタンを押下する
    - 「layer0」と「layer1」がある状態にしておく

1. レイヤーの名前を変更する
    レイヤーの見分けがつくように、名前を変更しておきます
    - 追加したParticle Systemを右クリックしてRenameを押下する
    - わかりやすい任意の名前に変更する
        - User：人物の切り抜き
        - Back Ground Animation：パーティクルを表示させる背景
    ![スクリーンショット 2022-03-30 18.58.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/0ca42c34-626e-4e0b-d97a-c81f1a24cd14.png)


1. Scene内のCameraの詳細から「Texture Extraction」と「Segmentation」を追加する
   - ＋ボタンを押下する
   ![スクリーンショット 2022-03-30 18.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/fdcc3a06-c91e-de2b-3d7c-7ba2b49561c0.png)
   - Texturesに自動的に「cameraTEXTURE0」と「segmentationMaskTexture0」が追加される

1. Rectangleを追加
    - Scene内の右下にある＋ボタンを押下する
    - SearchからRectangleを検索し、Insertする
    ![スクリーンショット 2022-03-30 18.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/94c224d9-58dc-665b-3950-4389aa7dc68e.png)

1. Rectangleの名前を変更する
    他のエフェクトなどと見分けがつくように、名前を変更しておきます
    - 追加したRectangleを右クリックしてRenameを押下する
    - わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)

1. Rectangleのサイズを変更する
    - Rectangleの詳細にあるWidthとHeightの数値をクリックし、それぞれFullになるように選択する
    ![スクリーンショット 2022-03-30 19.04.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/7dacee36-0a6f-e958-6716-a235dd502d0c.png)

1. Rectangleのレイヤーを人物の切り抜きレイヤーにする
    - Rectangleの詳細にあるLayerから、手順３で作成した人物の切り抜きレイヤーを選択する
    ![スクリーンショット 2022-03-30 19.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/80edc4e3-28d1-ab61-7a11-888300463d1e.png)

1. RectangleにMaterialを追加する
    - Rectangleの詳細からMaterialsの＋ボタンを押し、Create New Materialを選択する
    ![スクリーンショット 2022-03-30 19.07.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/30057ea3-136c-beaa-9c41-ec294c0dc443.png)
    - 追加したMaterialを右クリックしてRenameを押下する
    - わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)

1. Materialにカメラを追加する
    - Materialの詳細にあるTextureからcameraTexture0を選択する
    ![スクリーンショット 2022-03-30 19.08.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/f39f0bb6-268d-5934-aad8-d08e354673bd.png)
    - Materialの詳細にあるAlphaにチェックを入れ、AlphaのTextureからsegmentationMaskTexture0を選択する
    ![スクリーンショット 2022-03-30 19.09.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/7bf70039-0aa2-1421-a181-07f2c4b5e473.png)

1. 完成！
    - 明るさが気になる場合はDirectionalLightをIntensityを調節してみてください！

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

1. 下記サイトのPatchをインストールし、SparkARヘ読み込む
https://www.npmjs.com/package/sparkar-autofit?activeTab=readme
    ![スクリーンショット 2022-04-05 10.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/72c9b832-5243-7742-7855-9dfce21dea5e.png)

1. 上のタブの「View」から「Show/Hide Patch Editor」を選択し、Patch Editorを表示させる
    ![スクリーンショット 2022-04-05 10.47.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/1b072fe6-c7ae-1839-a1bb-872f1d8b635c.png)

1. PatchをPatch Editorへドラッグ&ドロップ
![スクリーンショット 2022-04-05 10.44.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/a991c373-26af-6bb6-636b-2c0d79fe4bf0.png)

1. Textureを該当する画像に変更する
    ![スクリーンショット 2022-04-05 10.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/94df9c9a-06ce-e5ea-de38-3b4a160e4559.png)

1. 該当するマテリアルのTextureの横にある「→」を押して、Patch Editorに表示させる
    ![スクリーンショット 2022-04-05 10.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/d788273f-8629-b827-e9a9-7b07277609ea.png)

1. 二つのPatchを繋いで、サイズと表示を変更する
    - Texture Sizeでサイズ変更
    - Expand/Shrinkのチェックを外す
    - BackGround Colorを透明にする
   ![スクリーンショット 2022-04-05 11.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534018/7ff8b740-0c0c-cb2a-5e41-52d0ca5c92b2.png)


1. 完成！

## 参考にさせていただいた記事
https://www.npmjs.com/package/sparkar-autofit?activeTab=readme
https://youtu.be/Vy6u4Dmpl7g