members

members

【初級編#2】SparkAR |Instagramフィルターの作り方(Particle Systems編)

Tweet

こんにちは。Instagramのストーリーズ機能は活用していますか?

ストーリーズ機能に欠かせないInstagramフィルターですが盛れるものから、没入感の高いものまで様々なフィルターがあります。企業プロモーションにも活用されている事例もあります。

ARの概要と企業プロモーションの事例はこちらのコラムをご覧ください。
リモート時代のSNSトレンド<ARエフェクト>をプロモーションに活用しよう

実はInstagramのフィルターは使うだけではなく、作ることもできるのです! このコラムではInstagramのフィルターを作成するツール「SparkAR」の簡単なチュートリアルを紹介します。

 

■目次
SparkARとは
Particle Systemsとは
作成方法
①SparkARを開きBlank Projectを開く
②Particle Systemsをインサート
③プロパティを編集し動きをつける
④マテリアルを設定する
⑤スマホでテストして申請!
まとめ

SparkARとは

Facebook社が公開しているInstagram・Facebookで使用できるフィルターを作成・管理できるツールです。 誰でも簡単にフィルターを作成し公開することができます。 今回は基本機能である「Particle Systems」の機能について解説します。 前回のコラム「【初級編】SparkARでARエフェクトを作成しよう」では、SparkARの概要 と基本機能の「Facemesh」を使った簡単なフィルターの作り方について解説していますのでよろしければこちらも参考にしてみて下さい。

Particle Systemsとは

Particle Systems(パーティクルシステム)を使用すると、パーティクルと呼ばれる多数のオブジェクトを表示および移動できます。このオブジェクトに動きを加えることであらゆる種類の視覚体験を生み出します。 今回はパーティクルシステムを使ってシャボン玉が飛んでいるようなエフェクトのフィルターを作成します。

 

作成方法

①SparkARを開きBlank Projectを開く。

SparkARはこちらから無料でダウンロードすることができます。

こちらが最初に開かれる画面です。
SparkARには様々なエフェクトのテンプレートがあり、それらを使用することができます。

今回は「New Project」をクリックし何も設定されていない「Blank Project」を開きます。

②Particle Systemsをインサート

左上のScensパネルから「+Add Object」をクリックし、「Particle Systems」をインサートします。するとScensパネル内に「emitter0」として表示され、プレビュー画面の中央にパーティクルが一点から上に向かって放出されているのが表示されます。
「emitter0」は分かりやすいように表示名を「シャボン玉」に変更しておきます。

画面右側のインスペクタパネルで、プロパティを編集することでパーティクルの動きを変更することができます。

③プロパティを編集し動きをつける

シャボン玉の動きをイメージしながらパーティクルの動きを設定していきます。まずは、パーティクルシステムの位置、スケール、回転を変更します。

Position (位置):X、Y、Z軸に沿ってパーティクルシステムの位置を変更します。
Scale (スケール):パーティクルシステムを大きくしたり小さくしたりします。
Rotation(回転):パーティクルシステムを回転させます。

これらは数値を入力して指定することもできますが、画面中央のビューポートにあるマニピュレータをドラッグして設定することもできます。

今回は、シャボン玉が下から上へ上がっていくようなエフェクトにしたいので、Y軸だけを変更しパーティクルシステムの発生地点を画面の下にしています。

 

次にパーティクルシステムから吹き出しているオブジェクト(パーティクル)の発生方法について設定します。

・「Type」の編集ではパーティクルがどのような形状から発生するかを設定できます。
四種類から選択することができ、今回は「Line」を選択しています。

Point:単一のポイントから放出されます。
Line:ラインに沿ったポイントから放出されます。
Plane:平面内のポイントから放出されます。
Ring:リングの周りのポイントから放出されます。

・「Space」の編集ではパーティクルが次のいずれかに表示されるかどうかを選択します。

Local:パーティクルはカメラとともに移動します。
World:パーティクルは、放出された後、独自の位置になります。

