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

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

このページはMacOSを使用を前提とした操作説明です

WindowsPCの場合は、マウスホイールの操作や、ショートカットキーが多少違うかもしれませんが、大きい違いはありません。

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

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

ゴールを決める

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

1段階)単純表示

  • 3Dの王冠をが自撮り映像の頭上に表示
  • 3Dのメダルを自撮り映像のに表示

2段階)アクションで表示

  • ウインクで王冠表示
  • タップでゼッケン表示

3段階)アニメ

  • 顔の周りに3D回転アニメ
  • 手のひらに3Dトロフィーをパッチ表示

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

必要なツール

  • Blender
  • Spark AR

作業内容とツール一覧

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

作業ツール製作物
3Dモデリング(ObJデータ)Adobe Dimention
Blender
月桂冠

メダル

トロフィー

ロゴ

キャラクター

3DアニメAdobe AfterEffect

BlenderでFXB書き出し❓

ランニング

キャラ表情

頭の上、胸の前に3DCGSpark AR 
手の上に3DCGSpark 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

Blender
統合型3DCGソフトウェア「Blender」はオープンソースのフリーウェア

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

blender LOGO

Blender制作の流れ

ここではARモデリングのみの用途としてまとめ

AR用の3Dオブジェクトを作るだけなので、レイアウトやアニメーションは使用せず、ここでは以下のモデリング作業だけを内容まとめています。アニメや静止画など、ARモデルと関係ない分野ついては、後で紹介する動画のチャンネルをご参考に。

  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万能です
面上に面追加⭐️ieとコンビ
延長(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で回転複製⭐️
回転体(スクリュー)これも回転体だが、上記スピンと違い多層的でモディファイアであること
プロパティ > モディファイア > スクリュー
参考
キーフレーム追加iOBJ選択状態で
レンダリングF12 
法線確認画面右上「ビューポートオーバーレイ」> ジオメトリ > 面の向き(で確認)青(外向き)
赤(内向き)
法線反転画面左上「メッシュ」 > ノーマル > 反転 
選択した面を隠すhVertex 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(これで擬似マージ状態に)

モデリング逆引き解説

多機能すぎてどれをどう使えばいいかわからない。さっと作りたい時のための逆引き説明は以下の通り。

花びらを回転コピーでさくっと複製したい

  • ツール > スピン(spin)> 複製をONに。(OFFの場合回転体になる)
  • ⚠️うまく回転軸が定まらず要研究。習得までは、画面上側「トランスフォームポポットポイント」(バツ丸icon)から軸選択が要?
  • インスタンス複製を使用(参考ページ

 

選択オブジェクトを画面中央にしたい

オブジェクトを選択し shift + c(3Dカーソル中心移動)?
この方法でいいのかは不明。

全てを画面中央にしたい

homeボタン

ミラー複製

  • 右下パレット>スパナマーク>モディファイアを追加>ミラー>軸にチェック>適用ボタン
  • この適用を押すまでミラー編集が続く

 

ベジェ線に沿って押し出し

  1. ベジェや、NURBS円、などの線状オブジェクトを追加、または選択(⚠️ポリゴンでは不可)
  2. 右下プロパティオブジェクトデータ(緑のペジェicon)>ジオメトリシェイプ深度>で太さ調整(例:0.001 m)
  3. 右下プロパティオブジェクトデータ(緑のペジェicon)>ジオメトリベベル解像度(Resorution)で角数調整(例:1)
  4. 左上メニューオブジェクト変換(convert to)>カーブからメッシュに変換(mesh from curbe)

面を作る

  1. 「ctrl + 右クリック」を繰り返し面作成
  2. 全ての点を選択しfキーで面生成
  3. alt + fで面の三角分割

選択オブジェクトだけFXB書き出したい

  1. オブジェクトモードで選択(複数可)
  2. 書き出し > FXB > 保存パネル右のオプション設定で、「選択オブジェクト」にチェックマーク

テクスチャ

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

2種類のテクスチャ設定

  • サーフェイス(基本的なテクスチャ)
  • シェーダーエディター(高度なテクスチャ:旧名ノード)
マテリアルプレビューモードに

マテリアル設定でのプレビューは、画面右上プレビューモードを「ソリッドモード」から「マテリアルプレビューモード」以上に変更すること。

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

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

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

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

テクスチャ座標の微調整

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

SparkARで反映せず

このノードでのテクスチャ座標微調整は、SparkARでは反映されなかった。

Blenderによるテクスチャー微調整
テクスチャー微調整ノードの例
  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ペイント頂点選択vvで選択解除
Wペイント輪投げ選択ctrl + 右ドラッグ 
Wペイント塗り潰しshift + k 
頂点選択解除alt + a 
ボーン位置リセットalt + r + g最後に

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

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

BlenderのIK
正方形の練習用キャラクター3Dにボーン(アーマチュア)を入れ、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から2つ前の関節までを補完)、ポール角度:-90度、に修正
  9. 手ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armatureボーン:HandIK.L。(⚠️これで片手IK完成)
  10. 【ポーズモード】aキーで全ボーンを選択し、位置リセット(alt + r + g)
  11. 【編集モード】IK2つを選択し、右クリックから「左右対称」選択。(シーンパネルでR付ボーン名を確認)
  12. (⑥と同じく)(ポーズモードで)で左右対象コピーされたR側の手IK(HandIK.R)+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
  13. (⑦と同じく)画面右下にボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armatureボーン:ElbowIK.Rを選択
  14. (⑧と同じく)その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-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から2つ前の関節までを補完)、ポール角度:-90度、に修正
  25. (⑨と同じく)足ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armatureボーン:FoodIK.L。(⚠️これで片足IK完成)
  26. 【ポーズモード】aキーで全ボーンを選択し、位置リセット(alt + r + g)
  27. 【編集モード】IK2つを選択し、右クリックから「左右対称」選択。(シーンパネルでR付ボーン名を確認)
  28. 【ポーズモード】左右対象コピーされたR側の足IK(FootIK.R)+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
  29. 画面右下ボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armatureボーン:KneeIK.Rを選択
  30. その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-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. タイムラインアニメを再生
