Spark AR でInstagramカメラエフェクト公開までのやり方まとめ

Spark ARとはFacebookが公開しているAR（拡張現実）とフェイスエフェクトが融合したエフェクト開発アプリで、Instagramのストーリーズで公開でき、セルフィーでの顔アフェクトに利用できるもの。LINEスタンプのような将来の流行も感じるし、難しそうだが少しづつ習得していこうと思い、ここにその経過をまとめます。

ARカメラエフェクトのための全体作業

ARカメラエフェクトといっても、Snowのようなおしゃれな美人エフェクトからエンタメ系、ギャグ系までさまざまな表現があり、目的も様々。あれもしたいこれもしたい。何をすればいい？といったようにこのツールが多様すぎてゴールを見失い迷子にならないように、このページではひとまずARカメラエフェクトで以下のことができるよう、ゴールをまとめました。

ゴールを決める

このページでの目的はシンプルに以下の通りとする。

その上で必要なソフトウェアは以下の通り。

必要なツール

• Blender
• Spark AR

作業内容とツール一覧

上で決めたゴールとツールを作業の順番通りにまとめた一覧です

作業	ツール	製作物
3Dモデリング（ObJデータ）	Adobe Dimention Blender	月桂冠 メダル トロフィー ロゴ キャラクター
3Dアニメ	Adobe AfterEffect BlenderでFXB書き出し❓	ランニング キャラ表情
頭の上、胸の前に3DCG	Spark AR
手の上に3DCG	Spark AR パッチエディタ❓
地面に特定の図柄でアクション	Spark AR パッチエディタ❓
動作チェック	Spark AR（スマホ版）
エフェクト申請	Instagram アカウント facebook アカウント

完成予定図

どんなイメージで完成するのか、ひとまず完成図を描いてみて、製作物や留意点を先に洗ってみる。

adobe Dimention

adobeの定番3Dシミュレーションソフト。後述のBlenderほどの機能はないが、PhotoshopやIllustrator、AfterEffectなどほかのadobeソフトと柔軟に連携できるので重宝する。3D定番のデータ形式OBJデータを、BlenderとDimentionで双方向で使えるかどうかが要。

利点

• Photoshop、Illustrator、AfterEffectなどほかのadobeソフトと柔軟に連携
• OBJデータ読み書き対応
• adobeストック

難点としては、単純な基本図形（プリミティブ）しかなく、有機的な物体や、複雑な立体が作りづらいことだ。

Blender

3Dモデラーとしてフリーウェアで定評のあるBlenderを選んだ。3DCGといえば、平成まではLigthWave3D、Shade3D、Swivel3D、などが定番だったが、今ではすっかり影が薄くなり、Maya、Studio MAX、はじめとした洗練したツールにしぼられてきた。その中でもBlenderはフリーウェアでありながらUIや使い心地がLW3Dに似ていてシンプルでファンも多いのでこれを使うことにした。

Blender制作の流れ

1. オブジェクトを作る
2. マテリアルを定義する
3. マッピング
4. 書き出し（OBJ書き出しで、マテリアルが別書き出しされる）

お勧め動画解説

blenderを動画で習得するなら、「VARY GRAPHICS」チャンネルの再生リスト「ゼロから始めるBlender入門」が絶対お勧めだ。他にもいろんな動画解説チャンネルがあるが、このバリーさんの解説が一番テンポよくおちついた声で理解しやすい。

用語おさらい

まずは知っておいたほうがいい用語やルール

• モディファイア
  Photoshopで言う「レイヤーエフェクト」のようなもの。元形状を維持したまま変形をかけられること。「適用」ボタンで変形後形状に不可逆に変形される。
• スムージング

中心点の違い

• 物体の原点：ここを中心に拡大縮小される（オレンジ色の点）
• 3Dカーソル：原点とは別で、ここを中心に新規プリミティブが追加される（紅白の丸マーク）

基本編

LW3Dと同じようにBlenderの3Dモデリングではショートカットがとても重要になる。絶対覚えておいたほうがいい。特に…

【やりたい動き（g,s,r）+ 方向、軸（x,y,z）+ 数値（0,90,180）】
の合わせ技ショートカットができるのが醍醐味

基本操作方法とショートカットキー

基本操作といってもたくさんあるので、いつか種類別に分けたいと思いますが、ひとまず初歩用としてざっと並べたもの。（⭐️マークは特におすすめ）

