![見出し画像](https://assets.st-note.com/production/uploads/images/88717754/rectangle_large_type_2_3602f852906762b6396b40c01a61fb01.jpeg?width=800)
動くAR名刺の作り方
動くAR名刺を作ってみました!😛✨#バーチャルモーションキャプチャー #VMC4B #AdobeAero pic.twitter.com/HOSk8EDOYZ
— オレンジ/メタバース撮影技術者 (@orange_3134) October 10, 2022
こんなのが作れます!
アバターを名刺の上に表示して、さらにかわいく動かすことができます。
XRの時代なのでせっかくなら名刺もAR化しましょう。
使うソフト
Blender
バーチャルモーションキャプチャー(先行配信版)
VMC4B
VRM Add-on for Blender
Adobe Aero
作り方
モーションキャプチャーする
まずはバーチャルモーションキャプチャー(先行配信版)で動かしたアバターのモーションをBlenderに録画します。
Blenderとバーチャルモーションキャプチャーを繋ぐアドオンがVMC4Bです。
![](https://assets.st-note.com/img/1665399285600-xfefshHzEh.png?width=800)
バーチャルモーションキャプチャー
VMC4B
Blender
各ソフトの使い方はそれぞれのページに詳しく書かれているのでここでは割愛します。
Blenderで編集する
Blenderで編集して、Adobe Aeroに読み込めるGLBファイルを出力します。
まずはモーションデータのいらない部分を削除します。
Armatureをポーズモードにして全選択。
ドープシートで要らない部分のキーフレームを範囲選択してDeleteします。
![](https://assets.st-note.com/img/1665401968498-89QjJDUMXV.png?width=800)
手前を消した分すべてのキーフレームを左にずらして0フレームから始まるように調整します。
これで書き出せばいいような気がするのですが、何故かこれだけだと消したはずのフレームまで書き出されてしまうようです。
NLAの画面で新規アクションを押していまのキーフレームを新しいアクションにします。
![](https://assets.st-note.com/img/1665402166086-vJC0irXtfA.png?width=800)
保留アクションに以前のアニメーションがストリップとして出てくるのでこれは消します。
![](https://assets.st-note.com/img/1665402252280-0liZByCCAX.png?width=800)
さらにアウトライナーで孤立データを表示し、アクションのところにあるものをすべて削除します。
![](https://assets.st-note.com/img/1665403176533-YqUm7cYiaa.png)
これでうまくいくのですが、イマイチこの部分の仕様を理解していないので本当はもっといいやり方がある気がしています。
知っている方がいたら教えてください!
次にマテリアルの設定をします。
VRM Add-on for Blenderで読み込まれたモデルはMToon互換のシェーダーが設定されていますが、このまま書き出すとGLBにマテリアルが反映されません。
シェーダーをプリンシプルBSDFに変換する必要があるのですが、マテリアル数が多いアバターの場合手動で行うのは大変です。
Scripting画面に移動して新規テキストを作り、以下のコードを貼り付けて実行すれば自動で変換することができます。
![](https://assets.st-note.com/img/1665402731416-iJlWsTWNSR.png?width=800)
import bpy
import sys
import os
import argparse
def mtoon_to_bsdf():
materials = bpy.data.materials
for material in materials:
if not material.use_nodes :
continue
nodes = material.node_tree.nodes
links = material.node_tree.links
main_texture = None
normalmap_texture = None
emission_texture = None
material_output = None
mtoon = None
for node in nodes:
if node.label == 'MainTexture':
main_texture = node
if node.label == 'NormalmapTexture':
normalmap_texture = node
if node.label == 'Emission_Texture':
emission_texture = node
if node.name == 'Material Output':
material_output = node
if node.name == 'Group' or 'グループ':
mtoon = node
if (not main_texture == None and
not material_output == None and
not mtoon == None):
bsdf = nodes.new(type='ShaderNodeBsdfPrincipled')
bsdf.location = mtoon.location
nodes.remove(mtoon)
links.new(main_texture.outputs['Color'], bsdf.inputs['Base Color'])
links.new(main_texture.outputs['Alpha'], bsdf.inputs['Alpha'])
links.new(bsdf.outputs['BSDF'], material_output.inputs['Surface'])
if(not normalmap_texture == None):
links.new(normalmap_texture.outputs['Color'], bsdf.inputs['Normal'])
if(not emission_texture == None):
links.new(emission_texture.outputs['Color'], bsdf.inputs['Emission'])
mtoon_to_bsdf()
このコードはこちらから引用させていただきました。
プリンシプルBSDFの質感はお好みで調整します。
![](https://assets.st-note.com/img/1665406579794-EgPdL508R0.png?width=800)
ここまでできたらいよいよ書き出します。
ファイル→エクスポート→gltf 2.0 を選択します。
書き出し設定はデフォルトからNLAトラックでグループ化だけオフにします。
![](https://assets.st-note.com/img/1665402867490-vj6d8ea0d4.png)
Adobe Aeroに配置する
iPadやiPhoneに先程書き出したGLBデータと名刺の画像を入れておきます。
Aeroで新規作成。画面をタップしてサーフェスアンカーを作ります。
![](https://assets.st-note.com/img/1665405534275-qtkdIva8pU.png?width=800)
画面右上の碇を押してアンカータイプをアンカーに切り替えます。
名刺の画像を読み込むと名刺がアンカーに設定されます。
![](https://assets.st-note.com/img/1665405592018-ID1ECb9oik.png)
![](https://assets.st-note.com/img/1665405629200-GPAEi0gF5A.png?width=800)
「+」ボタンから先程作ったGLBファイルを読み込みます。
![](https://assets.st-note.com/img/1665405728801-wyoSkMIuqK.png?width=800)
![](https://assets.st-note.com/img/1665405782342-OfQu9cC6Sb.png?width=800)
配置したオブジェクトをタップしてトリガーを追加。
開始を選びます。
![](https://assets.st-note.com/img/1665405872792-OIRkGTVZne.png?width=800)
![](https://assets.st-note.com/img/1665405962341-RRbiue2UdY.png?width=800)
アクションでアニメーションを再生を選び、無限ループをオンにします。
![](https://assets.st-note.com/img/1665406044055-ynvfjDH5n1.png?width=800)
こうなっていればOK。
![](https://assets.st-note.com/img/1665406067771-AncDeHkZQc.png?width=800)
プレビューで確認して完成!
![](https://assets.st-note.com/img/1665406120047-x7iktTUgOW.jpg?width=800)
おわり
実物の名刺じゃなくてもできるようです。
PC画面で写すとUX最悪で草🥺 https://t.co/y9zLC6ognh pic.twitter.com/ZIfE22p9Wv
— オレンジ/メタバース撮影技術者 (@orange_3134) October 10, 2022
この記事が気に入ったらサポートをしてみませんか?