Blenderの3DとSparkAR、AeroでAR公開までのやり方まとめ

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選択 
ペイント的選択c(ホイールで太さ変更)塗り感覚で選択
選択してない面を隠すshift + h 

ツール

コマンド、用語方法、ショートカット補足
ループカット⭐️ctrl + r(ホイールで増減)LWスライス
ベベル⭐️ctrl + b角トリ
追加⭐️⭐️shift + a万能です
面上に面追加⭐️ieとコンビ
延長(extention)⭐️eベベル的
法線に延長⭐️⭐️alt+e 
ナイフkスナップ可
辺に点追加辺の2点を選択 > 右クリック > 細分化 
ループナイフctrl + r自由に緯度赤道分割
ポリゴン細分化ctrl + e > 細分化旗の作成時に
プロポーショナル編集o(ホイールで増減)画面上◎icon
削除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との併用が便利らしい
隠した面を再表示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 
   
   

パーティクルを使ったチョコチップ配置

ローポリゴンのケーキ
  1. 予めパーティクルオブジェクト(チョコチップ)を作っておく。
  2. パーティクルを配置したい面をオブジェクト選択
  3. 画面右下、プロパティパネル > パーティクル(青い三脚icon) > +マーク選択
  4. エミッターボタンをヘアに変更し詳細にチェック
  5. 同パネル内、レンダー欄 > レンダリング方法:オブジェクトに変更し、エミッター表示をON
  6. 同パネル内、オブジェクト欄 > インスタンスオブジェクト:パーティクルオブジェクト(チョコチップ)を選択
  7. 同パネル内、回転の欄(チェックボックスONに)> 回転する軸:ノーマル >
  8. ウェイトペイントモードに(画面左上の画面モード変更ボタンか、パイメニューで)し、チョコチップを集中したい箇所を赤く塗る。
  9. オブジェクトモードに戻り、パーティクルプロパティー頂点グループ欄(下から3番目くらい)で、「密度」セレクタを「group」に変更

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

モデリング前設定

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

モデリング手順

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

たくさんあるスライス方法

スライス方法はたくさんある

  • Knifeコマンド([K])で切る(単純だが、単純すぎて制御がむずい)
  • Knife Projectコマンド
  • Bisectコマンド
  • Intersectコマンド
  • ブーリアンモディファイアー
コマンド方法説明
Knifek単純だが、単純すぎて制御がむずい
Knife Projectスライスしたい本体と、ナイフとなるスライスオブジェ(平面)をオブジェクトモードで選択 > 編集モードに > 関連面を選択(あるいは全選択)> メニュー > メッシュ > ナイフ投影 > F9 > Cut through✅必ず平行投影ビューで
Bisect
Intersect

モデリング逆引き解説

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

オブジェクトを追加

  • 「shift+a」で現れるサブメニューから選択
  • 何かのボタンで数値入力できる

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

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

 

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

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

全てを画面中央にしたい

homeボタン

顔半分を左右反転コピーで編集したい

モディファイア追加 > コピー (編集完了したら適用ボタン)

スライス

ミラー複製

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

原点(ピポットポイント)を移動したい

  1. 3Dカーソルの位置が原点になるようオブジェクトを移動
  2. 画面左上「オブジェクト」ボタン> 原点を設定 > 3Dカーソルを原点に設定

 

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

  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マッピングという方法で、位置調整する方法の動画部分

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

スポンジのテクスチャーを作る例

シェーダーエディターで以下のようなパッチを作る

blenderでスポンジのようなテクスチャーを作る
スポンジのようなテクスチャーを作るためのシェーダーエディター
  1. ランダムな穴を作る(ボロノイテクスチャ – カラーランプ – バンプ – プリンシブルBSDF – マテリアル出力)
  2. 皺々なスポンジ面を作る(ノイズテクスチャ – バンプ – プリンシブルBSDF – マテリアル出力)
  3. この二つを「追加」ノードで合わせ、「バンプ」に繋げる

ボーン(アーマチュア)

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プリンター定番
USDZ3Dオブジェクト
マテリアル
?
AppleがAR QuickLookに採用
GLB3Dオブジェクト
マテリアル
adobe Dimentionから「ファイル > 書き出し > Aero」で描き出せる

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

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

After Effect

ボーンアニメの方法

Spark AR

ダウンロード

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

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

扱えるデータ形式

形式内容補足
OBJ3Dデータ+マテリアル
FXB3Dデータ+マテリアル+アニメ
JPG画像
PNG

解説動画

超初級、耳猫系

フェイスペイント系

パッチ系

レイヤーと背景削除

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

初級編

最低限、下記の通りに操作すれば完成する。作例は「自撮り映像の頭上に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とは逆なので注意が必要だ。

美肌にするARフィルター✨

男女の使用関係なく、インスタフェイスエフェクトには全てこのLUTを当てるべきだろう。一度このフィルター講座に目を通しておくように。

  1. プレビュー顔を時顔に切り替えておく
  2. 画面左上 Scene パネル > +Add Object > Face Tracker 選択(すでにある場合は不要)
  3. Scene パネルに追加された Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「skin」に任意変更)
  4. faceMesh(Skin)が選ばれている状態で、プロパティパネル > Materials +ボタン > 最下段の Create New Material 選択
  5. Assets パネルに追加された Material0 名称を「skin_smooth」と任意変更し、プロパティのShader TypeRetouching に変更(これで美肌完成✨)

