Spark ARとはFacebookが公開しているAR(拡張現実)とフェイスエフェクトが融合したエフェクト開発アプリで、Instagramのストーリーズで公開でき、セルフィーでの顔アフェクトに利用できるもの。LINEスタンプのような将来の流行も感じるし、難しそうだが少しづつ習得していこうと思い、ここにその経過をまとめます。
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書き出し❓ | ランニング
キャラ表情 |
頭の上、胸の前に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制作の流れ
AR用の3Dオブジェクトを作るだけなので、レイアウトやアニメーションは使用せず、ここでは以下のモデリング作業だけを内容まとめています。アニメや静止画など、ARモデルと関係ない分野ついては、後で紹介する動画のチャンネルをご参考に。
- オブジェクトを作る
- マテリアルを定義する
- マッピング
- 書き出し(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 | 万能です |
面上に面追加⭐️ | i | eとコンビ |
延長(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で回転複製⭐️ |
回転体(スクリュー) | これも回転体だが、上記スピンと違い多層的でモディファイアであること プロパティ > モディファイア > スクリュー | 参考 |
キーフレーム追加 | i | OBJ選択状態で |
レンダリング | F12 | |
法線確認 | 画面右上「ビューポートオーバーレイ」> ジオメトリ > 面の向き(で確認) | 青(外向き) 赤(内向き) |
法線反転 | 画面左上「メッシュ」 > ノーマル > 反転 | |
選択した面を隠す | h | Vertex 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 | ||
パーティクルを使ったチョコチップ配置

- 予めパーティクルオブジェクト(チョコチップ)を作っておく。
- パーティクルを配置したい面をオブジェクト選択
- 画面右下、プロパティパネル > パーティクル(青い三脚icon) > +マーク選択
- エミッターボタンをヘアに変更し詳細にチェック
- 同パネル内、レンダー欄 > レンダリング方法:オブジェクトに変更し、エミッター表示をONに
- 同パネル内、オブジェクト欄 > インスタンスオブジェクト:パーティクルオブジェクト(チョコチップ)を選択
- 同パネル内、回転の欄(チェックボックスONに)> 回転する軸:ノーマル >
- ウェイトペイントモードに(画面左上の画面モード変更ボタンか、パイメニューで)し、チョコチップを集中したい箇所を赤く塗る。
- オブジェクトモードに戻り、パーティクルプロパティーの頂点グループ欄(下から3番目くらい)で、「密度」セレクタを「group」に変更
LawPolyキャラクターモデリング
モデリング前設定
- ビューを平行投影で進めること
- マニュピレーター使用(任意):画面右上「ギズモ(ピザicon)」> 移動にチェック入れ
- 透過表示ON(画面右上の透明icon)
モデリング手順
- 正方形のサブディビジョンサーフェースモディファイア適用の頭部から開始
- 頭部の位置にz移動
- 左半分を削除しミラーモディファイア(適用はまだ)に、クリッピングON(これで擬似マージ状態に)
たくさんあるスライス方法
スライス方法はたくさんある
- Knifeコマンド([K])で切る(単純だが、単純すぎて制御がむずい)
- Knife Projectコマンド
- Bisectコマンド
- Intersectコマンド
- ブーリアンモディファイアー
コマンド | 方法 | 説明 |
---|---|---|
Knife | k | 単純だが、単純すぎて制御がむずい |
Knife Project | スライスしたい本体と、ナイフとなるスライスオブジェ(平面)をオブジェクトモードで選択 > 編集モードに > 関連面を選択(あるいは全選択)> メニュー > メッシュ > ナイフ投影 > F9 > Cut through✅ | 必ず平行投影ビューで |
Bisect | ||
Intersect |
モデリング逆引き解説
多機能すぎてどれをどう使えばいいかわからない。さっと作りたい時のための逆引き説明は以下の通り。
オブジェクトを追加
- 「shift+a」で現れるサブメニューから選択
- 何かのボタンで数値入力できる
花びらを回転コピーでさくっと複製したい
- ツール > スピン(spin)> 複製をONに。(OFFの場合回転体になる)
- ⚠️うまく回転軸が定まらず要研究。習得までは、画面上側「トランスフォームポポットポイント」(バツ丸icon)から軸選択が要?
- インスタンス複製を使用(参考ページ)
選択オブジェクトを画面中央にしたい
オブジェクトを選択し shift + c(3Dカーソル中心移動)?
この方法でいいのかは不明。
全てを画面中央にしたい
homeボタン
顔半分を左右反転コピーで編集したい
モディファイア追加 > コピー (編集完了したら適用ボタン)
スライス
ミラー複製
- 右下パレット>スパナマーク>モディファイアを追加>ミラー>軸にチェック>適用ボタン
- この適用を押すまでミラー編集が続く
原点(ピポットポイント)を移動したい
- 3Dカーソルの位置が原点になるようオブジェクトを移動
- 画面左上「オブジェクト」ボタン> 原点を設定 > 3Dカーソルを原点に設定
ベジェ線に沿って押し出し
- ベジェや、円、NURBS円、などの線状オブジェクトを追加、または選択(⚠️ポリゴンでは不可)
- 右下プロパティ>オブジェクトデータ(緑のペジェicon)>ジオメトリ>シェイプ>深度>で太さ調整(例:0.001 m)
- 右下プロパティ>オブジェクトデータ(緑のペジェicon)>ジオメトリ>ベベル>解像度(Resorution)で角数調整(例:1)
- 左上メニュー>オブジェクト>変換(convert to)>カーブからメッシュに変換(mesh from curbe)
フラットシェードにしたい
オブジェクトモード > 左上オブジェクトボタン > フラットシェーディング、で変更でき、スムーズシェーディングに戻すことができる。
面を作る
- 「ctrl + 右クリック」を繰り返し面作成
- 全ての点を選択しfキーで面生成
- alt + fで面の三角分割
選択オブジェクトだけFXB書き出したい
- オブジェクトモードで選択(複数可)
- 書き出し > FXB > 保存パネル右のオプション設定で、「選択オブジェクト」にチェックマーク
テクスチャ
基本としては、基本色やツヤ、金属かどうか、反射具合などの基本的な質感は「サーフェイス」プロパティで設定するが、それ以上のテクスチャマッピングなどの高度の質感についてはシェーダーエディター(旧名:ノード)を利用する(画面左上のビューポートボタンをクリックすると表示される一覧から選択)
2種類のテクスチャ設定
- サーフェイス(基本的なテクスチャ)
- シェーダーエディター(高度なテクスチャ:旧名ノード)
マテリアル設定でのプレビューは、画面右上プレビューモードを「ソリッドモード」から「マテリアルプレビューモード」以上に変更すること。
基本サーフェイス定義の手順
- オブジェクトモードで対象オブジェを選ぶ
- 画面右下プロパティーパネルから「ワールドプロパティ(赤い地球icom)」選択
- 新規マテリアル定義
- ベースカラーを設定(クリックするとカラーパレット表示)
- メタリック(金属感:1.0最大)、
- より詳細には画面上側「Shading」ワークスペースを選択し詳細設定
テクスチャ画像マッピング(シェーダーエディター)
- 対象オブジェ選択
- サーフェイス定義を任意で設定
- 分割された編集画面の1つ(例えばタイムライン画面)の、エディタタイプ(画面左上のエディタータイプ変更ボタン)をシェーダーエディターに変更。(これでプレビューを見ながらマテリアル設定できる)
- シェーダーエディター上で、追加(shift+a)> テクスチャ > 画像テクスチャ > の順で黄土色のノードパネルが追加される。
- そのノードパネルのフォルダicon(開く)でテクスチャ画像を選択

テクスチャ座標の微調整
テクスチャの座標や微調整などは、下の動画を参考に。基本的には、テクスチャに下記4ノードを追加し微調整する。尚、RGB乗算は、カラー > RGBミックス、で行える。
このノードでのテクスチャ座標微調整は、SparkARでは反映されなかった。
- シェーダーエディター上で、追加(shift+a)> テクスチャ > 画像テクスチャ > の順で黄土色のノードパネルが追加した状態で
- 追加(shift+a)> ベクトル > マッピング(紫)
- 追加(shift+a)> 入力 > テクスチャ座標(赤)
- 追加(shift+a)> 入力 > ジオメトリ(赤)
ショートカットキー(UV Editingメニュー)
コマンド | ショートカット | 補足 |
---|---|---|
シーム追加(縫い目) | ctrl + e | |
UVマッピングという方法で、位置調整する方法の動画部分
平面的な位置調整はこれがシンプルにみえる
スポンジのテクスチャーを作る例
シェーダーエディターで以下のようなパッチを作る

- ランダムな穴を作る(ボロノイテクスチャ – カラーランプ – バンプ – プリンシブルBSDF – マテリアル出力)
- 皺々なスポンジ面を作る(ノイズテクスチャ – バンプ – プリンシブルBSDF – マテリアル出力)
- この二つを「追加」ノードで合わせ、「バンプ」に繋げる
ボーン(アーマチュア)
LWではスケルトンと呼んでいたが、blenderではボーン(アーマチュア)と呼ぶ。3DCGのキャラクターアニメーションで必須のスキルとなる。
キューブ人形にアーマチュア挿入方法
マインクラフトのようなLowポリゴンなキューブ人形をまずは作ってみて要領をつかもう。
- 正方形で頭を作りshift+dで複製していく(頭-Head、体-Spine、肩-Sholder、腕-Arm、手-Hand、腰-Hip、太もも-Leg、スネ-Shin、足-Foot)=右側
- 右側パーツを左右反転複製(ミラーモディファイア > オブジェクトモード > 適用 )
- 腰からボーン作り「e、z」でボーン追加していく。(長さ調整は尻尾をgで移動するだけ)。
- シーンパレットで、ボーンの名前を入力
- 右半分のボーンを選択し右クリック > 名前 > 自動リネーム(左右)で、名前語尾にL付け
- 右半分のボーンを選択し右クリック > 名前 > 対称化で、ボーンの左右対称複製
- オブジェクトモードに移り、①正方形、②ボーン、の順に選択し、ctrl + p > 自動のウェイトで、選択。これでボーンが適用される。
- ボーン回転をポーズモード(ctrl + tab)で確認
- ソリッドビューでボーン可視化:ボーン選択 > オブジェクトデータプロパティ(緑の人体icon)> ビューポート > 最前面
- OBJモードで、①ボーン、②正方形、の順に選択し、ctrl + tab でウェイトペイントに入る
- アクティブツールプロパティ(白い道具icon)> オプション > 自動正規化 > ONに、Xミラー > ONに
- ctrl + ボーンクリック、で塗りボーン切り替え(⚠️正方形でなく、ボーンをクリックすること)
- 画面右上「Overlays」(逆三角icon)> ウェイト0 > アクティブON、高等線を表示ON、で初期ウェイトペイントがしやすい(親から子に向かって調整していくのがコツ)
- 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入れ、左に対称コピー、ルートボーン入れ。その手順は以下の通り。

- 肘ボーンを後部にe追加。
- 追加ボーン選択し alt + p で「親子関係クリア」
- そのボーンを後部に頭分移動し、名前を「ElbowIK(任意)」(=肘の向き決めターゲットIK)
- 手ボーンを shift + d 複製・直後に右クリックで移動キャンセルし、nキーでトランスフォーム棚メニューを出し、長さ(Length)を手ボーンの1.2倍サイズくらいにし「HandIK」と名前変更。alt + p で「親子関係クリア」
- 今作った2つのIKを複数選択し、右クリック > 名前 > 自動リネーム(左右)で、名前語尾にL付け
- 【ポーズモード】HandIK + Arm ボーンを選択した状態で、ctrl + shift + c から「インバースキネマティクス」選択。
- 画面右下ボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armature、ボーン:ElbowIK.Lを選択
- その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-90度、に修正
- 手ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armature、ボーン:HandIK.L。(⚠️これで片手IK完成)
- 【ポーズモード】aキーで全ボーンを選択し、位置リセット(alt + r + g)
- 【編集モード】IK2つを選択し、右クリックから「左右対称」選択。(シーンパネルでR付ボーン名を確認)
- (⑥と同じく)(ポーズモードで)で左右対象コピーされたR側の手IK(HandIK.R)+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
- (⑦と同じく)画面右下にボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armature、ボーン:ElbowIK.Rを選択
- (⑧と同じく)その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-90度、に修正
- (⑨と同じく)手ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armature、ボーン:HandIK.R。(⚠️これで両手IK完成)
- OBJモードでボーンを選択し、編集モードに
- (①と同じく)L側ヒザ軸を選択しe延長。
- (②と同じく)追加ボーン選択し alt + p で「親子関係クリア」
- (③と同じく)そのボーンを頭分に移動し、名前を「KneeIK(任意)」(=膝の向き決めターゲットIK)
- (④と同じく)足ボーンを shift + d 複製・直後に右クリックで移動キャンセルし、nキーでトランスフォーム棚メニューを出し、長さ(Length)を手ボーンの1.2倍サイズくらいにし「FootIK」と名前変更。alt + p で「親子関係クリア」
- (⑤と同じく)今作った2つのIKを複数選択し、右クリック > 名前 > 自動リネーム(左右)で、名前語尾にL付け
- (⑥と同じく)【ポーズモード】HandIK + Arm ボーンを選択した状態で、ctrl + shift + c から「インバースキネマティクス」選択。
- (⑦と同じく)画面右下ボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armature、ボーン:KneeIK.Lを選択
- (⑧と同じく)その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-90度、に修正
- (⑨と同じく)足ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armature、ボーン:FoodIK.L。(⚠️これで片足IK完成)
- 【ポーズモード】aキーで全ボーンを選択し、位置リセット(alt + r + g)
- 【編集モード】IK2つを選択し、右クリックから「左右対称」選択。(シーンパネルでR付ボーン名を確認)
- 【ポーズモード】左右対象コピーされたR側の足IK(FootIK.R)+Armボーンをした状態で、ctrl + shift + c から「インバースキネマティクス」選択。
- 画面右下ボーンコンストレントプロパティー(青骨icon)を表示し、ポールターゲット:Armature、ボーン:KneeIK.Rを選択
- その下、チェーンの長さ:2(IKから2つ前の関節までを補完)、ポール角度:-90度、に修正
- 足ボーンを選択し、ボーンコンストレイントプロパティー(青骨icon)から「回転をコピー」を選択。ターゲット:Armature、ボーン:FoodIK.R。(⚠️これで両手両足IK完成)
- 【編集モード】(ここからルートボーン)Hipボーンをshift + d + z で足元に移動複製。
- 【編集モード】人体全8個のIK + Hipボーンを選択し、最後にルートボーンを選択した状態で、ctrl + p 「オフセットを保持」選択
IKの目印をわかりやすく矢印マークに
- 事前に矢印マークなOBJをワールドにペースト(bone_man.blend、IKhaitteru.blend、などのテンプレ使用を)
- IKを選んで、ボーンコンストレイントプロパティー(青骨icon)からカスタムシェイプで矢印マークを選ぶ
歩かせる
- 出力プロパティ(白プリンタicon)で、フレームレート、フレーム数、を決めておく(例:30fps、開始1〜終了30フレーム)
- 画面上部「Animation」フレームを選択、右画面に俯瞰図、右画面に側面図、画面下はドープシートモードで「アクション」を選ぶ
- 【ポーズモード】歩き開始の基本ポーズを作るために、IK動かし位置を決める
- 【ポーズモード】全ボーンを選択(a)し、フレーム位置が0とし、iキーで「位置、回転、縮尺」を選択し、ドープシート0にキーフレームを打つ
- 【ドープシート】0フレーム目をコピー(⌘c)しを30フレーム目にペースト(⌘v)
- そのまま、15フレーム目にタイムラインを移動し反転ペースト(ctrl + shift + v)
重力・物理趣味レーション
後述するが、これらの複雑なアニメはFBX書き出しに対応してない。
はためく旗(風を使う場合)
- 布のはためかない軸部分を指定:編集モードで、軸の上下2点(上2点、下2点)を点選択
- オブジェクトデータプロパティ(緑の三角ポリゴンicon)から、頂点グループ(Vertex Groupe)を+で追加し、割当(Assign)
- オブジェクトモードに移り、物理演算プロパティ(青い二重丸icon)から、クロス(Cloth)を選び、サブメニュー(リストicon)> コットン(or シルク)を選択
- クロスパレット内物理プロパティの品質ステップ数(Quality Steps)を11、空気の粘性(Ari Viscosity)を4.9に
- 同パレット、剛性の引貼・圧縮:せん断:15、曲げ:0.5(例えばの数値なので、任意調整を)
- 同パレット、シェイプ(Shape)の固定グループ(Pin groupe)からGroupeを選択
- 同、コリジョン(Collisions)の品質(Quality):3に(☝️ここまでが旗の材質設定、次から風力設定へ)
- 追加(Shift + a)> フォースフィールド > 風 を選択
- 風の角度をrで調整(r、y、90)、位置を旗の外へ移動(g、x)
- 風のプロパティ(フォースフィールド)で、風邪の強さ(Strength):2000、フロー:10に(例えばの数値なので、任意調整を)
- タイムラインウィンドウを表示し、再生ボタン
はためく旗(波モディファイアを使う場合)
- 平面を作り、細分化(ctrl+e)
- モディファイアプロパティから「波モディファイア 」を選択
- 波の軸をXとし、繰り返しにチェックマーク
- タイムラインアニメを再生
物理趣味レーションや、波モディファイアなどのアニメは波作りが簡単だが、FBX書き出しができずSparkARによる実用化は諦めた。シェイプキーを使ったアニメにも挑戦したが、シェイプキーアニメもFBX書き出しができず、断念。
炎
カメラ
簡易スタジオ設定
初めての人は以下の手順で簡単なスタジオセットを用意しておくとあとで楽だ。
- 追加(shift + a) > カーブ > 円 、で円が追加され、大きさを調整(例:s, -z, 10)
- カメラを選択(または追加)し、プロパティパネルからオブジェクトコンストレイン(二重丸ギアチェーンicon)> オブジェクトコンストレイント追加 > パスに追従(Follow path)選択し、ターゲットを円に
- nキーでシェルフメニューを表示し「アイテム > トランスフォーム」値をすべて0に
- オブジェクトコンストレイント追加 > トラック(Track to)選択し、ターゲットを被写体オブジェクトに、その下の値「先:-z」「上:Y」に変更
背景白の簡易ルック設定
その他ルック設定など、これはあくまでお手軽確認用として。
- ワールドプロパティ(地球儀icon)> 背景白
- レンダープロパティ(プリンタicon) > カラーマネジメント > ビュー変換 > 標準(デフォルトはFilmic)
- この状態で、シェーダーエディターを「ワールド(地球儀icon)」とし、下記設定通りに。「背景」パネル上は、背景色とは別に影響を受けたい色、パネル下は実際の背景色。
動画をGifアニメに変換(Premiere)
- ファイル > 書き出し > メディア(⌘ + m) > つまりいつもの書き出しでできる
原因は不明だが、そのようになるので、下のPhotoshopでのGifアニメ書き出しがいちばんいい。
静止画をGifアニメに変換(Photoshop)
- Photoshopで「ファイル > スクリプト > ファイルをレイヤーとして読み込み」選択し、「参照」ボタンからフォルダを選んでOKボタン
- 「ウィンドウ > タイムライン」を選び、パネル中央の▼ボタンから「フレームアニメーションを作成」選択
- タイムライン右上の小さなハンバーガーメニューから「レイヤーからフレーム作成」選択
- フレームレート値を選択(60fps:0.01666秒)
- タイムライン左下オプションを「無限」に
- ファイル > 書き出し > Web用に保存(従来)選択
- プリセット > GIF128ディザ 選択し
- カラーメニューを「256」に
- 任意で、画像サイズを変更し、保存
adobe Illustratorのパスデータ読み込み
Blenderにはsvgデータを読み込みできる。こうすることでロゴのパスデータ等、adobe AIの資産(ai)を使用できる。3DCGソフトやadobeAEでパスデータを作るのは大変なので、この読み込みはとても助かる(adobe Illstratorでsvg保存すること)。手順は以下の通り。

- ファイル > インポート > SVG
- インポートデータはとても小さすぎるので、サイズを10倍に拡大(⚠️この時、Z軸も含んで拡大すること。でないとZ幅が潰れる)
- 原点がずれているので、オブジェクトモードで 画面左「オブジェクト」> 原点を設定 > ジオメトリを原点に移動 を選択
ペーペークラフト展開図を作りたい時
Windows専用ソフト「ペパクラ・デザイナー」が人気だが5000円ほどと高額だし、自分のようなMacOSユーザーにとってはBlenderから直接パスデータ(SVG)を描き出せるBlenderアドオン「Export Paper Model」の方が便利そうなので紹介します。

アドオンをインストールする
- ファイル > ユーザー設定 > アドオン、選択
- 検索欄に「paper」と打ち込みリストされた「Import-Export: Export Paper Model」にチェックを入れ有効化(左下「ユーザー設定の保存」でblenderの次回起動時から、このアドオンがデフォルト化)
展開図の書き出し方法
- ファイル > エクスポート > Paper Model (.svg)
- フォーマット: SVG 選択
- 任意にファイル名変更( ~.svg )
- 右上「Export Paper Model」で保存
- 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出力 |
STL | 3Dオブジェクト | 3Dプリンター定番 |
USDZ | 3Dオブジェクト マテリアル ? | AppleがAR QuickLookに採用 |
GLB | 3Dオブジェクト マテリアル | 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」と検索)
扱えるデータ形式
形式 | 内容 | 補足 |
---|---|---|
OBJ | 3Dデータ+マテリアル | |
FXB | 3Dデータ+マテリアル+アニメ | |
JPG | 画像 | |
PNG |
解説動画
超初級、耳猫系
フェイスペイント系
パッチ系
レイヤーと背景削除
ナルトコスプレ編(オクルージョン説明あり)
初級編
最低限、下記の通りに操作すれば完成する。作例は「自撮り映像の頭上に3Dエンゼルリングを入れる」というエフェクトを想定しています。なので、事前に前章で作成した「エンゼルリング.OBJ」を用意していますが、ない場合は「適当な絵をほっぺに貼る」程度の適当なエフェクト想定でOK。
初期起動画面に、帽子やメガネ等、ほぼ全ての用途を網羅したテンプレートが用意されている。初めはこれを使って要領を掴んで、慣れたらテンプレートを使わずに完全自作してみよう。
通常の手順概要(難度:高)
- 「新規プロジェクト」>「FaceTracking」
- 「Add Object」から「plane」選択し「faceTracker」内にドラッグすると顔補足が始まる
- カメラプレビューを自分の顔(PCカメラ)にするには左側メニュー>カメラicom>PCカメラ(FaceTimeカメラ)選択
- 画面左下Asettsパレットに顔にくっつけたいオブジェクト(作例:エンゼルリング)を追加(Add Assets)する。
- オクルージョン設定(メガネの柄のような、顔や頭で隠れる部分の設定)
- テスト
- アップロード
テンプレート使用の手順概要(難度:低)
- 「新規プロジェクト」>「Head Decoration」(王冠の場合)
- 画面左下assetエリアに3Dデータ(OBJ,FXB等)をドラックドロップ
- 画面左上操作パネルで動画を停止し、王冠の位置や大きさ調整(画面右上プロパティーパネルで数値調整可能)
- テスト
- アップロード
アゴに帽子のアゴ紐をつける場合
頭に帽子をかぶせるテンプレートはあるが、顔の部位になにかをつけるには自作が必要。例としてアゴに帽子の紐をつけ、帽子の動きとは独立してトラッキングするようにしてみよう。顎紐付の帽子3Dデータを作ってもいいが、何か喋ったり笑った時に顎紐が動かないととても不自然なので、帽子と独立させた理由がそこにある。

作業手順
テンプレートの蝶ネクタイ顔エフェクト使用を前提とする。(このテンプレにはfaceTracker内にヘッドオクルーダとは別にバストオクルーダも配置され、蝶ネクタイの位置をトラッキングしている)=参考動画
- 画面左上のレイアウトiconからPach editerパネルを表示させる
- アゴ紐の3DデータをAssetsにドラックドロップ
- それをシーンパネルにドラックドロップ
- シーンパネルのfaceTrackerの配下にNullオブジェクトを新規追加し、belt(任意)と名称変更し、アゴ紐3Dデータをその中に入れる。
- beltを選択し、プロパティからpositionの矢印マーク(Pach editer有効化ボタン)をクリックすると、Pach editer編集画面にbeltパネルが表示される。
- Pach editer編集画面を右クリックしFace landmarksからchin(顎)を選択、Pach editerにchinパッチが追加される。
- Pach editer編集画面を右クリックし、検索に「add」と入力し、addパッチを追加する。
- addパッチをクリックしパネル下のセレクタ「Number」を「Vector3」に変更。
- Pach editer編集画面に左から①faceTracker0パッチ(なければ追加)②chin、③add、④belt、の順に並べる
- faceTracker0ハンドルfaceからchinに紐をつなぐ。
- chinとadd(上段)を紐でつなぎ、addとbeltをつなぐ。
- addパッチの下段に追加したい数値を入力する。(このようにビューパネルで位置調整せず、addパッチ上で行う)
パッチエディタ(java-scriptのnoCodeエディタ)
パッチエディタの参考動画
タップでマテリアル色変更
下の画像を参考にパッチをあてていく。Maximum Count「5」は何色変更できるかの数。Opition Pickerの最大数が5なのでそれ以上は今現在できないと思う。Option Pickerパッチの下側にあるオプションは「Color」に変更を。この例では「leaf_mat」というマテリアルを5色変更する仕組み。カメラ画面冒頭に「タップして変更」というメッセージを表示させるには次章の「カスタムインタラクション」へ。

タップでオブジェクト変更
カスタムインタラクション(冒頭にメッセージ表示)
カメラ起動直後に「口を開けて」「タップして変更」「ウインクして」などの説明を数秒間表示させる方法。(参考動画19:43)
- 画面上部メニュ「Project」> Capabilities > 右下+ボタン
- 検索:instructionsをinsert > instructions▼内 Automaticにチェック
- その下 Custom Instruction 内 Select instructions to use の+ボタンをクリック
- メッセージのテンプレ一覧から検索:「タップして変更」を選択し、Token文字列をコピー。そしてDone(閉じる)
- シーンパネルの一番上「Device」を選択し、プロパティーの Custom insturuction のパッチ矢印をクリック
- パッチエディタに新たに現れたパッチに、さきほどのToken文字列をペースト。
- パッチエディタ右クリック > Runtime パッチを追加
- パッチエディタ右クリック > Less Than パッチを追加
- RuntimeとLess Thanを紐で接続
- Less Thanを紐で接続の下の欄に「3」入力(3秒表示)
- 画面左ツールバーのリスタートボタン(くるくるicon)クリックでカメラプレビューで、メッセージを確認できる。
空間にふわふわ物体を浮かせる
これはパーティクル機能で実走できそうだが、現在勉強中。
パーティクルの粒にパラパラアニメを貼る
- シーンパネルでパーティクルを選択し、プロパティパネル「Material」から「+」ボタンを選択
- Assetsパネルに追加された新規マテリアルに任意の名前をつける(例:bird_anim_mat1、bird_anim_mat2…、と言った具合にアニメ鳥が複数いる場合は、複数分のマテリアルを作っておく)
- マテリアル(例:bird_anim_mat1)を選択し、プロパティパネル > Twxture の格子模様のセレクタ▼から「New Animation Sequence」選択。すると、Assetsパネルに「Animation Sequence」フォルダが作られる。(これも複数の鳥アニメがある場合、複数のマテリアル分用意する)
- Assetsパネル > 「New Animation Sequence」 > animationSequence0(任意)を選択し、プロパティパネル > Duration > New Image Texture から、アニメ画像を(透過PNG)を選択。(これは2コマなら2枚、20コマなら20枚のデータを一度に選択する)
- ⚠️帽子やお面など3Dオブジェや、フェイスペイントとパーティクルが重なり時にアニメ背景の透過領域に帽子が抜けてしまう。これはパーティクルのマテリアル設定の「Alpha Test > cut off」 を有効化し0%にすれば直る。
パーティクル参考動画
オクルーダーの単独設定方法
オクルーダーとは、メガネの柄のように実際には顔に隠れて表示されない3Dオブジェクトの一部を非表示にする機能。 これをしないと、メガネの柄が顔に隠れず不自然に見えてしまう。難しいと感じたら、テンプレートを使うこと。もし単独で設定したい場合、下の説明を参考に。

今使っているSparkAR v94からはオクルーダー設定済みのテンプレートがいくつか用意されている。なので、下で紹介しているオクルーダー作成手順を習得しなくても、新規作成時に「帽子」「蝶ネクタイ」等テンプレ使用でOK。
オクルーダーを作成手順(公式ガイドより)
- FaceTrackingの子として顔メッシュを作成、シーンパネルのリストの一番上に移動して、FaceTracker直下に配置
- 顔メッシュプロパティ(画面右)のEyes(目)とMouth(口)の横にあるチェックをOFF。 これで、オクルーダーが顔全体を覆う。
- 同プロパティで、顔メッシュのMaterials(マテリアル)を新規作成し、名前をoccluder_matに。
- マテリアルを インスペクターで、Shader TypeをFlat(※Standardでも出来た)、Opacity(不透明度)を1%(※0%でも出来た)に設定。これでシーンから見えなくなる。
- Double Sided(両面)をOFF(頭回転時に顔メッシュ背面露出を防ぐため)。
YukaさんLIVEのオクーディングチュートリアル部分
レイヤーについて
現実と同じように、カメラに近いほど優先して表示される。シーンパネルでもそのように配置するのだが、必ずしもそういう位置に置けない時がある。そのためにシーンでの前後関係とは別に「レイヤー」パネルが用意されている。
下のレイヤーほど後で描画される
レイヤーでは、シーンの前後とは関係なく、上から下に描画処理される。つまり一番下が「一番前」に見えることになる。この点、Photoshopとは逆なので注意が必要だ。
美肌にするARフィルター✨
男女の使用関係なく、インスタフェイスエフェクトには全てこのLUTを当てるべきだろう。一度このフィルター講座に目を通しておくように。
- プレビュー顔を時顔に切り替えておく
- 画面左上 Scene パネル > +Add Object > Face Tracker 選択(すでにある場合は不要)
- Scene パネルに追加された Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「skin」に任意変更)
- faceMesh(Skin)が選ばれている状態で、プロパティパネル > Materials +ボタン > 最下段の Create New Material 選択
- Assets パネルに追加された Material0 名称を「skin_smooth」と任意変更し、プロパティのShader Typeを Retouching に変更(これで美肌完成✨)
さらに本格的にするには補正用LUTチャート画像のインポートを含んだ、こちらの動画をチェック。
SparkARの誕生日ケーキエフェクト事例
誕生日ケーキのロウソクを「ふー」して消すというお馴染みのフィルターはこの動画でマスターしよう。詳細がわかったら、細かく順番をテキスト化します。
Part 1)パーツ配置編
ステップ詳細
- ファイルを小さくするためにtinypng.comにアクセスし、画像を一括UPしDL(半分以下のサイズになる。Maru StudioからDLしたアセットには適用済み)
- ●アセット読み込み
- SparkAR を起動し、使用する画像の内「Assets > Assets > Compression > 01〜07.png」をAssetsパネルにドラドロ
- Assets パネルの+ボタンからAnimation Sequencesを選択、Fireに名前を変更しておく
- 同様に、「Hat」「Emmitter 1」「Emmitter 2」という名前のAnimation Sequencesを追加
- Fire を選択し右上プロパティパネルのTexture > 格子模様icon > 全Fire画像(Fire1〜Fire8.png)選択
- Hat を選択し、同じくTexture > 全Hat画像(Hat1〜Hat5.png)選択
- Emmiter1 を選択し、同じくTexture > 全 Green-Spritesheet 選択
- Emmiter2 を選択し、同じくTexture > 全 Orange-Spritesheet 選択
- Assetsパネルに追加された Fire[1-8]、Hat[1-5]を選択し、プロパティー >Manul compression > No compression(非圧縮)にチェック
- (アセットデータを全てインポートしたこの時点で、一度画面左下の「Upload」ボタンを選択し、容量が大きすぎないかチェックしておく)
- Asset パネル > +ボタン > Material を追加し、名前を「OrangeBalloon」とし、プロパティの Shader Typeを Flat に変更し、Textuer(の格子icon)から「OlangeBallon.png」選択
- 同様に、YellowBalloon、もShader Typeと Textuer を設定
- (上のMaterialsの複製=⌘Dで)同様に、TOP、CuteFace、HappyBirthDay、Fire、Hat、Emmiter1、Emmiter2、も Textuer を設定
- ●美肌編集
- プレビュー顔を時顔に切り替えておく。
- 画面左上 Scene パネル > +Add Object > Face Tracker 選択(すでにある場合は不要)
- Scene パネルに追加された Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「skin」に任意変更)
- faceMesh(Skin)が選ばれている状態で、プロパティパネル > Materials +ボタン > 最下段の Create New Material 選択
- Assets パネルに追加された Material0 名称を「skin_smooth」と任意変更し、プロパティのShader Typeを Retouching に変更(これで美肌完成✨)
- ●パーツ配置
- Scene パネル > Face Tracker を右クリック > Add > Plane 選択(追加されたPlane0の名称を「cuteface」に任意変更)
- プロパティ > Materials +ボタン > CuteFace 選択
- プロパティ > Transformationsで位置調整(Position=X:0, Y:0.02, Z:-0.04 / Scale=X:2.2,Y:1.8,X:1)※数値は一例
- Scene パネル > Face Tracker を右クリック > Add > faceMesh 選択(追加されたfaceMeshの名称を「hat」に任意変更)
- プロパティ > Materials +ボタン > Hat 選択
- Hatポジション決めのために、画面中央左 Veiw を Back に変更
- プロパティ > 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)※数値は一例
- ⚠️ここで Hat の一部が切れて見えない場合は、CuteFace設定が邪魔してるので、Assets パネル > CuteFace 選択 > プロパティ > Advanced Render Options > Write to Depth のチェックをOFFに。
- Scene パネル > +Add Object > Plane 選択
- 追加された Plane 名称を「top」に任意変更(これは FaceTracker 階層の外に配置=以降全て)
- プロパティ > Materials +ボタン > Top 選択
- プロパティ > 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)※数値は一例
- ⚠️ここで Top の一部が切れて見えない場合は、Hat 設定が邪魔してるので、Assets パネル > Hat 選択 > プロパティ > Advanced Render Options > Write to Depth のチェックをOFFに。
- ●ここから風船配置
- Scene パネル > +Add Object > Plane 選択
- 追加された Plane 名称を「blueBalloon」に任意変更
- プロパティ > Materials +ボタン > BlueBallon 選択
- プロパティ > Transformationsで位置調整(Position=X:-0, Y:0.18, Z:0)※数値は一例
- Scene パネル > BlueBallon を複製(⌘d)し、名称をorangeBallonに任意変更
- プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:-0.08, Y:0.15, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
- プロパティ > Materials +ボタン > OrangeBallon 選択
- Scene パネル > OrangeBallon を複製(⌘d)し、名称をyellowBallonに任意変更
- プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0.1, Y:0.15, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
- プロパティ > Materials +ボタン > YellowBallon 選択
- ●ここからケーキとキャンドル配置
- Scene パネル > +Add Object > Plane 選択
- 追加された Plane 名称を「cake」に任意変更
- プロパティ > Materials +ボタン > Cake 選択
- プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0, Y:-0.23, Z:0 / Scale=X:3,Y:3,X:1)※数値は一例
- Scene パネル > +Add Object > Plane 選択
- 追加された Plane 名称を「fire」に任意変更
- プロパティ > Materials +ボタン > Fire 選択
- プロパティ > Transformationsで座標矢印で任意位置調整(Position=X:0, Y:-0.08, Z:0 / Scale=X:0.8,Y:0.8,X:1)※数値は一例
- Scene パネル > +Add Object > Plane 選択
- 追加された Plane 名称を「HappyBirthDay」に任意変更
- プロパティ > Materials +ボタン > HappyBirthDay 選択するが、Visible を無効にしておく
- ●テスト
- アバターを変更し、全体パーツの位置を微調整
- デバイスを変更し、位置ズレないか微調整(特に、iPadでトリミングミスがないか確認)
Part 2)パッチエディター編
ステップ詳細
- 自撮りカメラに変更しておく
- Scene パネル > faceTracker > hat を選択 > プロパティ > Interactions > Patch > Create > Object Tap 選択で、Patch Editor にパッチが追加される
- Object Tap パッチ右手から触手を伸ばし「Counter」パッチ追加
- Assets > Animation Sequences > Hat 選択し、プロパティー > Advanced > Current Frame 黄色矢印icon(パッチ)をクリックすると、パッチエディターに Hatパッチ追加されるので、Couterパッチの右手を伸ばし連結させる
- これで帽子をタップで変更するか確認
- パッチエディターに 「Screen Tap」パッチ追加
- Sceneパネル > fire 選択し、プロパティパネルの Visible パッチ追加、Screen Tap パッチの右上の手と連結(間にSwitchパッチが出現するが、Filip につながった紐を Turn On に繋ぎ直す)
- これで、ロウソクタップで火がつくか確認
- Scene パネル > faceTracker 選択し、プロパティ > Interactions > Patch > Create > Produser pach 選択でパッチエディターに3パッチ追加される
- 3パッチの最右「faceTracer」右上から紐を伸ばし「Kissing Face」選択
- Kissing Face 右と、上で配置した Switch パッチ左下 Turn Off を連結(間にPulse パッチ生成される)
- Scene パネル > HappyBirthDay のプロパティからVisibleを有効に
- パッチエディタ > Kissing Face 右側の Pulse 右上から紐を伸ばし「Animation」パッチ追加
- プロパティ > Scale のパッチをクリックし Trandtion パッチ右側に配置
- TranditonパッチStart:0,0,1、End:1.5,1.5,1 に変更し、Curveを「Overshoot Out」に変更(これで、ロウソクをフーで消したらHappyBirthDayがフワッと表示される)
- パッチエディタ中段の Screen Tapパッチ右上と、AnimationパッチのResetを接続(これで、ロウソクを消しても、タップのたびにリセットされる)
- ●風船アニメ
- パッチエディタに「Loop Animation」パッチ追加し、右上の紐を出し「Trandition」パッチ追加したら、Start:0,0.18,0、End:0,0.17,0 に変更し、Curveを「Overshoot Out」に変更
- Scene パネル > blueBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで Transition と連結(これで、青風船が上から下に動く)
- 「Loop Animation」パッチの Mirroed にチェック入れ
- Transition パッチの Curve を Quadratic in-Out に変更(これで、青風船が上下をイーズイン・アウト的に繰り返す)
- 「Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:-0.1,0.145,0、End:-0.1,0.155,0 に変更し、Curveを「Overshoot Out」に変更
- Scene パネル > orangeBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで 直前に追加したTransition と連結(これで、オレンジ風船)
- 「Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:-0.1,0.145,0、End:-0.1,0.155,0 に変更し、Curveを「Overshoot Out」に変更
- Scene パネル > yellowBalloon を選択し、プロパティ > Position パッチ追加、パッチエディタで 直前に追加したTransition と連結(これで、黄色風船)
- 「Loop Animation」パッチ右上の紐を出し「Trandition」パッチ追加したら、Start:0.1,0.15,0、End:0.1,0.16,0 に変更し、Curveを「Overshoot Out」に変更
- ●花吹雪パーティクル
- Assets パネル > Textures > Green-Spiresheet 選択し > プロパティパネル > Type > Sprite Sheet に変更後、Rows:5、Columns:5、Sprites:21に
- Orange-Spriresheet も同様に
- Scene パネル下の「+ Add Object」から「Particle System」選択し、名前を「emmiter1」に任意変更
- プロパティ > Materials > +ボタン Emmitter1 選択
- その下 Emitter > Type > Plane に
- Position > 0, 0.3, 0
- Rotation > z:180 に変更、Size x0.5, y0.5 に変更
- Birthrate > 50, 30 に
- Spray angle > 0, 10(xyzすべて)
- Speed > 0.24, 40%
- その下 Particle > Scale > 0.015, 30%
- Lifespan > 2sec, 0%
- Spin > 10, 0
- Tilt >10, 0
- Scene パネル > emitter1 を複製(⌘d)し名前を「emmiter2」に任意変更
- ●キャンドル
- パッチエディターの Kissing Face 右側 Pulse右上の紐を延長し Animation パッチ追加
- Animation パッチ左上(Progress)から紐を伸ばし Transition パッチ追加、パッチパネル下の青いタイプセレクタから「Number」を選択
- Scene パネル> emitter1、emitter2 のプロパティーから Birthrate パッチをそれぞれ追加
- 前のTransition パッチ左手から emitter1,2パッチにそれぞれ連結し、Transition パッチ > End > 50に、Curve を Quadratic In-Out に
- 先ほどの Pulse パッチ右上から再び手を伸ばし 下段側 Animation > Reset に連結(Part2 7:30)
- パッチエディタで Delay パッチを追加、Duration > 2 に変更(ロウソクの日が消えて紙吹雪開始までの時間が少し延びる)、右手を先ほどの Animation パッチ左手2行目 Reverse と連結、ここでもDuration > 2に変更(紙吹雪タイムが長くなる)
- ●グループ化
- パッチエディタで大量になったパッチ群をわかりやすくグループ化するには、複数選択 > 右クリック > comment でコメント入力(※単純なコメントだとエラーに)、さらに右クリックで枠色変更可
- ●スタート画面のテキスト表示
- Scene パネル > Device > プロパティ > Custum interaction > 「Tap to try on(タップして変更)」を選択(これで、スタート画面で「タップして変更」のテキストが表示される。これはSparkAR過去バージョンではトークン入力が必要だったが、新バージョンでは不要?)
- ●これでほとんどできたが、ロウソクの火がついてなくてもインタラクションが有効になってしまうので、以下のパッチ修正をする
- パッチエディタ > Kissing Face と Pulse を繋いでいた紐を切り、その間に And パッチ追加、そこのFirst Boolean についてた紐を下のSecond Boolean に繋ぎ直す
- HappyBirthDay パッチ群の最左にある Screen Tap パッチを And パッチに近づけ、右上紐を And パッチ左上(First Boolean)に連結、すると間に Switch パッチが現れ自動連結される
- And パッチ右手と Pulse 左手を連結
- Kissing Face パッチ右手から Delay パッチ追加し、パッチタイプ(パッチ下の青いセレクタ)を Boolean に変更、Duration値を0.05に
- Delay パッチ右手と Screen Tap 右の Switch 左手最下 Turn Off を連結
- ●効果音(SE)
- SparkARはMP3音源を使えないので online-convert.com 等でM4a(rate:44100Hz, mono)変換、画像群と同じAssetsフォルダなどに任意保存
- この作例では、「パッピー・バースデー」の掛け声(HappyBirthday.m4a)と、「イェーイ」(Yay.m4a)を使用するため、SparkAR 画面左下 Assets パネルに2音源をドラドロ
- Assets パネル上、各音源のプロパティパネルから「Add Multi-Clip Patches」選択、2組のパッチ(4個 x 2組)が追加される
- Kissing Face パッチ右の And パッチ右手から Pulse パッチ追加し名称を「Sound」に変更(Sound Pulse になる)
- Sound Pulse パッチ右上の手から2音源の各 Multi-Clip Controller パッチに連結
- Assets パネル下「+Add Asset」> AR Library > Music and Sound > 検索:Pop > Cork Pop 2 > Import Free、でAssetに「コルク抜き音」風のフリー音源が追加される
- これも、プロパティパネルから「Add Multi-Clip Patches」選択、追加されたパッチ一組(4パッチ)を、2音源下に任意配置し、Sound パッチ右上と Multi-Clip Controller パッチを連結
完成したら
SparkARソフトウェア上で人物とオブジェの調整が完了したら、いよいよfacebook、Instagramへのアップロードだが、その前に実機でテストしてみよう。実機テストには下記2つの方法がある。
実機テスト方法
- SparkAR画面左下の「test on device」から send to SNS > facebook > send を選択し、スマホのfacebookアプリに届いた通知のリンク先からテストできる
- スマホにSparkAR Playerアプリを入れ、PCとケーブルで繋ぎ、そのスマホアプリから閲覧テストできる
facebook、Instagramへの申請
テストが完了したらいよいよプラットフォームへの申請だ。センシティブな表現がないか、facebookなどにより数日間審査されるようだ。申請方法もSparkARから自動的にブラウザが立ち上がり申請画面となる。
申請方法
- SparkAR画面左下の「Export & Upload」を選択
- send to app > facebook, Instagram > send の順で選択(fb、inst両方のSNSアカウントをリンクさせておくこと)
- エフェクト名(20文字以内)、概要文(2000文字以内)、公開日、公開アカウント選択、などを入力
- 200px(fbは480px)の正方形アイコン画像を用意し申請ページにアップロードく(デザインの注意点と、公式テンプレートあり)
- エフェクト使用中の自撮り動画も同様にアップロード
アイコンに顔を合成する場合は自分の顔であることが原則だし、サンプル動画にも顔が映ることになる。オブジェクトだけのエフェクトならセルフィー動画は不要だが、顔エフェクトなら製作者本人の顔出しは避けられないだろう。申請の前に床屋、美容院にいく必要があり、女性の場合は、お化粧も考えなくてはならず、申請直前は予想外に緊張感がアップする。
アイコンデザインの注意点
- デザインは最も外側の緑の線内に収める
- デザインのほとんどは、赤い円に収める。
- 顔はテンプレートに自分の顔のみを使用する(他の人の顔はNG)

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