コマンド、用語	方法、ショートカット	補足
原点変更	画面右上>オプション>原点ON>g移動	蜜柑色の点
編集軸を選ぶ	画面上>トランスフォームピポットポイントiconから選択
選択	クリック	シーン一覧でもOK
複数選択	shift + クリック	〃
全選択	a	連打で解除⭐️
囲み選択	ドラッグ選択（b + 左ドラッグ）	イラレ的
なげなわ選択⭐️	ctrl + 左ドラッグ	フォトショ的
選択反転	ctrl + i
選択を別レイヤーに	p > 選択（Serectid）
ループ選択⭐️	辺をalt選択
ループ範囲選択	点をctrl選択
リンク選択⭐️	l	属す点対象
ループ範囲選択	点をctrl選択
ループカット⭐️	ctrl + r（ホイールで増減）	LWスライス
ベベル⭐️	ctrl + b	角トリ
追加⭐️⭐️	shift + a	万能です
面上に面追加⭐️	i	eとコンビ
延長（extention）⭐️	e	ベベル的
法線に延長⭐️⭐️	alt+e
ナイフ	k	スナップ可
辺に点追加	辺の2点を選択 > 右クリック > 細分化
ループナイフ	ctrl + r	自由に緯度赤道分割
ポリゴン細分化	ctrl + e > 細分化	旗の作成時に
プロポーショナル編集	o（ホイールで増減）	画面上◎icon
ペイント的選択	c（ホイールで太さ変更）	塗り感覚で選択
削除	x
移動⭐️	g（連続gで辺上移動⭐️）
回転⭐️	r	ピポット点が軸
拡大縮小⭐️	s
複製	shift + d	その場で
コピペ	ctrl + c、ctrl + v	⌘使わない
軸を固定	ショートカット + x (x軸に固定)
軸を除外	ショートカット + shift + z (z軸を除外)
編集モードの切り替え	tab
3Dカーソルを中心に	shift + c
マージ（制御点収束）	alt + m
合体（joint）	複数選択後 ctrl + j
特別メニュー	ctrl + v（点） ctrl + e（辺） ctrl + f（面）	選んだ状態で
ツール開閉	t	画面左のツール類
プロパティー開閉	n	画面右のパレット群
パイメニュー表示	shift + s	長押しで別も
ポリゴン増	プロパティ > モディファイア > サブディビジョンサーフェイス
ポリゴン減	プロパティ >モディファイア > デジメート
回転体（スピン）	編集モード>ツール>回転体 ⚠️軸がセンターにならず要研究（画面上側トランスフォームポポットポイント選択が要か？）	編集モードで 3Dカーソルが軸 複製ONで回転複製⭐️
回転体（スクリュー）	これも回転体だが、上記スピンと違い多層的でモディファイアであること プロパティ > モディファイア > スクリュー	参考
キーフレーム追加	i	OBJ選択状態で
レンダリング	F12
法線確認	画面右上「ビューポートオーバーレイ」> ジオメトリ > 面の向き（で確認）	青（外向き） 赤（内向き）
法線反転	画面左上「メッシュ」 > ノーマル > 反転
選択した面を隠す	h	Vertex Groupとの併用が便利らしい
選択してない面を隠す	shift + h
隠した面を再表示	alt + h
グリッド非表示	layoutモードにするとか
スムージング	左上「オブジェクト」メニュー > シェードスムーズ	OBJモードで
部分スムージング	左上「面」メニュー > シェードスムーズ	EDTモードで

ビューポート

画面の視点移動のショートカットキー一覧

コマンド	ショートカット	説明
視点を前に	1
視点を横に	3
視点を上に	7
視点を今の反対に	9
視点を斜めに⭐️	5（連続で投影モード切り替え）	ポートビュー
視点をx軸回転	8（下）、2（上）
視点をz軸回転	4（左）、6（右）
視点をカメラに	0
視点を選択物に⭐️	.	OBJモードのみ
視点を選択物にし拡大⭐️	,	OBJモードのみ?
ビュー近遠	⌘ + スクロール
ビュー回転	ドラッグ
ビュー回転（平行投影）	alt + スクロールボタン押 + ドラッグ	⚠️Mac不可
ビュー移動	shift + スクロール
切り替え：シェーディング⭐️	shift + z
切り替え：透過⭐️—	option + z

モデリング

⚠️必ず「編集モード」で行うこと

コマンド	ショートカット	説明
点選択モード⭐️	1	テンキー❌
辺選択⭐️	2	〃
面選択モード⭐️	3	〃
点を追加	ctrl + 右クリック
辺を追加	ctrl + 右クリック、ctrl + 右クリック…
点を辺に 辺を面に	f	点選択後
面の三角化	alt + f
面延長⭐️⭐️	e
面延長を法線に⭐️	alt+e
面をベベル	ctrl + b	角トリに
面上に面追加⭐️	i
面にナイフ	k	点追加時に
面にループナイフ⭐️⭐️	ctrl + r
	ctrl + b

LawPolyキャラクターモデリング

モデリング前設定