さらに本格的にするには補正用LUTチャート画像のインポートを含んだ、こちらの動画をチェック。

SparkARの誕生日ケーキエフェクト事例

誕生日ケーキのロウソクを「ふー」して消すというお馴染みのフィルターはこの動画でマスターしよう。詳細がわかったら、細かく順番をテキスト化します。

Part 1)パーツ配置編

ステップ詳細

  1. ファイルを小さくするためにtinypng.comにアクセスし、画像を一括UPしDL(半分以下のサイズになる。Maru StudioからDLしたアセットには適用済み)
  2. ●アセット読み込み
  3. SparkAR を起動し、使用する画像の内「Assets > Assets > Compression > 01〜07.png」をAssetsパネルにドラドロ
  4. Assets パネルの+ボタンからAnimation Sequencesを選択、Fireに名前を変更しておく
  5. 同様に、「Hat」「Emmitter 1」「Emmitter 2」という名前のAnimation Sequencesを追加
  6. Fire を選択し右上プロパティパネルのTexture > 格子模様icon > 全Fire画像(Fire1〜Fire8.png)選択
  7. Hat を選択し、同じくTexture > 全Hat画像(Hat1〜Hat5.png)選択
  8. Emmiter1 を選択し、同じくTexture > 全 Green-Spritesheet 選択
  9. Emmiter2 を選択し、同じくTexture > 全 Orange-Spritesheet 選択
  10. Assetsパネルに追加された Fire[1-8]Hat[1-5]を選択し、プロパティー >Manul compression > No compression(非圧縮)にチェック
  11. (アセットデータを全てインポートしたこの時点で、一度画面左下の「Upload」ボタンを選択し、容量が大きすぎないかチェックしておく)
  12. Asset パネル > +ボタン > Material を追加し、名前を「OrangeBalloon」とし、プロパティの Shader TypeFlat に変更し、Textuer(の格子icon)から「OlangeBallon.png」選択
  13. 同様に、YellowBalloon、もShader Typeと Textuer を設定
  14. (上のMaterialsの複製=⌘Dで)同様に、TOP、CuteFace、HappyBirthDay、Fire、Hat、Emmiter1、Emmiter2、も Textuer を設定
  15. ●美肌編集
  16. プレビュー顔を時顔に切り替えておく。
  17. 画面左上 Scene パネル > +Add Object > Face Tracker 選択(すでにある場合は不要)
  18. Scene パネルに追加された Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「skin」に任意変更)
  19. faceMesh(Skin)が選ばれている状態で、プロパティパネル > Materials +ボタン > 最下段の Create New Material 選択
  20. Assets パネルに追加された Material0 名称を「skin_smooth」と任意変更し、プロパティのShader TypeRetouching に変更(これで美肌完成✨)
  21. ●パーツ配置
  22. Scene パネル > Face Tracker を右クリック > Add > Plane 選択(追加されたPlane0の名称を「cuteface」に任意変更)
  23. プロパティ > Materials +ボタン > CuteFace 選択
  24. プロパティ > Transformationsで位置調整(Position=X:0, Y:0.02, Z:-0.04 / Scale=X:2.2,Y:1.8,X:1)※数値は一例
  25. Scene パネル > Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「hat」に任意変更)
  26. プロパティ > Materials +ボタン > Hat 選択
  27. Hatポジション決めのために、画面中央左 VeiwBack に変更
  28. プロパティ > Transformationsで位置調整(Position=X:-0.06, Y:0.17, Z:-0.03 / Scale=X:1.5,Y:1.5,X:1/ Rotation=X:0,Y:0,X:30)※数値は一例
  29. ⚠️ここで Hat の一部が切れて見えない場合は、CuteFace設定が邪魔してるので、Assets パネル > CuteFace 選択 > プロパティ > Advanced Render Options > Write to Depth のチェックをOFFに。
  30. Scene パネル > +Add Object > Plane 選択
  31. 追加された Plane 名称を「top」に任意変更(これは FaceTracker 階層の外に配置=以降全て)
  32. プロパティ > Materials +ボタン > Top 選択
  33. プロパティ > Transformationsで位置調整(Position=X:-0, Y:0.18, Z:0 / Scale=X:3.8,Y:1.9,X:1/ Rotation=X:0,Y:0,X:0)※数値は一例
  34. ⚠️ここで Top の一部が切れて見えない場合は、Hat 設定が邪魔してるので、Assets パネル > Hat 選択 > プロパティ > Advanced Render Options > Write to Depth のチェックをOFFに。
  35. ●ここから風船配置
  36. Scene パネル > +Add Object > Plane 選択
  37. 追加された Plane 名称を「blueBalloon」に任意変更
  38. プロパティ > Materials +ボタン > BlueBallon 選択
  39. プロパティ > Transformationsで位置調整(Position=X:-0, Y:0.18, Z:0)※数値は一例
  40. Scene パネル > BlueBallon を複製(⌘d)し、名称をorangeBallonに任意変更
  41. プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:-0.08, Y:0.15, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
  42. プロパティ > Materials +ボタン > OrangeBallon 選択
  43. Scene パネル > OrangeBallon を複製(⌘d)し、名称をyellowBallonに任意変更
  44. プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0.1, Y:0.15, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
  45. プロパティ > Materials +ボタン > YellowBallon 選択
  46. ●ここからケーキとキャンドル配置
  47. Scene パネル > +Add Object > Plane 選択
  48. 追加された Plane 名称を「cake」に任意変更
  49. プロパティ > Materials +ボタン > Cake 選択
  50. プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0, Y:-0.23, Z:0 / Scale=X:3,Y:3,X:1)※数値は一例
  51. Scene パネル > +Add Object > Plane 選択
  52. 追加された Plane 名称を「fire」に任意変更
  53. プロパティ > Materials +ボタン > Fire 選択
  54. プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0, Y:-0.08, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
  55. Scene パネル > +Add Object > Plane 選択
  56. 追加された Plane 名称を「HappyBirthDay」に任意変更
  57. プロパティ > Materials +ボタン > HappyBirthDay 選択するが、Visible を無効にしておく
  58. ●テスト
  59. アバターを変更し、全体パーツの位置を微調整
  60. デバイスを変更し、位置ズレないか微調整(特に、iPadでトリミングミスがないか確認)