テキストについて
あまりにも多くのテキストを含めないように(スマホ画面で読むのは困難)。 単語やロゴを使用している場合、次のようにすること。
- Instaアカウント名やエフェクト名は含めない(すでにこの情報を表示している)
- 大きく、明確で読みやすいものに
さらに最適にするには
- シンプルな形、シャープなライン、鮮やかな色。
- 細ではなくテーマを表すことに焦点を。
- 簡単な背景。
- 効果の本質をとらえ、使用で何が起こるかを伝える
- スマホで、アイコンが実際のサイズでどのように見えるかをテストする
エフェクト名
20文字以内(数字、スペース、通貨、句読点、その他記号含む)
実際は自由にやっているようだ。気にせずサイズ通りにやればいい。
今後の課題
ひとまず、上記のような一番簡単な方法でSparkAR HUBに公開成功した(Instagramは2日ほどで許可、facebook側は2週間かかりそう)。ここからは中級、上級レベルの作り方に挑戦しなくてはだ。それは下記のような課題になる。
- タップするたびにマテリアルを変更したい(色変更は、パッチエディターで可能=後述。金色化は不明。)
- 3DCGに動き欲しい(アニメを施したFXB形式で可能。雪や雨、紙吹雪はSparkARのパーティクル使用を)
- ウインク等を表情をフックとしたアクション(これないと退屈だろう)
これらのスキルの習得が課題となる。これからはこれらを個別に章立てて、分かったことから下に解説します。
タップするたびにマテリアルを変更したい
これはSpark ARにとって、タップアクションを設定できるPatch EditorのIntaraction使うらしい。参考動画。
3DCGデータ内に動きをつけるFBX
この方法はアニメーション付きのFBXファイルを使う、という方法で解決できそうだ。詳細は下記ブログ参照。ただし、単純な移動やジャンプ程度の動きならSparkARのTransformパッチで簡単にできる。関節を使ったキャラクターアニメやはFBXを使い、
2Dイラストの素材を入れる
Assetsに2D素材を登録し、シーンに平面を配置、その平面に2Dのマテリアルを充てる、という手順になる。Aeroと違い画像を直にAR上に置くことはできないが、平面を型抜きする必要はなく、マッピングのような手間はない。詳細は以下の通り。
- Assetsに透過PNGをインポート
- Assetsパネルに新規Materialsを追加し、プロパティパネル > Texture > PNG読み込み
- SenesパネルにPlaneを追加(PlaneTracer > Placer に配置。これは「床」という概念か)
- そのPlaneのプロパティーから、②で追加したMaterialsを読み込み、両面に適用にチェック
- 拡大や位置を調整
複数のPlaneやMaterialsがある場合は、重なり具合によって非表示になってしまうので、レイヤーで調整すること。
ぴょんぴょん飛び跳ねるボール
パッチエディタで下記設定
- Loop Animationパッチを追加し、Loop animationのMirrored(反復)にチェックマーク
- その右にオブジェクトのTransformations > Pisitionパッチを追加(オブジェのプロパティーから➡️ボタンでTransitionパッチが追加される)
- Transitionパッチの開始点と終点座標値を入力し、Curveを「Cubic Out」に
- 飛び跳ねスピードは Loop AnimationのDurationで調整(小さいほど速度UP)
マーカー上にオブジェクトを配置する