• ビューを平行投影で進めること
• マニュピレーター使用（任意）：画面右上「ギズモ（ピザicon）」> 移動にチェック入れ
• 透過表示ON（画面右上の透明icon）

モデリング手順

1. 正方形のサブディビジョンサーフェースモディファイア適用の頭部から開始
2. 頭部の位置にz移動
3. 左半分を削除しミラーモディファイア（適用はまだ）に、クリッピングON（これで擬似マージ状態に）

テクスチャ

基本としては、基本色やツヤ、金属かどうか、反射具合などの基本的な質感は「サーフェイス」プロパティで設定するが、それ以上のテクスチャマッピングなどの高度の質感についてはシェーダーエディター（旧名：ノード）を利用する（画面左上のビューポートボタンをクリックすると表示される一覧から選択）

2種類のテクスチャ設定

• サーフェイス（基本的なテクスチャ）
• シェーダーエディター（高度なテクスチャ：旧名ノード）

基本サーフェイス定義の手順

1. オブジェクトモードで対象オブジェを選ぶ
2. 画面右下プロパティーパネルから「ワールドプロパティ（赤い地球icom）」選択
3. 新規マテリアル定義
4. ベースカラーを設定（クリックするとカラーパレット表示）
5. メタリック（金属感：1.0最大）、
6. より詳細には画面上側「Shading」ワークスペースを選択し詳細設定

テクスチャ画像マッピング（シェーダーエディター）

1. 対象オブジェ選択
2. サーフェイス定義を任意で設定
3. 分割された編集画面の１つ（例えばタイムライン画面）の、エディタタイプ（画面左上のエディタータイプ変更ボタン）をシェーダーエディターに変更。（これでプレビューを見ながらマテリアル設定できる）
4. シェーダーエディター上で、追加（shift+a）> テクスチャ > 画像テクスチャ > の順で黄土色のノードパネルが追加される。
5. そのノードパネルのフォルダicon（開く）でテクスチャ画像を選択

テクスチャ座標の微調整

テクスチャの座標や微調整などは、下の動画を参考に。基本的には、テクスチャに下記4ノードを追加し微調整する。尚、RGB乗算は、カラー > RGBミックス、で行える。

1. シェーダーエディター上で、追加（shift+a）> テクスチャ > 画像テクスチャ > の順で黄土色のノードパネルが追加した状態で
2. 追加（shift+a）> ベクトル > マッピング（紫）
3. 追加（shift+a）> 入力 > テクスチャ座標（赤）
4. 追加（shift+a）> 入力 > ジオメトリ（赤）

ショートカットキー（UV Editingメニュー）

コマンド	ショートカット	補足
シーム追加（縫い目）	ctrl + e

UVマッピングという方法で、位置調整する方法の動画部分

平面的な位置調整はこれがシンプルにみえる

ボーン（アーマチュア）

LWではスケルトンと呼んでいたが、blenderではボーン（アーマチュア）と呼ぶ。3DCGのキャラクターアニメーションで必須のスキルとなる。

キューブ人形にアーマチュア挿入方法

マインクラフトのようなLowポリゴンなキューブ人形をまずは作ってみて要領をつかもう。

1. 正方形で頭を作りshift+dで複製していく（頭-Head、体-Spine、肩-Sholder、腕-Arm、手-Hand、腰-Hip、太もも-Leg、スネ-Shin、足-Foot）=右側
2. 右側パーツを左右反転複製（ミラーモディファイア > オブジェクトモード > 適用 ）
3. 腰からボーン作り「e、z」でボーン追加していく。（長さ調整は尻尾をgで移動するだけ）。
4. シーンパレットで、ボーンの名前を入力
5. 右半分のボーンを選択し右クリック > 名前 > 自動リネーム（左右）で、名前語尾にL付け
6. 右半分のボーンを選択し右クリック > 名前 > 対称化で、ボーンの左右対称複製
7. オブジェクトモードに移り、①正方形、②ボーン、の順に選択し、ctrl + p > 自動のウェイトで、選択。これでボーンが適用される。
8. ボーン回転をポーズモード（ctrl + tab）で確認
9. ソリッドビューでボーン可視化：ボーン選択 > オブジェクトデータプロパティ（緑の人体icon）> ビューポート > 最前面
10. OBJモードで、①ボーン、②正方形、の順に選択し、ctrl + tab でウェイトペイントに入る
11. アクティブツールプロパティ（白い道具icon）> オプション > 自動正規化 > ONに、Xミラー > ONに
12. ctrl + ボーンクリック、で塗りボーン切り替え（⚠️正方形でなく、ボーンをクリックすること）
13. 画面右上「Overlays」（逆三角icon）> ウェイト0 > アクティブON、高等線を表示ON、で初期ウェイトペイントがしやすい（親から子に向かって調整していくのがコツ）
14. vキーでWペイント頂点選択モードに入り、頂点選択、塗り潰し（shift + k）で赤青（赤が有効範囲）をはっきりさせていく