Part 2)パッチエディター編

ステップ詳細

  1. 自撮りカメラに変更しておく
  2. Scene パネル > faceTracker > hat を選択 > プロパティ > Interactions > Patch > Create > Object Tap 選択で、Patch Editor にパッチが追加される
  3. Object Tap パッチ右手から触手を伸ばし「Counter」パッチ追加
  4. Assets > Animation Sequences > Hat 選択し、プロパティー > Advanced > Current Frame 黄色矢印icon(パッチ)をクリックすると、パッチエディターに Hatパッチ追加されるので、Couterパッチの右手を伸ばし連結させる
  5. これで帽子をタップで変更するか確認
  6. パッチエディターに 「Screen Tap」パッチ追加
  7. Sceneパネル > fire 選択し、プロパティパネルの Visible パッチ追加、Screen Tap パッチの右上の手と連結(間にSwitchパッチが出現するが、Filip につながった紐を Turn On に繋ぎ直す)
  8. これで、ロウソクタップで火がつくか確認
  9. Scene パネル > faceTracker 選択し、プロパティ > Interactions > Patch > Create > Produser pach 選択でパッチエディターに3パッチ追加される
  10. 3パッチの最右「faceTracer」右上から紐を伸ばし「Kissing Face」選択
  11. Kissing Face 右と、上で配置した Switch パッチ左下 Turn Off を連結(間にPulse パッチ生成される)
  12. Scene パネル > HappyBirthDay のプロパティからVisibleを有効に
  13. パッチエディタ > Kissing Face 右側の Pulse 右上から紐を伸ばし「Animation」パッチ追加
  14. プロパティ > Scale のパッチをクリックし Trandtion パッチ右側に配置
  15. TranditonパッチStart:0,0,1、End:1.5,1.5,1 に変更し、Curveを「Overshoot Out」に変更(これで、ロウソクをフーで消したらHappyBirthDayがフワッと表示される)
  16. パッチエディタ中段の Screen Tapパッチ右上と、AnimationパッチのResetを接続(これで、ロウソクを消しても、タップのたびにリセットされる)
  17. ●風船アニメ
  18. パッチエディタに「Loop Animation」パッチ追加し、右上の紐を出し「Trandition」パッチ追加したら、Start:0,0.18,0、End:0,0.17,0 に変更し、Curveを「Overshoot Out」に変更
  19. Scene パネル > blueBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで Transition と連結(これで、青風船が上から下に動く)
  20. Loop Animation」パッチの Mirroed にチェック入れ
  21. Transition パッチの CurveQuadratic in-Out に変更(これで、青風船が上下をイーズイン・アウト的に繰り返す)
  22. Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:-0.1,0.145,0、End:-0.1,0.155,0 に変更し、Curveを「Overshoot Out」に変更
  23. Scene パネル > orangeBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで 直前に追加したTransition と連結(これで、オレンジ風船)
  24. Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:-0.1,0.145,0、End:-0.1,0.155,0 に変更し、Curveを「Overshoot Out」に変更
  25. Scene パネル > yellowBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで 直前に追加したTransition と連結(これで、黄色風船)
  26. Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:0.1,0.15,0、End:0.1,0.16,0 に変更し、Curveを「Overshoot Out」に変更
  27. ●花吹雪パーティクル
  28. Assets パネル > Textures > Green-Spiresheet 選択し > プロパティパネル > Type > Sprite Sheet に変更後、Rows:5、Columns:5、Sprites:21に
  29. Orange-Spriresheet も同様に
  30. Scene パネル下の「+ Add Object」から「Particle System」選択し、名前を「emmiter1」に任意変更
  31. プロパティ > Materials > +ボタン Emmitter1 選択
  32. その下 Emitter > Type > Plane
  33. Position > 0, 0.3, 0
  34. Rotation > z:180 に変更、Size x0.5, y0.5 に変更
  35. Birthrate > 50, 30 に
  36. Spray angle > 0, 10(xyzすべて)
  37. Speed > 0.24, 40%
  38. その下 Particle > Scale > 0.015, 30%
  39. Lifespan > 2sec, 0%
  40. Spin > 10, 0
  41. Tilt >10, 0
  42. Scene パネル > emitter1 を複製(⌘d)し名前を「emmiter2」に任意変更
  43. ●キャンドル
  44. パッチエディターの Kissing Face 右側 Pulse右上の紐を延長し Animation パッチ追加
  45. Animation パッチ左上(Progress)から紐を伸ばし Transition パッチ追加、パッチパネル下の青いタイプセレクタから「Number」を選択
  46. Scene パネル> emitter1emitter2 のプロパティーから Birthrate パッチをそれぞれ追加
  47. のTransition パッチ左手から emitter1,2パッチにそれぞれ連結し、Transition パッチ > End > 50に、CurveQuadratic In-Out
  48. 先ほどの Pulse パッチ右上から再び手を伸ばし 下段側 Animation > Reset に連結(Part2 7:30)
  49. パッチエディタで Delay パッチを追加、Duration > 2 に変更(ロウソクの日が消えて紙吹雪開始までの時間が少し延びる)、右手を先ほどの Animation パッチ左手2行目 Reverse と連結、ここでもDuration > 2に変更(紙吹雪タイムが長くなる)
  50. ●グループ化
  51. パッチエディタで大量になったパッチ群をわかりやすくグループ化するには、複数選択 > 右クリック > comment でコメント入力(※単純なコメントだとエラーに)、さらに右クリックで枠色変更可
  52. ●スタート画面のテキスト表示
  53. Scene パネル > Device > プロパティ > Custum interaction > 「Tap to try on(タップして変更)」を選択(これで、スタート画面で「タップして変更」のテキストが表示される。これはSparkAR過去バージョンではトークン入力が必要だったが、新バージョンでは不要?)
  54. ●これでほとんどできたが、ロウソクの火がついてなくてもインタラクションが有効になってしまうので、以下のパッチ修正をする
  55. パッチエディタ > Kissing Face と Pulse を繋いでいた紐を切り、その間に And パッチ追加、そこのFirst Boolean についてた紐を下のSecond Boolean に繋ぎ直す
  56. HappyBirthDay パッチ群の最左にある Screen Tap パッチを And パッチに近づけ、右上紐を And パッチ左上(First Boolean)に連結、すると間に Switch パッチが現れ自動連結される
  57. And パッチ右手と Pulse 左手を連結
  58. Kissing Face パッチ右手から Delay パッチ追加し、パッチタイプ(パッチ下の青いセレクタ)を Boolean に変更、Duration値を0.05に
  59. Delay パッチ右手と Screen Tap 右の Switch 左手最下 Turn Off を連結
  60. ●効果音(SE)
  61. SparkARはMP3音源を使えないので online-convert.com 等でM4a(rate:44100Hz, mono)変換、画像群と同じAssetsフォルダなどに任意保存
  62. この作例では、「パッピー・バースデー」の掛け声(HappyBirthday.m4a)と、「イェーイ」(Yay.m4a)を使用するため、SparkAR 画面左下 Assets パネルに2音源をドラドロ
  63. Assets パネル上、各音源のプロパティパネルから「Add Multi-Clip Patches」選択、2組のパッチ(4個 x 2組)が追加される
  64. Kissing Face パッチ右の And パッチ右手から Pulse パッチ追加し名称を「Sound」に変更(Sound Pulse になる)
  65. Sound Pulse パッチ右上の手から2音源の各 Multi-Clip Controller パッチに連結
  66. Assets パネル下「+Add Asset」> AR Library > Music and Sound > 検索:Pop > Cork Pop 2 > Import Free、でAssetに「コルク抜き音」風のフリー音源が追加される
  67. これも、プロパティパネルから「Add Multi-Clip Patches」選択、追加されたパッチ一組(4パッチ)を、2音源下に任意配置し、Sound パッチ右上と Multi-Clip Controller パッチを連結

