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

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

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

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

ゴールを決める

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

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

必要なツール

• Blender
• Spark AR

作業内容とツール一覧

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

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

完成予定図

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

adobe Dimention

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

利点

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

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

Blender

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

Blender制作の流れ

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

お勧め動画解説

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

用語おさらい

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

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

中心点の違い

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

基本編

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

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

基本操作とショートカット

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

選択

コマンド、用語	方法、ショートカット	補足
原点変更	画面右上>オプション>原点ON>g移動	蜜柑色の点
編集軸を選ぶ	画面上>トランスフォームピポットポイントiconから選択
選択	クリック	シーン一覧でもOK
複数選択	shift + クリック	〃
全選択	a	連打で解除⭐️
囲み選択	ドラッグ選択（b + 左ドラッグ）	イラレ的
なげなわ選択⭐️	ctrl + 左ドラッグ	フォトショ的
選択反転	ctrl + i
選択を別レイヤーに	p > 選択（Serectid）
ループ選択⭐️	辺をalt選択
ループ範囲選択	点をctrl選択
リンク選択⭐️	l	属す点対象
ループ範囲選択	点をctrl選択
ペイント的選択	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

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

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コマンド
• ブーリアンモディファイアー

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

テクスチャ

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

2種類のテクスチャ設定

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

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

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

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

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

テクスチャ座標の微調整

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

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

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

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

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

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

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

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

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ペイント頂点選択	v	vで選択解除
Wペイント輪投げ選択	ctrl + 右ドラッグ
Wペイント塗り潰し	shift + k
頂点選択解除	alt + a
ボーン位置リセット	alt + r + g	最後に

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

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

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

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

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

歩かせる

 

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

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

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

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

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

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

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

炎

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

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

note.com

カメラ

簡易スタジオ設定

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

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

背景白の簡易ルック設定

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

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

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

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

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

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

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

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

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

参考サイト

blender 2.9 入門

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

czpanel.com

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

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

styly.cc

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

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

note.com

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

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

拡張子	保存内容	利点
OBJ （Wavefront）	3Dオブジェクト マテリアル	3D物体のみで容量が軽い。
FXB （Maya=AutoDesk）	3Dオブジェクト マテリアル リグ（骨格） アニメ	アニメ付きの3D出力
STL	3Dオブジェクト	3Dプリンター定番
USDZ	3Dオブジェクト マテリアル ?	AppleがAR QuickLookに採用
GLB	3Dオブジェクト マテリアル	adobe Dimentionから「ファイル > 書き出し > Aero」で描き出せる

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

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

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

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

anyconv.com

After Effect

ボーンアニメの方法

Spark AR

ダウンロード

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

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

扱えるデータ形式

形式	内容	補足
OBJ	3Dデータ+マテリアル
FXB	3Dデータ+マテリアル+アニメ
JPG	画像
PNG

解説動画

超初級、耳猫系

フェイスペイント系

パッチ系

レイヤーと背景削除

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

初級編

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

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

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

作業手順

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

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

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

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

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

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

タップでオブジェクト変更

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

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

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

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

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

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

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

パーティクル参考動画

完成したら

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

実機テスト方法

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

facebook、Instagramへの申請

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

申請方法

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

今後の課題

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

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

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

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

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

3DCGデータ内に動きをつけるFBX

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

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

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

colecole.jp

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

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

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

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

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

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

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

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オブジェクトが浮かびあがり完成

BGMを入れる（M4A）

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

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

参考

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

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

note.com

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でアニメつけられるか？

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

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

COCOAR

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

料金プラン

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

料金・プラン｜ウェブAR・ブラウザARなら「LESSAR（レッサー）」

アプリ不要でAR（拡張現実）体験が実現できるウェブAR・ブラウザAR「LESSAR」の料金プランをご紹介します。0円のフリープランからはじめていただけます。また、再販利用・…

less-ar.jp

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

比較	SparkAR	Aero	ココアル	WebAR	総評
プラットフォーム	Instagram facebook	Aero	COCOAR	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】WebARをAR.jsで実装する | WebAR Lab – WebARの最新情報がわかるメディア

今回はWebAR開発で使われる代表的なOSS「AR.js」について紹介していこうと思います。AR.jsを触ったことがないけどどんなことができるか知りたい、実際に使ってみたい、と…

webar-lab.palanar.com

AR.jsのブラウザ版

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

AR.js Studio

ar-js-org.github.io

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コード参照）

1. 3Dオブジェクト（obj）とマテリアル（mtl）を、「…image/3d/object.obj、…image/3d/material.mtl」等に保存
   ▼ 以下index.html内 ▼
2. a-frameとar.jsの両ライブラリリンクを<script>タグで埋め込む
3. <a-scene>タグに、embedタグをいくつか入力
4. <a-assets>タグに、objとmtlへのリンクを入力
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のタグの紹介

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

【AR.js入門】簡単にWebARで遊んでみた【A-Frame使うよ】 – Qiita

※ 2019/11/6 更新GitHub Pagesのリンクが変わったので更新はじめにこの記事はUUUM Advent Calendar 2018 22日目の記事です！ARで遊びたくなったので、WebでARやる…

qiita.com

AR名刺を作ろう！

Webサービス開発の超実戦ブートキャンプhttps://to.camp/aboutTwitterhttps://twitter.com/d151005LINEhttps://lin.ee/c9mvyp9

www.youtube.com

AR名刺の参考サイト

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

「AR.js」でオリジナルのマーカーを設定する方法 | 株式会社LIG

LIGのフロントエンドエンジニア・ハルが、カンタンにARを体験できるjavascriptライブラリ「AR.js」で遊びながら紹介するシリーズ。今回は、認識用のマーカーを好きな文字…

liginc.co.jp

A-frameでAR名刺を作ろう – Qiita

A-frameでAR名刺を作ろう実現を最優先にした記事構成にしています。細かい内容は参考記事から参照してください。A-FrameとはWeb上でVR・ARが実現できるJavascri…

qiita.com

AR.jsを使って雑にサクッとAR名刺を作った話｜てくてくぷれいす

こんにちは，しまさん（@nitkcdadon）です． ・学会やエンジニアのイベントで名刺配るとして，少し印象付けたいな

murabitoleg.com

ARKitで作るAR名刺 – Qiita

ARKitで作る名刺といえば、なんと言っても彼のコンセプト動画です。📱AR Business Card Concept I created this it using ARKit 2.0 with Image Tracking,…

qiita.com

開発プラットフォーム

• Amazon Sumerian
• Apple ARKit
• WebARジェネレータ

ARKit – 拡張現実 – Apple Developer

ARKitの最新機能を利用して、Appleプラットフォームでインパクトのある拡張現実体験を創造しましょう。

developer.apple.com

料金参考

WebAR（拡張現実）名刺　ビジネストークも思いのままに | 有限会社 田中印刷所

www.tanakaprint.co.jp

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に読み込んだ際に自動割り当てされるためのデータ作成ルールは以下の通り。

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（斜め角度つけ）の方法

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

リプレイ（動作保存）

下記のいずれかの方法で動作のパターンを保存できる。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 Studio、OBS 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 Effect	AEにドラドロだが、AIデータのレイヤーを要フラット化

Riderセンサーについて

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

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