ボーン関連ショートカット

コマンド	ショートカット	補足
ボーン追加	e + z（z方向の場合）
ボーン適用	右クリック（オブジェクト） > ペアレント > 自動のウェイトで ctrl + p > 自動のウェイト	ボーンを後に選択
ボーン切断	alt + p > コネクト切除（disconnect bone）	背骨と腕を離す時
ボーン接続	ctrl + p > 接続（connec）	プロパティーでも可
オフセット保持	ctrl + p > オフセット保持（Keep offset）	別ボーンを距離保ち繋ぐ
自動ネーム（左右）	ボーン選択 > 右クリック > 名前 > 自動ネーム（左右）
左右対称コピー	ボーン選択 > 右クリック > 対称化
ポーズモード⭐️	ctrl + tab
Wペイント	OBJモードで、①ボーン、②正方形、の順に選択し、ctrl + tab	ボーンを先に選択
Wペイント頂点選択	v	vで選択解除
Wペイント輪投げ選択	ctrl + 右ドラッグ
Wペイント塗り潰し	shift + k
頂点選択解除	alt + a
ボーン位置リセット	alt + r + g	最後に

キューブ人形にIK挿入方法（スキニング）

全体の流れは、右手IK入れ、左に対称コピー、右足IK入れ、左に対称コピー、ルートボーン入れ。その手順は以下の通り。

1. 肘ボーンを後部にe追加。
2. 追加ボーン選択し alt + p で「親子関係クリア」
3. そのボーンを後部に頭分移動し、名前を「ElbowIK（任意）」（=肘の向き決めターゲットIK）
4. 手ボーンを shift + d 複製・直後に右クリックで移動キャンセルし、nキーでトランスフォーム棚メニューを出し、長さ（Length）を手ボーンの1.2倍サイズくらいにし「HandIK」と名前変更。alt + p で「親子関係クリア」
5. 今作った2つのIKを複数選択し、右クリック > 名前 > 自動リネーム（左右）で、名前語尾にL付け
6. 【ポーズモード】HandIK + Arm ボーンを選択した状態で、ctrl + shift + c から「インバースキネマティクス」選択。
7. 画面右下ボーンコンストレントプロパティー（青骨icon）を表示し、ポールターゲット：Armature、ボーン：ElbowIK.Lを選択
8. その下、チェーンの長さ：2（IKから２つ前の関節までを補完）、ポール角度：-90度、に修正
9. 手ボーンを選択し、ボーンコンストレイントプロパティー（青骨icon）から「回転をコピー」を選択。ターゲット：Armature、ボーン：HandIK.L。（⚠️これで片手IK完成）
10. 【ポーズモード】aキーで全ボーンを選択し、位置リセット（alt + r + g）
11. 【編集モード】IK２つを選択し、右クリックから「左右対称」選択。（シーンパネルでR付ボーン名を確認）
12. （⑥と同じく）（ポーズモードで）で左右対象コピーされたR側の手IK（HandIK.R）+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
13. （⑦と同じく）画面右下にボーンコンストレントプロパティー（青骨icon）を表示し、ポールターゲット：Armature、ボーン：ElbowIK.Rを選択
14. （⑧と同じく）その下、チェーンの長さ：2（IKから２つ前の関節までを補完）、ポール角度：-90度、に修正
15. （⑨と同じく）手ボーンを選択し、ボーンコンストレイントプロパティー（青骨icon）から「回転をコピー」を選択。ターゲット：Armature、ボーン：HandIK.R。（⚠️これで両手IK完成）
16. OBJモードでボーンを選択し、編集モードに
17. （①と同じく）L側ヒザ軸を選択しe延長。
18. （②と同じく）追加ボーン選択し alt + p で「親子関係クリア」
19. （③と同じく）そのボーンを頭分に移動し、名前を「KneeIK（任意）」（=膝の向き決めターゲットIK）
20. （④と同じく）足ボーンを shift + d 複製・直後に右クリックで移動キャンセルし、nキーでトランスフォーム棚メニューを出し、長さ（Length）を手ボーンの1.2倍サイズくらいにし「FootIK」と名前変更。alt + p で「親子関係クリア」
21. （⑤と同じく）今作った2つのIKを複数選択し、右クリック > 名前 > 自動リネーム（左右）で、名前語尾にL付け
22. （⑥と同じく）【ポーズモード】HandIK + Arm ボーンを選択した状態で、ctrl + shift + c から「インバースキネマティクス」選択。
23. （⑦と同じく）画面右下ボーンコンストレントプロパティー（青骨icon）を表示し、ポールターゲット：Armature、ボーン：KneeIK.Lを選択
24. （⑧と同じく）その下、チェーンの長さ：2（IKから２つ前の関節までを補完）、ポール角度：-90度、に修正
25. （⑨と同じく）足ボーンを選択し、ボーンコンストレイントプロパティー（青骨icon）から「回転をコピー」を選択。ターゲット：Armature、ボーン：FoodIK.L。（⚠️これで片足IK完成）
26. 【ポーズモード】aキーで全ボーンを選択し、位置リセット（alt + r + g）
27. 【編集モード】IK２つを選択し、右クリックから「左右対称」選択。（シーンパネルでR付ボーン名を確認）
28. 【ポーズモード】左右対象コピーされたR側の足IK（FootIK.R）+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
29. 画面右下ボーンコンストレントプロパティー（青骨icon）を表示し、ポールターゲット：Armature、ボーン：KneeIK.Rを選択
30. その下、チェーンの長さ：2（IKから２つ前の関節までを補完）、ポール角度：-90度、に修正
31. 足ボーンを選択し、ボーンコンストレイントプロパティー（青骨icon）から「回転をコピー」を選択。ターゲット：Armature、ボーン：FoodIK.R。（⚠️これで両手両足IK完成）
32. 【編集モード】（ここからルートボーン）Hipボーンをshift + d + z で足元に移動複製。
33. 【編集モード】人体全8個のIK + Hipボーンを選択し、最後にルートボーンを選択した状態で、ctrl + p 「オフセットを保持」選択