FBX書き出しができず

物理趣味レーションや、波モディファイアなどのアニメは波作りが簡単だが、FBX書き出しができずSparkARによる実用化は諦めた。シェイプキーを使ったアニメにも挑戦したが、シェイプキーアニメもFBX書き出しができず、断念。

カメラ

簡易スタジオ設定

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

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

背景白の簡易ルック設定

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

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

動画をGifアニメに変換(Premiere)

  • ファイル > 書き出し > メディア(⌘ + m) > つまりいつもの書き出しでできる
PremiereのGif書き出しはWordPress表示でスローになる

原因は不明だが、そのようになるので、下のPhotoshopでのGifアニメ書き出しがいちばんいい

静止画を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保存すること)。手順は以下の通り。

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

ペーペークラフト展開図を作りたい時

Windows専用ソフト「ペパクラ・デザイナーが人気だが5000円ほどと高額だし、自分のようなMacOSユーザーにとってはBlenderから直接パスデータ(SVG)を描き出せるBlenderアドオン「Export Paper Model」の方が便利そうなので紹介します。

アドオンをインストールする

  1. ファイル > ユーザー設定 > アドオン、選択
  2. 検索欄に「paper」と打ち込みリストされた「Import-Export: Export Paper Model」にチェックを入れ有効化(左下「ユーザー設定の保存」でblenderの次回起動時から、このアドオンがデフォルト化)

展開図の書き出し方法

  1. ファイル > エクスポート > Paper Model (.svg)
  2. フォーマット: SVG 選択
  3. 任意にファイル名変更( ~.svg )
  4. 右上「Export Paper Model」で保存
  5. SVGデータをAdobe Illstratorなどで開く

のりしろ、番号付きのオプション

  • Create Tabs :糊しろ
  • Create Numbers :辺に番号つけ
エラーが出た場合

N twist polygon(N枚の捻じれたポリゴンがあります)」というエラーにはメッシュ分析」で解決。編集モードで、Nキー > シェルフウィンドウ > 「メッシュ分析」にチェック。タイプは「歪み」に。

参考