Happy Birthdayのパッチエディター
Happy Birthday エフェクトに使ったパッチエディター全体図。どれがどういった動きになるか、実際に見ながら確認してマスターするしかない。

完成したら

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

この方法はアニメーション付きのFBXファイルを使う、という方法で解決できそうだ。詳細は下記ブログ参照。ただし、単純な移動やジャンプ程度の動きならSparkARのTransformパッチで簡単にできる。関節を使ったキャラクターアニメやはFBXを使い、

2Dイラストの素材を入れる

Assetsに2D素材を登録し、シーンに平面を配置、その平面に2Dのマテリアルを充てる、という手順になる。Aeroと違い画像を直にAR上に置くことはできないが、平面を型抜きする必要はなく、マッピングのような手間はない。詳細は以下の通り。

  1. Assetsに透過PNGをインポート
  2. Assetsパネルに新規Materialsを追加し、プロパティパネル > Texture > PNG読み込み
  3. SenesパネルにPlaneを追加(PlaneTracer > Placer に配置。これは「床」という概念か)
  4. そのPlaneのプロパティーから、②で追加したMaterialsを読み込み、両面に適用にチェック
  5. 拡大や位置を調整
複数の2Dがある場合はレイヤーに注意

複数のPlaneやMaterialsがある場合は、重なり具合によって非表示になってしまうので、レイヤーで調整すること。

ぴょんぴょん飛び跳ねるボール

パッチエディタで下記設定

  1. Loop Animationパッチを追加し、Loop animationのMirrored(反復)にチェックマーク
  2. その右にオブジェクトのTransformations > Pisitionパッチを追加(オブジェのプロパティーから➡️ボタンでTransitionパッチが追加される)
  3. Transitionパッチの開始点と終点座標値を入力し、Curveを「Cubic Out」に
  4. 飛び跳ねスピードは Loop AnimationのDurationで調整(小さいほど速度UP)