IKの目印をわかりやすく矢印マークに

1. 事前に矢印マークなOBJをワールドにペースト（bone_man.blend、IKhaitteru.blend、などのテンプレ使用を）
2. IKを選んで、ボーンコンストレイントプロパティー（青骨icon）からカスタムシェイプで矢印マークを選ぶ

歩かせる

 

1. 出力プロパティ（白プリンタicon）で、フレームレート、フレーム数、を決めておく（例：30fps、開始1〜終了30フレーム）
2. 画面上部「Animation」フレームを選択、右画面に俯瞰図、右画面に側面図、画面下はドープシートモードで「アクション」を選ぶ
3. 【ポーズモード】歩き開始の基本ポーズを作るために、IK動かし位置を決める
4. 【ポーズモード】全ボーンを選択（a）し、フレーム位置が0とし、iキーで「位置、回転、縮尺」を選択し、ドープシート0にキーフレームを打つ
5. 【ドープシート】0フレーム目をコピー（⌘c）しを30フレーム目にペースト（⌘v）
6. そのまま、15フレーム目にタイムラインを移動し反転ペースト（ctrl + shift + v）

重力・物理趣味レーション

後述するが、これらの複雑なアニメはFBX書き出しに対応してない。

はためく旗（風を使う場合）

1. 布のはためかない軸部分を指定：編集モードで、軸の上下2点（上2点、下2点）を点選択
2. オブジェクトデータプロパティ（緑の三角ポリゴンicon）から、頂点グループ（Vertex Groupe）を+で追加し、割当（Assign）
3. オブジェクトモードに移り、物理演算プロパティ（青い二重丸icon）から、クロス（Cloth）を選び、サブメニュー（リストicon）> コットン（or シルク）を選択
4. クロスパレット内物理プロパティの品質ステップ数（Quality Steps）を11、空気の粘性（Ari Viscosity）を4.9に
5. 同パレット、剛性の引貼・圧縮：せん断：15、曲げ：0.5（例えばの数値なので、任意調整を）
6. 同パレット、シェイプ（Shape）の固定グループ（Pin groupe）からGroupeを選択
7. 同、コリジョン（Collisions）の品質（Quality）：3に（☝️ここまでが旗の材質設定、次から風力設定へ）
8. 追加（Shift + a）> フォースフィールド > 風 を選択
9. 風の角度をrで調整（r、y、90）、位置を旗の外へ移動（g、x）
10. 風のプロパティ（フォースフィールド）で、風邪の強さ（Strength）：2000、フロー：10に（例えばの数値なので、任意調整を）
11. タイムラインウィンドウを表示し、再生ボタン

はためく旗（波モディファイアを使う場合）

1. 平面を作り、細分化（ctrl+e）
2. モディファイアプロパティから「波モディファイア 」を選択
3. 波の軸をXとし、繰り返しにチェックマーク
4. タイムラインアニメを再生

炎

シュミレーションしない炎の作り方｜ネックOPN｜note

Blenderで炎を作ります。 シュミレーションを用いて炎を計算するのが一般的ですが、 重いしめんどくさいのが弱点です。 なので今回は、シュミレーションを使わず…