参考サイト

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

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

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

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

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

After Effect

ボーンアニメの方法

Spark AR

ダウンロード

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

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

解説動画

超初級、耳猫系

フェイスペイント系

パッチ系

レイヤーと背景削除

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

初級編

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

初心者はテンプレートを使おう

初期起動画面に、帽子やメガネ等、ほぼ全ての用途を網羅したテンプレートが用意されている。初めはこれを使って要領を掴んで、慣れたらテンプレートを使わずに完全自作してみよう。

通常の手順概要(難度:高)

  1. 新規プロジェクト」>「FaceTracking
  2. Add Object」から「plane」選択し「faceTracker」内にドラッグすると顔補足が始まる
  3. カメラプレビューを自分の顔(PCカメラ)にするには左側メニューカメラicomPCカメラ(FaceTimeカメラ)選択
  4. 画面左下Asettsパレットに顔にくっつけたいオブジェクト(作例:エンゼルリング)を追加(Add Assets)する。
  5. オクルージョン設定(メガネの柄のような、顔や頭で隠れる部分の設定)
  6. テスト
  7. アップロード

 

テンプレート使用の手順概要(難度:低)

  1. 新規プロジェクト」>「Head Decoration」(王冠の場合)
  2. 画面左下assetエリアに3Dデータ(OBJ,FXB等)をドラックドロップ
  3. 画面左上操作パネルで動画を停止し、王冠の位置や大きさ調整(画面右上プロパティーパネルで数値調整可能)
  4. テスト
  5. アップロード

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

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

pach editerの完成図
pach editerのサンプル

作業手順

