見出し画像

動くAR名刺の作り方

こんなのが作れます!
アバターを名刺の上に表示して、さらにかわいく動かすことができます。
XRの時代なのでせっかくなら名刺もAR化しましょう。

使うソフト

  • Blender

  • バーチャルモーションキャプチャー(先行配信版)

  • VMC4B

  • VRM Add-on for Blender

  • Adobe Aero

作り方

モーションキャプチャーする

まずはバーチャルモーションキャプチャー(先行配信版)で動かしたアバターのモーションをBlenderに録画します。
Blenderとバーチャルモーションキャプチャーを繋ぐアドオンがVMC4Bです。

バーチャルモーションキャプチャー

VMC4B

Blender

各ソフトの使い方はそれぞれのページに詳しく書かれているのでここでは割愛します。

Blenderで編集する

Blenderで編集して、Adobe Aeroに読み込めるGLBファイルを出力します。

まずはモーションデータのいらない部分を削除します。
Armatureをポーズモードにして全選択。
ドープシートで要らない部分のキーフレームを範囲選択してDeleteします。

手前を消した分すべてのキーフレームを左にずらして0フレームから始まるように調整します。
これで書き出せばいいような気がするのですが、何故かこれだけだと消したはずのフレームまで書き出されてしまうようです。
NLAの画面で新規アクションを押していまのキーフレームを新しいアクションにします。

保留アクションに以前のアニメーションがストリップとして出てくるのでこれは消します。

さらにアウトライナーで孤立データを表示し、アクションのところにあるものをすべて削除します。

これでうまくいくのですが、イマイチこの部分の仕様を理解していないので本当はもっといいやり方がある気がしています。
知っている方がいたら教えてください!

次にマテリアルの設定をします。
VRM Add-on for Blenderで読み込まれたモデルはMToon互換のシェーダーが設定されていますが、このまま書き出すとGLBにマテリアルが反映されません。
シェーダーをプリンシプルBSDFに変換する必要があるのですが、マテリアル数が多いアバターの場合手動で行うのは大変です。
Scripting画面に移動して新規テキストを作り、以下のコードを貼り付けて実行すれば自動で変換することができます。

新規テキストに貼り付けて▶を押すだけ
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の質感はお好みで調整します。

ここまでできたらいよいよ書き出します。
ファイル→エクスポート→gltf 2.0 を選択します。
書き出し設定はデフォルトからNLAトラックでグループ化だけオフにします。

Adobe Aeroに配置する

iPadやiPhoneに先程書き出したGLBデータと名刺の画像を入れておきます。
Aeroで新規作成。画面をタップしてサーフェスアンカーを作ります。

画面右上の碇を押してアンカータイプをアンカーに切り替えます。
名刺の画像を読み込むと名刺がアンカーに設定されます。

「+」ボタンから先程作ったGLBファイルを読み込みます。

いい感じの位置でタップして配置

配置したオブジェクトをタップしてトリガーを追加。
開始を選びます。

アクションでアニメーションを再生を選び、無限ループをオンにします。

こうなっていればOK。

プレビューで確認して完成!

おわり

実物の名刺じゃなくてもできるようです。


この記事が気に入ったらサポートをしてみませんか?