note.com

カメラ

簡易スタジオ設定

初めての人は以下の手順で簡単なスタジオセットを用意しておくとあとで楽だ。

1. 追加（shift + a） > カーブ > 円 、で円が追加され、大きさを調整（例：s, -z, 10）
2. カメラを選択（または追加）し、プロパティパネルからオブジェクトコンストレイン（二重丸ギアチェーンicon）> オブジェクトコンストレイント追加 > パスに追従（Follow path）選択し、ターゲットを円に
3. nキーでシェルフメニューを表示し「アイテム > トランスフォーム」値をすべて０に
4. オブジェクトコンストレイント追加 > トラック（Track to）選択し、ターゲットを被写体オブジェクトに、その下の値「先：-z」「上：Y」に変更

背景白の簡易ルック設定

その他ルック設定など、これはあくまでお手軽確認用として。

1. ワールドプロパティ（地球儀icon）> 背景白
2. レンダープロパティ（プリンタicon） > カラーマネジメント > ビュー変換 > 標準（デフォルトはFilmic）
3. この状態で、シェーダーエディターを「ワールド（地球儀icon）」とし、下記設定通りに。「背景」パネル上は、背景色とは別に影響を受けたい色、パネル下は実際の背景色。

動画をGifアニメに変換（Premiere）

• ファイル > 書き出し > メディア（⌘ + m） > つまりいつもの書き出しでできる

静止画をGifアニメに変換（Photoshop）

1. Photoshopで「ファイル > スクリプト > ファイルをレイヤーとして読み込み」選択し、「参照」ボタンからフォルダを選んでOKボタン
2. 「ウィンドウ > タイムライン」を選び、パネル中央の▼ボタンから「フレームアニメーションを作成」選択
3. タイムライン右上の小さなハンバーガーメニューから「レイヤーからフレーム作成」選択
4. フレームレート値を選択（60fps：0.01666秒）
5. タイムライン左下オプションを「無限」に
6. ファイル > 書き出し > Web用に保存（従来）選択
7. プリセット > GIF128ディザ 選択し
8. カラーメニューを「256」に
9. 任意で、画像サイズを変更し、保存

adobe Illustratorのパスデータ読み込み

Blenderにはsvgデータを読み込みできる。こうすることでロゴのパスデータ等、adobe AIの資産（ai）を使用できる。3DCGソフトやadobeAEでパスデータを作るのは大変なので、この読み込みはとても助かる（adobe Illstratorでsvg保存すること）。手順は以下の通り。

1. ファイル > インポート > SVG
2. インポートデータはとても小さすぎるので、サイズを10倍に拡大（⚠️この時、Z軸も含んで拡大すること。でないとZ幅が潰れる）
3. 原点がずれているので、オブジェクトモードで 画面左「オブジェクト」> 原点を設定 > ジオメトリを原点に移動 を選択

参考サイト

blender 2.9 入門

何がわからないのかわからない人向けの講座―という名の個人的備忘録です。 ここでは基本的なことのみピックアップして解説します。 ※本当に基本的なことしか解説していま…

czpanel.com

IllustratorのパスをBlenderで立体化する | STYLY

Illustratorで作成したパスを3DCGソフトBlenderにインポートして立体化する一連の流れをご説明します。使用しているBlenderのバージョンは2.8です。

styly.cc

3DCG未経験者がBlender学習の初日にやったこと｜keta｜note

こんにちは、@kntktnkです。 ※5月2日更新情報※ DiscordにてBlender学習コミュニティを立ち上げました。 招待URL⇨https://discord.gg/cYS9E2f ※以下、記事本…

note.com

定番の3Dデータ保存形式

3DCG・CADの世界で今では用途別に10種類以上のデータフォーマットが存在するらしい。そのなかでもこのページのようにエンタメやデザイン、芸術に向いているデータ形式を下に並べた。

拡張子	保存内容	利点
OBJ （Wavefront）	3Dオブジェクト マテリアル	3D物体のみで容量が軽い。
FXB （Maya=AutoDesk）	3Dオブジェクト マテリアル リグ（骨格）	アニメ付きの3D出力
STL	3Dオブジェクト	3Dプリンター定番

LigthWave3Dなどの3Dデータの使用

過去にLW3Dなどの3D資産がある場合、OBJデータに変換し、Blenderで再利用できる。

LWOをOBJに変換する オンライン フリー – LWO OBJ 変換

⭐ AnyConvは、5つ星のLWOからOBJへの変換ツールです ⭐ 数秒でオンラインでlwoファイルをobjに変換します ✅ ソフトウェアのインストールは不要です ✅ 絶対に無料です ✅ 完…