マーカー上にオブジェクトを配置する

ARマーカー
このような単純なマーカーはAeroでは大丈夫だがSparkARでは反応しないので注意。

Aero同様にSparkARでもマーカーは「Fixed target tracker」と呼び対応している。方法は以下の通り。

  1. SparkARで新規プロジェクトから「Blank Project」(何もない標準テンプレート)を選択
  2. Sineパネル下部の追加+ボタン「Add Object」から「Fixed Target Tracker」選択
  3. Fixed Target Tracker」をのプロパティーから「Textuer」で、マーカーとなる画像を選ぶ(マーカー画像は単純すぎる画像だとトラッキングエラーが起こりやすいので注意)。これでAssetsパネルに画像が読み込まれる。(先にAssetsに読み込んでもOK)
  4. マーカー上に表示する3DオブジェクトをAssetsに読み込ませる(2DならPlaneにテクスチャー充てしておく)
  5. その3Dオブジェクト(2Dの場合はPlane)を、Sineパネルの「Fixed Target Tracker」の中にドラックドロップ。
  6. 位置や大きさを調整し、名刺など床においたマーカーの場合はRotetionのX軸を+90度回転
  7. テストリンク共有、または公開
  8. マーカーと同じ画像上に3Dオブジェクトが浮かびあがり完成
SparkARでの名刺マーカーには90度回転を

Aeroと違い、マーカーターゲットマーカーを回転することができないSparkARでは、オブジェクト自体を90度回転することで対応する必要がある。この点要注意だ(上記、ステップ⑥参照)。

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プロパティに用意されているが、プレビューで合わせても実践でずれていた

参考

Adobe Aero

AdobeのARオーサリングソフト「Aero」について。SparkARとの使い分けだが、両者はっきりとした役割がありその用途を見定めて二つをわけて使うことが重要。

システム要件

iOS 13 以降で、A11 プロセッサー以上の端末が必要。詳細は以下の通り。

  • iPhone 8+ 以降
  • iPad および iPad mini 第5世代以降
  • iPad Air 第3世代以降
  • iPad Pro 第2世代(2020年春発売)以降

特徴や不具合

  • ダンスなどリグアニメにも対応(3Dソフト側で要入力)
  • Photoshopなどの平面データにも間接つけ(画像のセンターがアンカーポイントになる)
  • 2020年現在、iOS版(iPhone, iPad)しかない(2021年にPC版正式リリース)
  • JPGやPSD、GIFなどの画像データ扱えるが、2020年12月現在、iPhone11PROでのAR表示の動作が不安定。3Dデータのほうがなぜか安定している。

インポートできるデータ形式

  • AIはSVGに変換すれば可能(レイヤー統合される)⚠️Adobe公式ガイド
  • PSDならレイヤーを保持したままインポート可能だがCC2020バージョン級の「ファイル > 書き出し > Aero」でエクスポートしないとレイヤーが強制統合されてしまうようだ。 ⚠️adobe公式ガイド
  • レイヤー名が英語でないと落ちやすい?

読み込み可能なファイル形式一覧

項目形式補足
2DJPEG/JPG
Photoshop 形式(PSD/PSB)
PNG
SVG
TIFF/TIF
GIF
CC2020のソフトでAero書き出しであること
オーディオWAV
MP3
3DAero に直接読み込むことができる 3D ファイル形式:
GLB(GLTF バイナリ形式)
3D(zip)OBJ(MDL または MTL マテリアルを使用)
Collada(DAE)
3DS
FBX(ガイドラインに従ってファイルが準備されている場合にサポート)
PNG シーケンス(番号順)
3Dモデル+テクスチャ+アニメが1つにzip化されている場合に限る
参考:Adobe公式/サポートされているファイル形式

AeroにAi動画を表示させる方法を考える

  • AiデータをDimentionで開き、GLBに書き出す(ファイル > 書き出し > Aero
  • 要検証】Dimentionで間接つけられるか?
  • 要検証】Dimentionでアニメつけられるか?
iOSは標準でAR表示できる

⚠️2020年現在、Android未対応!(ちなみに、AppleAR Quick lookという仕様で、USDZVECTARYサイトでこの形式に変換可能)という3Dデータ形式をWebサイトに配置すればiOS標準AppやSafariでAR表示できる)

HTMLへの実装は簡単で、rel属性でAR用のリンクであることを宣言し、リンク先をUSDZファイルに、静止画をサムネイルとして指定するといい。

<div class=”gallery”>

<div class=”gallery-item”>

<a rel=”ar” href=”/images/ar_date.usdz“><img src=”/images/tumbnail.png“></a>

</div>

</div>

参考サイト:https://alaki.co.jp/blog/?p=2967

画像アンカーに向いてない画像を知る

Aeroでは、3Dオブジェクトを配置する場所を①サーフィエス(地面)②マーカー、の二つに分けている。この「マーカー」、QRコードの様なタグをよく目にするが、QRコードのようなバーコードタイプでなくてもよく、かといって、ロゴのようなマークが適していると想像しがちだが、そうでもない。マーカーに適した画像というのがあるので下にあげた。