・「Birthrate」の編集ではパーティクルの発生頻度を設定できます。
デフォルトでは、毎秒20パーティクルに設定されていますが、今回は毎秒2パーティクルの設定にします。右側のパーセンテージで揺らぎを設定することができ、単一ではない発生頻度にすることが可能です。今回は10%に設定しています。これは設定値の±10%の揺らぎがあることを意味しています。

・「Speed」の編集ではパーティクルの移動速度を変更できます。こちらも50%の揺らぎを加えてシャボン玉のような動きに近づけていきます。

 

 

次にパーティクルのサイズと表示される長さを設定します。

・「Scale」の編集ではパーティクルのサイズを設定できます。ここでも80%の揺らぎをつけることでシャボン玉のサイズのバリエーションを増やしておきます。

・「Lifespan」の編集では各パーティクルがエフェクトに表示される時間を設定できます。
パーティクルが発生してから5秒後に消える設定にしていますが、30%の揺らぎをつけることでいくつかのシャボン玉が途中で消えるようなエフェクトにします。

 

 

つぎにパーティクルの傾きを設定します。
・「Spin」の編集ではパーティクルの表示宙に各軸を中心に回転する速度を指定します。
・「Tilt」の編集ではパーティクルが放出されるときに、パーティクルが各軸を中心にどのように回転するかを設定します。

 

 

④マテリアルを設定する

動きを設定することができたら白黒の四角になっているパーティクルにマテリアルを設定していきます。

左下のAssetsパネルにパーティクルに表示させる素材をインポートします。
今回は簡単に作るためにフリー素材のシャボン玉の画像を使用します。
画像を使用する場合は必ず背景が透過されているpng素材を使用してください。

使用画像:https://ja.pngtree.com/freepng/transparent-soap-bubble-vector_5221946.html

 

 

Sceneパネルの「シャボン玉」を選択したまま、インスペクタパネルから「Materials」の+ボタンをクリックするとAssetsパネルに「material0」というマテリアルが表示されます。こちらも分かりやすいように名前を「シャボン玉」に変更しておきます。

 

 

次にAssetsパネルのマテリアル「シャボン玉」を選択して右側のインスペクタパネルで表示させる素材を設定してきます。

「Texture」をクリックしてインポートしておいたpng画像を選択します。
するとプレビュー画面のパーティクルに選択した素材が表示されます。

 

 

次にインスペクタパネルでマテリアルの質感の設定を行います。

「Shader Type」からマテリアルの質感を設定できます。

Flat:照明に反応しないため、一般的に2Dオブジェクトに使用されます。
Standard:リアルな奥行きを提供する方法で照明に反応するため、3Dオブジェクトに適用されるマテリアルに一般的に使用されます。
Physically-Based:異なるテクスチャと異なる特性の組み合わせを使用して、リアルなマテリアルを作成するために使用することができます。
Face paint:顔の下の輝度を維持するため、ユーザの顔の上にテクスチャを加えるエフェクトに最善です。
Blended:質感や色を混合するためのモードを含みます。
Shader Asset:レタッチマテリアルを作成するオプションが表示されます。

以上でシャボン玉のエフェクトの完成です!
さらに細かい設定もインスペクタパネルから行うことも可能です。

 

⑤スマホでテストして申請!

フィルターが完成したらInstagramのアカウントに送信してテストを行います。
問題なければSparkARでフィルターの申請を行い、承認されたら公開完了です。

 

公開したフィルターはSparkARで管理することができ、インサイトを確認することもできます。

インサイトの確認方法はこちらのコラム【解説】Spark AR Hub Instagramエフェクトのインサイト確認方法を参考にしてみてください。

 

まとめ

今回は基本機能の「Particle Systems」について解説しました。
SparkAR内にある他の機能を組み合わせ、Blenderなどで作成した3D素材を組み合わせることによってより没入感のあるフィルターを作成することができます。
冒頭でもお伝えした通りSparkARには様々なテンプレートがあるので簡単なものはすぐに作成することができます。

ぜひInstagramの新しい楽しみ方として、お気に入りのフィルターを作成してみてください!

 

引用:Adding and Editing Particle Systems SparkAR

 


■コラム執筆者

    • 山田舞優(Yamada Mayu)