anyconv.com

After Effect

ボーンアニメの方法

Spark AR

ダウンロード

まずかPCとスマホにSpark ARアプリをダウンロードしておこう。

• PC版「Spark AR」
• スマホブラウザ「Spark AR studio」（Appleストア、Googleプレイストアで、「Spark AR studio」と検索）

解説動画

超初級、耳猫系

フェイスペイント系

パッチ系

レイヤーと背景削除

ナルトコスプレ編（オクルージョン説明あり）

初級編

最低限、下記の通りに操作すれば完成する。作例は「自撮り映像の頭上に3Dエンゼルリングを入れる」というエフェクトを想定しています。なので、事前に前章で作成した「エンゼルリング.OBJ」を用意していますが、ない場合は「適当な絵をほっぺに貼る」程度の適当なエフェクト想定でOK。

アゴに帽子のアゴ紐をつける場合

頭に帽子をかぶせるテンプレートはあるが、顔の部位になにかをつけるには自作が必要。例としてアゴに帽子の紐をつけ、帽子の動きとは独立してトラッキングするようにしてみよう。顎紐付の帽子3Dデータを作ってもいいが、何か喋ったり笑った時に顎紐が動かないととても不自然なので、帽子と独立させた理由がそこにある。

作業手順

テンプレートの蝶ネクタイ顔エフェクト使用を前提とする。（このテンプレにはfaceTracker内にヘッドオクルーダとは別にバストオクルーダも配置され、蝶ネクタイの位置をトラッキングしている）＝参考動画

1. 画面左上のレイアウトiconからPach editerパネルを表示させる
2. アゴ紐の3DデータをAssetsにドラックドロップ
3. それをシーンパネルにドラックドロップ
4. シーンパネルのfaceTrackerの配下にNullオブジェクトを新規追加し、belt（任意）と名称変更し、アゴ紐3Dデータをその中に入れる。
5. beltを選択し、プロパティからpositionの矢印マーク（Pach editer有効化ボタン）をクリックすると、Pach editer編集画面にbeltパネルが表示される。
6. Pach editer編集画面を右クリックしFace landmarksからchin（顎）を選択、Pach editerにchinパッチが追加される。
7. Pach editer編集画面を右クリックし、検索に「add」と入力し、addパッチを追加する。
8. addパッチをクリックしパネル下のセレクタ「Number」を「Vector3」に変更。
9. Pach editer編集画面に左から①faceTracker0パッチ（なければ追加）②chin、③add、④belt、の順に並べる
10. faceTracker0ハンドルfaceからchinに紐をつなぐ。
11. chinとadd（上段）を紐でつなぎ、addとbeltをつなぐ。
12. addパッチの下段に追加したい数値を入力する。（このようにビューパネルで位置調整せず、addパッチ上で行う）

パッチエディタ（java-scriptのnoCodeエディタ）

パッチエディタの参考動画

タップでマテリアル色変更

下の画像を参考にパッチをあてていく。Maximum Count「５」は何色変更できるかの数。Opition Pickerの最大数が5なのでそれ以上は今現在できないと思う。Option Pickerパッチの下側にあるオプションは「Color」に変更を。この例では「leaf_mat」というマテリアルを5色変更する仕組み。カメラ画面冒頭に「タップして変更」というメッセージを表示させるには次章の「カスタムインタラクション」へ。

カスタムインタラクション（冒頭にメッセージ表示）

カメラ起動直後に「口を開けて」「タップして変更」「ウインクして」などの説明を数秒間表示させる方法。（参考動画19:43）

1. 画面上部メニュ「Project」> Capabilities > 右下+ボタン
2. 検索：instructionsをinsert > instructions▼内 Automaticにチェック
3. その下 Custom Instruction 内 Select instructions to use の+ボタンをクリック
4. メッセージのテンプレ一覧から検索：「タップして変更」を選択し、Token文字列をコピー。そしてDone（閉じる）
5. シーンパネルの一番上「Device」を選択し、プロパティーの Custom insturuction のパッチ矢印をクリック
6. パッチエディタに新たに現れたパッチに、さきほどのToken文字列をペースト。
7. パッチエディタ右クリック > Runtime パッチを追加
8. パッチエディタ右クリック > Less Than パッチを追加
9. RuntimeとLess Thanを紐で接続
10. Less Thanを紐で接続の下の欄に「3」入力（3秒表示）
11. 画面左ツールバーのリスタートボタン（くるくるicon）クリックでカメラプレビューで、メッセージを確認できる。

空間にふわふわ物体を浮かせる

これはパーティクル機能で実走できそうだが、現在勉強中。

パーティクルの粒にパラパラアニメを貼る