Aero同様にSparkARでもマーカーは「Fixed target tracker」と呼び対応している。方法は以下の通り。
- SparkARで新規プロジェクトから「Blank Project」(何もない標準テンプレート)を選択
- Sineパネル下部の追加+ボタン「Add Object」から「Fixed Target Tracker」選択
- 「Fixed Target Tracker」をのプロパティーから「Textuer」で、マーカーとなる画像を選ぶ(マーカー画像は単純すぎる画像だとトラッキングエラーが起こりやすいので注意)。これでAssetsパネルに画像が読み込まれる。(先にAssetsに読み込んでもOK)
- マーカー上に表示する3DオブジェクトをAssetsに読み込ませる(2DならPlaneにテクスチャー充てしておく)
- その3Dオブジェクト(2Dの場合はPlane)を、Sineパネルの「Fixed Target Tracker」の中にドラックドロップ。
- 位置や大きさを調整し、名刺など床においたマーカーの場合はRotetionのX軸を+90度回転
- テストリンク共有、または公開
- マーカーと同じ画像上に3Dオブジェクトが浮かびあがり完成
Aeroと違い、マーカーターゲットマーカーを回転することができないSparkARでは、オブジェクト自体を90度回転することで対応する必要がある。この点要注意だ(上記、ステップ⑥参照)。
BGMを入れる(M4A)
音源や動画BGMをM4A形式に変換し使用。コンバートはOnline Convert.comなどの変換サイトを使用。
MacOS使用ならQuickTme Playerソフトの書き出しで「オーディオ」をせんたくすればM4A形式で保存されるのだが、SparkARでエラーになる。上記コンバートサイトでは、レート:44100Hlz、モノラル、コーデック:acc、の設定でエラーなかなく利用できた。
- 「+add assets」から「audioPlaybackController」を選択(するとassetsに「audioPlaybackController0」が追加される)
- そのプロパティーパネルから Audio > import from computer > で音源(M4A)選択
- その下、Playにチェック、(リピートが必要なら任意で)
- シーンパネル「+add Object」から「Speaker」を検索し追加(insert)
- Speakerプロパティーの Audio 選択項目を「audioPlaybackController0」に
- その下でVolumeを調整
- 必要なら、タップで再生できるようにパッチ編集。(参考動画)
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公式ガイド
- レイヤー名が英語でないと落ちやすい?
読み込み可能なファイル形式一覧
項目 | 形式 | 補足 |
---|---|---|
2D | JPEG/JPG Photoshop 形式(PSD/PSB) PNG SVG TIFF/TIF GIF | CC2020のソフトでAero書き出しであること |
オーディオ | WAV MP3 | |
3D | Aero に直接読み込むことができる 3D ファイル形式: GLB(GLTF バイナリ形式) | |
3D(zip) | OBJ(MDL または MTL マテリアルを使用) Collada(DAE) 3DS FBX(ガイドラインに従ってファイルが準備されている場合にサポート) PNG シーケンス(番号順) | 3Dモデル+テクスチャ+アニメが1つにzip化されている場合に限る |
AeroにAi動画を表示させる方法を考える
- AiデータをDimentionで開き、GLBに書き出す(ファイル > 書き出し > Aero)
- 【要検証】Dimentionで間接つけられるか?
- 【要検証】Dimentionでアニメつけられるか?
⚠️2020年現在、Android未対応!(ちなみに、AppleはAR Quick lookという仕様で、USDZ(VECTARYサイトでこの形式に変換可能)という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>
画像アンカーに向いてない画像を知る
Aeroでは、3Dオブジェクトを配置する場所を①サーフィエス(地面)②マーカー、の二つに分けている。この「マーカー」、QRコードの様なタグをよく目にするが、QRコードのようなバーコードタイプでなくてもよく、かといって、ロゴのようなマークが適していると想像しがちだが、そうでもない。マーカーに適した画像というのがあるので下にあげた。
⭕️アンカーに適している画像
- コントラストがはっきり
- 枠で囲まれている
- 特徴点が多くシンプルすぎない
❌アンカーに適さない画像
- コントラストが弱い
- グラデーションやパターン
- シンプル
COCOAR
アートや表現としてではなく、完全にARを企業宣伝用として売り出りだしているプラットフォームがこのCOCOAR(ココアル)だ。クロマキーやebookなど、意外と色んなメディアに対応しているが、発信者は有料である時点で他のプラットフォームとは別物。
CG素材やインタラクションなど、素材や動きはユーザー側が全て仕込む必要があり、COCOARは「決められた場所タグに、ただ表示するだけ」という立場。手軽でシンプルだが、この中で唯一有料で、しかも20コンテンツ制限(20のシーンのみ保存可)がある点に注意。
料金プラン
とても分かりにくいし、肝心の金額は「お問い合わせください」となっている。知っている人に聞くと、一番手軽な「スイートプラン」で月額10〜20万ほど…。小さな会社には無理だろう。オプションやプランの比較は下記リンク先へ。
ARプラットフォーム比較表
比較 | SparkAR | Aero | ココアル | WebAR | 総評 |
---|---|---|---|---|---|
Instagram | Aero | Safari Chrome | Aero側のがプラットフォームに縛られず自由だが、プラットフォームを持たないことがデメリットとも。例えば、SparkARにはInsta LIVEなどの生配信ができ、多くのファンに同時発進できるなど。 | ||
扱える3D | OBJ 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 | ||
扱える音声 | M4A | WAV MP3 | |||
マーカー追跡 | ✅ | ✅ | ? | ✅ | |
顔追跡 | ✅ | ❌ | ❌ | ❌ | SparkARはフェイスエフェクトに多くの重点が置かれSNS向き |
手追跡 | ✅ | ❌ | ❌ | ❌ | |
CG素材 | Spark内 | Mixamo | ❌ | ❌ | Aero側は外部サイト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-Frame(Git HUB) | WebVRを手軽に扱えるライブラリ。パーティクルやゲーム性といった動きを広くカバーし、マーカーベース、ロケーションベースにも対応しているのでAR名刺に適している | HTMLのheadにaframe.min.jsへのリンクと、body内に3Dオブジェクトとマテリアルへのリンク、配置座標を追記(後述) |
AR.js | A-Frameを使用するJavaScript。 | HTMLのheadにaframe-ar.jsへのリンクを追記(後述) |
OBJ、MTL | 3Dオブジェクトとマテリアル(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コード参照)
- 3Dオブジェクト(obj)とマテリアル(mtl)を、「…image/3d/object.obj、…image/3d/material.mtl」等に保存
▼ 以下index.html内 ▼ - a-frameとar.jsの両ライブラリリンクを<script>タグで埋め込む
- <a-scene>タグに、embedタグをいくつか入力
- <a-assets>タグに、objとmtlへのリンクを入力
- <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-scene
:a-frameの最初に書くやつ
a-assets
:オブジェクトやマテリアルの読み込み
a-asset-item
:オブジェクトを指定
a-marker
:起点となるマーカー。preset=hiro
で、デフォルトのhiroマーカー(このページにも載せたやつ)が認識の対象になる
a-obj-model
:a-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用にデータを作る方法は下記の通り若干違うので注意が必要。
操作 | AE | Ch |
---|---|---|
レイヤー構造 | 第1階層のみレイヤー活かせるが第2階層以下は統合されるので間接のあるパーツはすべて第1階層に配置。(レイヤー統合する必要はない) | レイヤーは複雑でもよいが+Face、+Left arm、+Left Eye、+Nose、など独立したレイヤーには+をつけ、関節の先には+付けない。 |
グループ化 | ❌ | ❌ |
インポート方法 | 「ファイル >読み込み > ファイル(⌘i) > コンポジション・レイヤーサイズを維持 > 読み込み」でプロジェクトパネルに表示されたコンポジションをダブルクリック。 | |
間接設定 | アンカーポイントツールで、間接アンカーポイントを軸に移動。親子関係を連結。 | 事前に「+」や「+Face」などの決められたレイヤー名をAiに付ければ自動的に間接が付く。 |
用語解説
- スワップセット
トリガーパネルの中で、それぞれ排他的なトリガーを作る際に利用するフォルダのようなセット(左右の向きを変えるセットや、目の表情を変えたい時などに)
オリジナルキャラクターの作り方
Chで制御する前に、オリジナルキャラクターが必要だ。サンプルキャラで手軽に作りたければ、Chにプリインストールされているいくつかのデフォルトキャラクターを利用可能だ。オリジナルキャラクター作りには、Adobe Illustratorを使う方法とPhotoshopを使う方法がある。それぞれ好きなソフトウェアで作る。
Illustratorでのキャラ作成手順とルール
Adobe Illustratorを使ったオリジナルキャラクターの作り方と、あとでChに読み込んだ際に自動割り当てされるためのデータ作成ルールは以下の通り。
- キャラ名をあてたルートレイヤーの中に、「Head」「Body」の2レイヤーを作る
- Headの顎あたりに点を打ち名前を「Origin」とする
- 独立(+マーク)が必要なパーツは基本的に、キャラ名、眉毛(Left Eyebrow、Right Eyebrow)、目(Left Eye、Right Eye)、鼻(Nose)
Character Animatorでの作業
- 新規プロジェクトを作成し、任意の作業用フォルダを指定
- 右上カメラ・マイクパネルから「基本姿勢を設定」(姿勢を正しくカメラに向けること)
- 左上プロジェクトパネルにAIデータをドラドロし、キャラデータ読み込み
- プロジェクトパネルから新規シーン(カチンコマーク)作成
- Bodyを選択し、足のかかとにピン打ち(これで足が固定される)
3View(斜め角度つけ)の方法
正面と同じように、斜め角度を作るには、角度の数だけレイヤーが必要になる。(下図参照)

リプレイ(動作保存)
下記のいずれかの方法で動作のパターンを保存できる。2つ以上の動作がある場合はタイムラインの両端をイージーイーズしておこう。
- ドラッグで動作させた様子を録画し、そのタイムラインを右クリック > 「リプレイ及びトリガーを作成」
別録の音声データでリップシンク
- 音声をmp3、WAVに変換
- プロジェクトに読み込み(ドラックドロップでもOK)
- タイムラインに配置しアバターと重ねる
- 音声を選択した状態で メニュー > タイムライン > シーンオーディオからリップシンクテイク計算
動画の書き出し
- タイムライン上でIn、Out(半透明のバー)で尺を設定
- ファイル > 書き出し > Adobe Encorder経由で 選択(⌘M)
背景の入れ方(グリーンバックを入れる方法)
- プロジェクトに背景画像を読み込み、シーンにドラドロ
- グリーンバックの場合は、グリーンの背景画像を用意し、上記と同様に
- アルファチャンネル付きでAdobe Encorderに書き出すこともできる(ファイル > 書き出し > アルファを含んだAdobe Encorder…)
ビデオチャット中のLIVE合成
- 必要なアプリ:Adobe Ch、(ZoomやLINE等の)ビデオチャットソフト、OBS Studio、OBS Virtual Camera
- Adobe Ch側でもしグリーンバックがあれば非表示に
- Adobe Chで、ストリームモードにしライブストーリミングボタンをON
- OBS側で、シーンパネルに「画面キャプチャ」追加(+ボタン)
- OBS側で、シーンパネルに「サイフォンクライア」選択し、「ソース」選択を「Adobe Charactor Animator」に、「透過を許可」をONに
- 適当な大きさに調整
- OBSメニューの「ツール」から「OBS Virtual Camera」選択
- ビデオチャットソフト(LIEN等)のカメラ設定で「OBS Virtual Camera」選択
Illsutrator の場合
- Adobe Illustratorでキャラクターデザイン(AfterEffectに読み込むデータはグループ化せず、第1階層のみのレイヤーのみAEに反映され、それより下は統合される)
- AIデータのまま(Ch)に読み込み可能(レイヤーも活かされる)
- Photoshopに書き出したい場合、ファイル > 書き出し > Photoshop PSD > レイヤー有効ON
項目 | 内容 | 補足 |
---|---|---|
レイヤー構造 | 維持 | |
レイヤー名 | Faceなど、決められたレイヤー名で | そうじゃなくても手作業でインポートできるが、決められた英語のレイヤー名をつけると、自動的に全身ボーンが付き作業時短になる |
書き出し | Photosop | ⚠️全レイヤーを可視にしておくこと ファイル > 書き出し > Photoshop PSD > レイヤーを保持ON |
After Effect | AEにドラドロだが、AIデータのレイヤーを要フラット化 | |
Riderセンサーについて
2020年春のiPad PROから搭載された次世代空間認識センサー「Rider」に対応した端末はどれかを知り、購入検討の参考に。Riderとは物体同士の距離を計測できる特殊な「目」で、それができるとオクルージョン(3D物体と現実物体動詞の前後関係を理解し自然な共演が可能な処理)をリアルタイムで処理できる。
iPad 2020春 | iPad PRO 2020春 | iPhone 11 PRO | iPhone 12 PRO(& Max) | |
---|---|---|---|---|
Rider | ⭕️ | ⭕️ | ||
M1チップ | ||||