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

概要

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

この記事では、

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

を紹介しています！

事前準備

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

• PNG
• JPEG
• SVG

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

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

1. Particle Systemを追加する
   まずはパーティクルを表示させる元となるParticle Systemを追加します

   • Scene内の右下にある＋ボタンを押下する
   • SearchからParticle Systemを検索し、Insertする
     

2. Particle Systemの名前を変更する
   他のエフェクトなどと見分けがつくように、名前を変更しておきます

   • 追加したParticle Systemを右クリックしてRenameを押下する
   • わかりやすい任意の名前に変更する(私は「Image」という名前に変更しました)
     

3. Particle Systemに表示したい画像を貼り付ける

   • ParticleSystemの詳細からMaterialsの＋ボタンを押す
     
   • Assets内に追加されたmaterialをクリックする
   • materialの詳細にあるTextureのChoose Fileから表示したい画像を選択する
     

4. 完成！

   • あとは自分の好きなようにパーティクルの出方や見え方を調整してみてください！
     
     ※画像の比率が気になる人はこちらを参考にしてください

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

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

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

2. レイヤーを2つ追加
   パーティクルを人の後ろに表示させるために、レイヤー分けをします

   • Layers内の右下にある＋ボタンを押下する
   • 「layer0」と「layer1」がある状態にしておく

3. レイヤーの名前を変更する
   レイヤーの見分けがつくように、名前を変更しておきます

   • 追加したParticle Systemを右クリックしてRenameを押下する
   • わかりやすい任意の名前に変更する
     • User：人物の切り抜き
     • Back Ground Animation：パーティクルを表示させる背景
       

4. Scene内のCameraの詳細から「Texture Extraction」と「Segmentation」を追加する

   • ＋ボタンを押下する
     
   • Texturesに自動的に「cameraTEXTURE0」と「segmentationMaskTexture0」が追加される

5. Rectangleを追加

   • Scene内の右下にある＋ボタンを押下する
   • SearchからRectangleを検索し、Insertする
     

6. Rectangleの名前を変更する
   他のエフェクトなどと見分けがつくように、名前を変更しておきます

   • 追加したRectangleを右クリックしてRenameを押下する
   • わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)

7. Rectangleのサイズを変更する

   • Rectangleの詳細にあるWidthとHeightの数値をクリックし、それぞれFullになるように選択する
     

8. Rectangleのレイヤーを人物の切り抜きレイヤーにする

   • Rectangleの詳細にあるLayerから、手順３で作成した人物の切り抜きレイヤーを選択する
     

9. RectangleにMaterialを追加する

   • Rectangleの詳細からMaterialsの＋ボタンを押し、Create New Materialを選択する
     
   • 追加したMaterialを右クリックしてRenameを押下する
   • わかりやすい任意の名前に変更する(私は「User」という名前に変更しました)

10. Materialにカメラを追加する

    • Materialの詳細にあるTextureからcameraTexture0を選択する
      
    • Materialの詳細にあるAlphaにチェックを入れ、AlphaのTextureからsegmentationMaskTexture0を選択する
      

11. 完成！

    • 明るさが気になる場合はDirectionalLightをIntensityを調節してみてください！

画像の比率を変更する

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

1. 下記サイトのPatchをインストールし、SparkARヘ読み込む
   https://www.npmjs.com/package/sparkar-autofit?activeTab=readme
   

2. 上のタブの「View」から「Show/Hide Patch Editor」を選択し、Patch Editorを表示させる
   

3. PatchをPatch Editorへドラッグ&ドロップ
   

4. Textureを該当する画像に変更する
   

5. 該当するマテリアルのTextureの横にある「→」を押して、Patch Editorに表示させる
   

6. 二つのPatchを繋いで、サイズと表示を変更する

   • Texture Sizeでサイズ変更
   • Expand/Shrinkのチェックを外す
   • BackGround Colorを透明にする
     

7. 完成！

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

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