1. シーンパネルでパーティクルを選択し、プロパティパネル「Material」から「+」ボタンを選択
2. Assetsパネルに追加された新規マテリアルに任意の名前をつける（例：bird_anim_mat1、bird_anim_mat2…、と言った具合にアニメ鳥が複数いる場合は、複数分のマテリアルを作っておく）
3. マテリアル（例：bird_anim_mat1）を選択し、プロパティパネル > Twxture の格子模様のセレクタ▼から「New Animation Sequence」選択。すると、Assetsパネルに「Animation Sequence」フォルダが作られる。（これも複数の鳥アニメがある場合、複数のマテリアル分用意する）
4. Assetsパネル > 「New Animation Sequence」 > animationSequence0（任意）を選択し、プロパティパネル > Duration > New Image Texture から、アニメ画像を（透過PNG）を選択。（これは2コマなら2枚、20コマなら20枚のデータを一度に選択する）
5. ⚠️帽子やお面など3Dオブジェや、フェイスペイントとパーティクルが重なり時にアニメ背景の透過領域に帽子が抜けてしまう。これはパーティクルのマテリアル設定の「Alpha Test > cut off」 を有効化し0%にすれば直る。

パーティクル参考動画

完成したら

SparkARソフトウェア上で人物とオブジェの調整が完了したら、いよいよfacebook、Instagramへのアップロードだが、その前に実機でテストしてみよう。実機テストには下記２つの方法がある。

実機テスト方法

• SparkAR画面左下の「test on device」から send to SNS > facebook > send を選択し、スマホのfacebookアプリに届いた通知のリンク先からテストできる
• スマホにSparkAR Playerアプリを入れ、PCとケーブルで繋ぎ、そのスマホアプリから閲覧テストできる

facebook、Instagramへの申請

テストが完了したらいよいよプラットフォームへの申請だ。センシティブな表現がないか、facebookなどにより数日間審査されるようだ。申請方法もSparkARから自動的にブラウザが立ち上がり申請画面となる。

申請方法

1. SparkAR画面左下の「Export & Upload」を選択
2. send to app > facebook, Instagram > send の順で選択（fb、inst両方のSNSアカウントをリンクさせておくこと）
3. エフェクト名（20文字以内）、概要文（2000文字以内）、公開日、公開アカウント選択、などを入力
4. 200px（fbは480px）の正方形アイコン画像を用意し申請ページにアップロードく（デザインの注意点と、公式テンプレートあり）
5. エフェクト使用中の自撮り動画も同様にアップロード

今後の課題

ひとまず、上記のような一番簡単な方法でSparkAR HUBに公開成功した（Instagramは2日ほどで許可、facebook側は2週間かかりそう）。ここからは中級、上級レベルの作り方に挑戦しなくてはだ。それは下記のような課題になる。

• タップするたびにマテリアルを変更したい（色変更は、パッチエディターで可能=後述。金色化は不明。）
• 3DCGに動き欲しい（アニメを施したFXB形式で可能。雪や雨、紙吹雪はSparkARのパーティクル使用を）
• ウインク等を表情をフックとしたアクション（これないと退屈だろう）

これらのスキルの習得が課題となる。これからはこれらを個別に章立てて、分かったことから下に解説します。

タップするたびにマテリアルを変更したい

これはSpark ARにとって、タップアクションを設定できるPatch EditorのIntaraction使うらしい。参考動画。

3DCGに動きがほしい

この方法はアニメーション付きのFBXファイルを使う、という方法で解決できそうだ。詳細は下記ブログ参照。

『Spark AR Studio』で作ろう！⑤ | COLE! COLE! news collection

「facebook社」が提供している、「Spark AR Studio」というツールを使って、Facebookで利用できるARコンテンツの制作方法を懇切丁寧に面白く解説します。

colecole.jp

BGMを入れる（M4A）

音源や動画BGMをM4A形式に変換し使用。コンバートはOnline Convert.comなどの変換サイトを使用。

1. 「+add assets」から「audioPlaybackController」を選択（するとassetsに「audioPlaybackController0」が追加される）
2. そのプロパティーパネルから Audio > import from computer > で音源（M4A）選択
3. その下、Playにチェック、（リピートが必要なら任意で）
4. シーンパネル「+add Object」から「Speaker」を検索し追加（insert）
5. Speakerプロパティーの Audio 選択項目を「audioPlaybackController0」に
6. その下でVolumeを調整
7. 必要なら、タップで再生できるようにパッチ編集。（参考動画）

参考

【Spark AR】自作ARフィルターの始め方｜IVAN｜note

今回はオリジナルのARフィルターを作りたい方向けの記事になります。 作成に必要な準備や情報などを出来るだけわかりやすく伝えていければと思います。 そもそもSpark …

note.com