⭕️アンカーに適している画像

  • コントラストがはっきり
  • で囲まれている
  • 特徴点が多くシンプルすぎない

❌アンカーに適さない画像

  • コントラストが弱い
  • グラデーションやパターン
  • シンプル

COCOAR

アートや表現としてではなく、完全にARを企業宣伝用として売り出りだしているプラットフォームがこのCOCOAR(ココアル)だ。クロマキーやebookなど、意外と色んなメディアに対応しているが、発信者は有料である時点で他のプラットフォームとは別物。

COCOARのポジション

CG素材やインタラクションなど、素材や動きはユーザー側が全て仕込む必要があり、COCOARは「決められた場所タグに、ただ表示するだけ」という立場。手軽でシンプルだが、この中で唯一有料で、しかも20コンテンツ制限(20のシーンのみ保存可)がある点に注意。

料金プラン

とても分かりにくいし、肝心の金額は「お問い合わせください」となっている。知っている人に聞くと、一番手軽な「スイートプラン」で月額10〜20万ほど…。小さな会社には無理だろう。オプションやプランの比較は下記リンク先へ。

ARプラットフォーム比較表

比較SparkARAeroココアルWebAR総評
プラットフォームInstagram
facebook
AeroCOCOARSafari
Chrome
Aero側のがプラットフォームに縛られず自由だが、プラットフォームを持たないことがデメリットとも。例えば、SparkARにはInsta LIVEなどの生配信ができ、多くのファンに同時発進できるなど。
扱える3DOBJ
FBX
GLB
OBJ*
DAE*
3DS*
FBX*
OBJ*Aeroは主にzipで圧縮されていること
扱える動画PNGシーケンスPNGシーケンス
扱える画像JPG
PNG
JPG
PSD*
PSB
PNG
SVG
TIFF
GIF
*AeroでPSDを扱えるといっても、CC2020以上でAero書き出し保存しないとNG
扱える音声M4AWAV
MP3
マーカー追跡
顔追跡SparkARはフェイスエフェクトに多くの重点が置かれSNS向き
手追跡
CG素材Spark内MixamoAero側は外部サイトMixamoからDL。インテリアや人体まで豊富。
CG動作移動
回転
Adobeはダンスや格闘など数多くの人体モーションデータを公開中で直接Aeroに飛ばせる(エクスポートすればSparkARでも利用可)(Photoshopなどの平面データにも間接をつけられOK)
インタラクションコードノーコードプログラミングでわかりやすいが、それぞれ特色があり、SparkARはブレインマップ型、Aeroはダイアログ型だ。
GPS認識
時刻・期間認識
特定の場所、時刻、期間のみ表示するなど、営業向けの機能
スタンプラリー
くじ引き
これらの機能が揃ったCOCOARは国内イベントに向いてる仕様。
プッシュ通知ARバナーの表示のクリックによってユーザーにプッシュ通知できる機能。
アクセス解析
使い方SNS用と明確一般向け営業向け閲覧のみSparkはfacebookかInstagramのフェイスカメラアプリの使用が前提なので、SNSがないと使えない。対して、AeroはAdobeCCクラウド経由なので、保存すればURLを通してビューワーアプリなしで閲覧?できる(⚠️要確認)。

WebAR

これまでのARビューワーはAdobe Aeroやfacebook、Instagramなどのプラットフォーム(アプリ)に依存したARだが、それだとアプリのないユーザーに向けてARを発信できない。AR名刺や、AR年賀状といった、万人向けに用途にはアプリに依存しないインターネットブラウザを閲覧アプリとした「WebAR」の特徴を知ろう。

WebARの特徴

  • Safari、Chromeで閲覧
  • 移動、回転、速度くらいは簡単に実装
  • FBXなどの関節アニメは不可?
  • OBJ+マテリアル
  • カスタムマーカー
  • プリミティブ3D呼び出し
  • 3Dテキスト(英語のみ)
  • HTMLベース

用途例

ブラウザ閲覧できるので様々な用途で使える。例えば…

  • 名刺
  • デジタルトロフィーやバッジ

マーカーの種類

AR.jpが、2020年8月のアップデートにより①通常マーカー(Marker Based)と②イメージ(Image Tracking)の2種類に増えた。これによってAdobe AeroやSparkARのような自由な画像のマーカーに対応しマーカーについては足並みを揃えたが、WebARは読み込みに時間がかかるそうだ。

AR.jsのブラウザ版

ノーコードで、ロケーションベースとマーカーベースARができるらしいが、まだ試していない。

AR名刺を作る

ここで、一番基本的な事例としてWebARを使った名刺を作ると仮定して実例を紹介します。HTMLサイトを作る負担があるWebARは、不特定多数に同じものを見せる名刺にとても向いている。作るものは以下の通り。

ここで目指すAR名刺

  • オリジナルの3Dオブジェクトを利用(A-Frameだけでもある程度プリミティブあるが)
  • カスタムマーカーで表示
  • 名刺でARを表示

WebARの作りに必要なもの