テンプレートの蝶ネクタイ顔エフェクト使用を前提とする。(このテンプレには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 editerchinパッチが追加される。
  7. Pach editer編集画面を右クリックし、検索に「add」と入力し、addパッチを追加する。
  8. addパッチをクリックしパネル下のセレクタ「Number」を「Vector3」に変更。
  9. Pach editer編集画面に左から①faceTracker0パッチ(なければ追加)②chin、③add、④belt、の順に並べる
  10. faceTracker0ハンドルfaceからchinをつなぐ。
  11. chinadd(上段)をでつなぎ、addbeltをつなぐ。
  12. addパッチの下段に追加したい数値を入力する。(このようにビューパネルで位置調整せず、addパッチ上で行う)

パッチエディタ(java-scriptのnoCodeエディタ)

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

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

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

タップで色を変えるためのパッチ
タップで色を変えるためのパッチ

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

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

  1. 画面上部メニュ「Project」> Capabilities > 右下+ボタン
  2. 検索:instructionsをinsert > instructions▼内 Automaticにチェック
  3. その下 Custom InstructionSelect instructions to use+ボタンをクリック
  4. メッセージのテンプレ一覧から検索:「タップして変更」を選択し、Token文字列をコピー。そしてDone(閉じる)
  5. シーンパネルの一番上「Device」を選択し、プロパティーの Custom insturuction のパッチ矢印をクリック
  6. パッチエディタに新たに現れたパッチに、さきほどのToken文字列をペースト。
  7. パッチエディタ右クリック > Runtime パッチを追加
  8. パッチエディタ右クリック > Less Than パッチを追加
  9. RuntimeLess 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%にすれば直る。

パーティクル参考動画

オクルーダーの単独設定方法

オクルーダーとは、メガネの柄のように実際には顔に隠れて表示されない3Dオブジェクトの一部を非表示にする機能。 これをしないと、メガネの柄が顔に隠れず不自然に見えてしまう。難しいと感じたら、テンプレートを使うこと。もし単独で設定したい場合、下の説明を参考に。

オクルーダー
このように、メガネの柄が顔の地平線に隠れるようにするにはオクルージョン設定が必要
オクルーダー設定済みのテンプレートがある

今使っているSparkAR v94からはオクルーダー設定済みのテンプレートがいくつか用意されている。なので、下で紹介しているオクルーダー作成手順を習得しなくても、新規作成時に「帽子」「蝶ネクタイ」等テンプレ使用でOK。

オクルーダーを作成手順(公式ガイドより)

  1. FaceTrackingの子として顔メッシュを作成、シーンパネルのリストの一番上に移動して、FaceTracker直下に配置
  2. 顔メッシュプロパティ(画面右)のEyes(目)とMouth(口)の横にあるチェックをOFF。 これで、オクルーダーが顔全体を覆う。
  3. プロパティで、顔メッシュMaterials(マテリアル)を新規作成し、名前をoccluder_matに。
  4. マテリアルインスペクターで、Shader TypeFlat(※Standardでも出来た)、Opacity(不透明度)を1%(※0%でも出来た)に設定。これでシーンから見えなくなる。
  5. Double Sided(両面)をOFF(頭回転時に顔メッシュ背面露出を防ぐため)。

YukaさんLIVEのオクーディングチュートリアル部分

レイヤーについて

現実と同じように、カメラに近いほど優先して表示される。シーンパネルでもそのように配置するのだが、必ずしもそういう位置に置けない時がある。そのためにシーンでの前後関係とは別に「レイヤー」パネルが用意されている。

下のレイヤーほど後で描画される

レイヤーでは、シーンの前後とは関係なく、上から下に描画処理される。つまり一番下が「一番前」に見えることになる。この点、Photoshopとは逆なので注意が必要だ。

完成したら

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

実機テスト方法

  • 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. エフェクト使用中の自撮り動画も同様にアップロード
申請前には美容院に

アイコンに顔を合成する場合は自分の顔であることが原則だし、サンプル動画にも顔が映ることになる。オブジェクトだけのエフェクトならセルフィー動画は不要だが、顔エフェクトなら製作者本人の顔出しは避けられないだろう。申請の前に床屋、美容院にいく必要があり、女性の場合は、お化粧も考えなくてはならず、申請直前は予想外に緊張感がアップする。

アイコンデザインの注意点

  • デザインは最も外側の緑の線内に収める
  • デザインのほとんどは、赤い円に収める。
  • 顔はテンプレートに自分の顔のみを使用する(他の人の顔はNG)
Spark ARのiconテンプレート
Spark ARのiconテンプレート

データ仕様

  • PNG、JPG
  • レイヤー統合
  • 角丸がなく、正方形
  • sRGB
  • 最小200pxの正方形(fbは480px)
  • 透明度や、アルファなし
  • 下のInstagramなグラデーションは使用しないこと

テキストについて

あまりにも多くのテキストを含めないように(スマホ画面で読むのは困難)。 単語やロゴを使用している場合、次のようにすること。

  • Instaアカウント名やエフェクト名は含めない(すでにこの情報を表示している)
  • 大きく、明確で読みやすいものに

さらに最適にするには

  • シンプルな形、シャープなライン、鮮やかな色。
  • 細ではなくテーマを表すことに焦点を。
  • 簡単な背景。
  • 効果の本質をとらえ、使用で何が起こるかを伝える
  • スマホで、アイコンが実際のサイズでどのように見えるかをテストする

エフェクト名

20文字以内(数字、スペース、通貨、句読点、その他記号含む)

堅苦しいiconガイドラインだが…

実際は自由にやっているようだ。気にせずサイズ通りにやればいい。

今後の課題

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

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

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

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

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

3DCGに動きがほしい

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

BGMを入れる(M4A)

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

QuickTime PlayerのM4a書き出しはエラーが出る

MacOS使用ならQuickTme Playerソフトの書き出しで「オーディオ」をせんたくすればM4A形式で保存されるのだが、SparkARでエラーになる。上記コンバートサイトでは、レート:44100Hlzモノラル、コーデック:acc、の設定でエラーなかなく利用できた。

  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. 必要なら、タップで再生できるようにパッチ編集。(参考動画
エフェクトと同期できるか?

BGMスピードを調節できるスライダがSparkARのaudioPlaybackプロパティに用意されているが、プレビューで合わせても実践でずれていた

参考

この記事を書いた人

生活技術

忙しい生活をまとめてシンプル。新しいライフスタイルを提案するネットマガジン「生活技術」の編集長です。記事へのコメントはご遠慮なくどうぞ。気になることやご不明な点などありましたらお問い合わせフォームからご連絡ください。