必要なもの説明導入方法
A-FrameGit HUBWebVRを手軽に扱えるライブラリ。パーティクルやゲーム性といった動きを広くカバーし、マーカーベース、ロケーションベースにも対応しているのでAR名刺に適しているHTMLのheadにaframe.min.jsへのリンクと、body内に3Dオブジェクトとマテリアルへのリンク、配置座標を追記(後述)
AR.jsA-Frameを使用するJavaScript。HTMLのheadにaframe-ar.jsへのリンクを追記(後述)
OBJ、MTL3Dオブジェクトとマテリアル(FXB非対応任意の階層に置き<a-assets>でパス指定
マーカー画像+pattカスタムマーカージェネレーター使用しpattデータを生成。imageとpattの2つをDL。<a-marker type=’pattern’ url=’mrk/pattern_logo.patt’>タグにマーカーimageとpattを任意パス指定(pattだけでよい)。テストしたいだけならデフォルトの<a-marker preset=”hiro”>としhiroマーカーを使う。

導入手順(下記HTMLコード参照)

  1. 3Dオブジェクト(obj)とマテリアル(mtl)を、「…image/3d/object.obj、…image/3d/material.mtl」等に保存
    ▼ 以下index.html内 ▼
  2. a-framear.jsの両ライブラリリンクを<script>タグで埋め込む
  3. <a-scene>タグに、embedタグをいくつか入力
  4. <a-assets>タグに、objmtlへのリンクを入力
  5. <a-obj-model>タグに、ARオブジェクトの位置とか大きさを指定する

HTMLコード例(2つのマーカー使用)

このコード例は、「ar」フォルダにフラットに格納されているが、本来はオブジェクト別に格納すべきだろう(作例ではlaurel、cook、の二つのオブジェクトとマテリアル使用するので「laurel」と「cook」のフォルダを用意し格納すべきだが、チュートリアルとして見にくいのでこのようにした)。

<!DOCTYPE html>
<head>
  <!-- スクリプトの読み込み -->
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin: 0; overflow: hidden;'>

<!-- シーンの追加とデバックUIを非表示 -->
<a-scene embedded arjs="debugUIEnabled:false;"> 
   
    <!-- ① OBJファイルを読み込み -->
    <a-assets>
        <a-asset-item id="laurel-obj" src="./ar/laurel.obj"></a-asset-item>
        <a-asset-item id="laurel-mtl" src="./ar/laurel.mtl"></a-asset-item>
        <a-asset-item id="cook-obj" src="./ar/trp_cook.obj"></a-asset-item>
        <a-asset-item id="cook-mtl" src="./ar/trp_cook.mtl"></a-asset-item>
    </a-assets>

  <!-- ② hiroマーカー -->
  <a-marker preset="hiro">
    <a-obj-model id="sample" src="#cook-obj" mtl="#cook-mtl" position="0 0 0" scale="0.05 0.05 0.05" rotation="0 0 0">
      <a-animation attribute="position" to="0 0.2 0" direction="alternate" dur="1000" repeat="indefinite"></a-animation>
    </a-obj-model>
  </a-marker>

  <!-- ③ 自作マーカー -->
  <a-marker type='pattern' url='./ar/pattern.patt'>
    <a-obj-model id="sample-2" src="#laurel-obj" mtl="#laurel-mtl" position="0 0.1 0" scale="0.5 0.5 0.5" rotation="0 0 0">
      <a-animation attribute="position" to="0 1 0" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
    </a-obj-model>
  </a-marker>

  <a-entity camera></a-entity>
</a-scene>

</body>
</html>

A-Frameのタグの紹介

A-Frameのタグのオプション

a-scene:a-frameの最初に書くやつ

a-assets:オブジェクトやマテリアルの読み込み

a-asset-item:オブジェクトを指定

a-marker:起点となるマーカー。preset=hiroで、デフォルトのhiroマーカー(このページにも載せたやつ)が認識の対象になる

a-obj-modela-asset-itemで読み込んだリソースを、これで表示。大きさとか位置を指定する。

a-text文字オブジェクト ⚠️日本語不可

a-entity:なんか汎用性高いやつ。よくわかんないけどWebカメラ使うのに用いてる

a-animation:単純な移動や回転アニメ、リピート、速度などが指定ができる

カスタムマーカーがうまく読み込まれない?などのエラーが出る場合

HTMLのエラーと同じだが、閉じタグがないなど単純な誤字でバグるので注意。

ここまでで参考にしたサイト

AR名刺の参考サイト

カスタムマーカーとオリジナルOBJを両方同時に内臓している名刺のチュートリアルは見当たらないが参考として。

開発プラットフォーム

料金参考

Adobe Character Animator

ついでだが、Adobeの2D版VtuberのようなリップシンクPCソフトウェアである「Adobe Character Animator(Ch)」についても触れておく。

AfterEffectとの違いを抑える

AfterEffect用にIllustratorでキャラクターデータを作る方法と、Character Animator用にデータを作る方法は下記の通り若干違うので注意が必要。

操作AECh
レイヤー構造第1階層のみレイヤー活かせるが第2階層以下は統合されるので間接のあるパーツはすべて第1階層に配置。(レイヤー統合する必要はない)レイヤーは複雑でもよいが+Face、+Left arm、+Left Eye、+Nose、など独立したレイヤーには+をつけ、関節の先には+付けない。
グループ化
インポート方法「ファイル >読み込み > ファイル(⌘i) > コンポジション・レイヤーサイズを維持 > 読み込み」でプロジェクトパネルに表示されたコンポジションをダブルクリック。
間接設定アンカーポイントツールで、間接アンカーポイントを軸に移動。親子関係を連結。事前に「+」や「+Face」などの決められたレイヤー名をAiに付ければ自動的に間接が付く。

用語解説

  • スワップセット
    トリガーパネルの中で、それぞれ排他的なトリガーを作る際に利用するフォルダのようなセット(左右の向きを変えるセットや、目の表情を変えたい時などに)

オリジナルキャラクターの作り方

Chで制御する前に、オリジナルキャラクターが必要だ。サンプルキャラで手軽に作りたければ、Chにプリインストールされているいくつかのデフォルトキャラクターを利用可能だ。オリジナルキャラクター作りには、Adobe Illustratorを使う方法とPhotoshopを使う方法がある。それぞれ好きなソフトウェアで作る。

Illustratorでのキャラ作成手順とルール

Adobe Illustratorを使ったオリジナルキャラクターの作り方と、あとでChに読み込んだ際に自動割り当てされるためのデータ作成ルールは以下の通り。

  1. キャラ名をあてたルートレイヤーの中に、「Head」「Body」の2レイヤーを作る
  2. Headの顎あたりに点を打ち名前を「Origin」とする
  3. 独立(+マーク)が必要なパーツは基本的に、キャラ名眉毛(Left Eyebrow、Right Eyebrow)、(Left Eye、Right Eye)、(Nose)

Character Animatorでの作業

  1. 新規プロジェクトを作成し、任意の作業用フォルダを指定
  2. 右上カメラ・マイクパネルから「基本姿勢を設定」(姿勢を正しくカメラに向けること)
  3. 左上プロジェクトパネルにAIデータをドラドロし、キャラデータ読み込み
  4. プロジェクトパネルから新規シーン(カチンコマーク)作成
  5. Bodyを選択し、足のかかとにピン打ち(これで足が固定される)

3View(斜め角度つけ)の方法

正面と同じように、斜め角度を作るには、角度の数だけレイヤーが必要になる。(下図参照)

キャラクターのレイヤー構造
Ninjaキャラクターのレイヤー構造が参考になる

リプレイ(動作保存)

下記のいずれかの方法で動作のパターンを保存できる。2つ以上の動作がある場合はタイムラインの両端をイージーイーズしておこう。

  • ドラッグで動作させた様子を録画し、そのタイムラインを右クリック > 「リプレイ及びトリガーを作成」

別録の音声データでリップシンク

  1. 音声をmp3、WAVに変換
  2. プロジェクトに読み込み(ドラックドロップでもOK)
  3. タイムラインに配置しアバターと重ねる
  4. 音声を選択した状態で メニュー > タイムライン > シーンオーディオからリップシンクテイク計算

動画の書き出し

  1. タイムライン上でIn、Out(半透明のバー)で尺を設定
  2. ファイル > 書き出し > Adobe Encorder経由で 選択(⌘M

背景の入れ方(グリーンバックを入れる方法)

  • プロジェクトに背景画像を読み込み、シーンにドラドロ
  • グリーンバックの場合は、グリーンの背景画像を用意し、上記と同様に
  • アルファチャンネル付きでAdobe Encorderに書き出すこともできる(ファイル > 書き出し > アルファを含んだAdobe Encorder…)

ビデオチャット中のLIVE合成

  1. 必要なアプリ:Adobe Ch、(ZoomやLINE等の)ビデオチャットソフト、OBS StudioOBS Virtual Camera
  2. Adobe Ch側でもしグリーンバックがあれば非表示に
  3. Adobe Chで、ストリームモードにしライブストーリミングボタンをON
  4. OBS側で、シーンパネルに「画面キャプチャ」追加(+ボタン)
  5. OBS側で、シーンパネルに「サイフォンクライア」選択し、「ソース」選択を「Adobe Charactor Animator」に、「透過を許可」をONに
  6. 適当な大きさに調整
  7. OBSメニューの「ツール」から「OBS Virtual Camera」選択
  8. ビデオチャットソフト(LIEN等)のカメラ設定で「OBS Virtual Camera」選択

Illsutrator の場合

  1. Adobe Illustratorでキャラクターデザイン(AfterEffectに読み込むデータはグループ化せず、第1階層のみのレイヤーのみAEに反映され、それより下は統合される)
  2. AIデータのまま(Ch)に読み込み可能(レイヤーも活かされる)
  3. Photoshopに書き出したい場合、ファイル > 書き出し > Photoshop PSD > レイヤー有効ON

項目内容補足
レイヤー構造維持
レイヤー名Faceなど、決められたレイヤー名でそうじゃなくても手作業でインポートできるが、決められた英語のレイヤー名をつけると、自動的に全身ボーンが付き作業時短になる
書き出しPhotosop⚠️全レイヤーを可視にしておくこと
ファイル > 書き出し > Photoshop PSD > レイヤーを保持ON
After EffectAEにドラドロだが、AIデータのレイヤーを要フラット化

Riderセンサーについて

2020年春のiPad PROから搭載された次世代空間認識センサー「Rider」に対応した端末はどれかを知り、購入検討の参考に。Riderとは物体同士の距離を計測できる特殊な「目」で、それができるとオクルージョン(3D物体と現実物体動詞の前後関係を理解し自然な共演が可能な処理)をリアルタイムで処理できる。

iPad 2020春iPad PRO 2020春iPhone 11 PROiPhone 12 PRO(& Max)
Rider⭕️⭕️
M1チップ

この記事を書いた人

生活技術

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