2023-10-25 / syui

vrm , 3d

vrmのキャラクター編集

3d-modelである.vrmのキャラクター編集でやったことなどをまとめます。

輪っかを作る

輪っかを作るには、髪の毛から適当な付け髪を選択肢、テクスチャを編集します。

部位を光らせる

部位を光らせるには、blenderで当該テクスチャ(マテリアル)を選択し、Emissionの項目で画像を削除、カラーを設定します。

アイの場合は、Face, Hairにあるマテリアルの2つを#fff700にしました。

なお、事前にblenderで.vrmをインポートするアドオンを入れておいてください。あと、blenderは一度modelを保存しないとエクスポートの反映されなかったので注意。

iframe

今までの3d-modelは、skechfabなどからiframeしていましたが、自分でホストすることにしました。

これが単なるmodelの鑑賞ならthree.jsを使えばいいです。iframeは必要ありません。

例えば、cardのmodelはそれ自体が動かないものなのでthree.jsで表示したほうが簡単です。

しかし、人のmodelとなれば話は変わってきます。つまり、棒立ちのmodelを表示するだけではダメなのです。

したがって、motion(animation)を当てる必要がありますが、それもランダム、かつ違和感のないものでなければいけません。例えば、定型的な動き、腕を上げて下ろすとか、それを繰り返すだけではダメということになります。

この処理を作成するには、three.jsだけでは不十分で、three-vrmが必要になり、かつthree-vrmを使うにもかなりの記述が必要になります。

つまり、web-appを作る必要があって、作ったweb-appをiframeで表示することになります。

<iframe src="https://syui.ai" allowfullscreen frameborder="0" style="border: none" width="100%" height="400px"></iframe>

animation

ここでいうanimationとはmotionと同じ意味です。

手順としては、.fvpにexportする際に様々なモーションがありますので、その動きを.mp4に保存したあとdeepmotionで合成します。

現在使っているipad 9thが落ちるのでmacで作業します。

ipadで保存したmodelは.vroidになります。これをexportすると.vrmになります。

macで読み込む場合、.vroidが必要になるので、icloudなどにmodelを保存して共有します。

これを動画で保存します。そして、deepmotion.com.bvhを作成します。.bvh.vmdに相当します。

google-model-viewer

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>

https://modelviewer.dev/

google-model-viewerというものがあります。これを使うことで.glbを表示できるのですが、.vrmのポーズがデフォルトでは見栄えがよくありません。したがって、ポーズを付けるには、.bvhなどを.vrmaに変換してblenderで合成させる必要があります。

bvh -> vrma

ここで.vrmavrm1.0以上でないと読み込めません。したがって、まずはmodelをvrm1.0でexportしてから.vrmaを当てましょう。

そして、.vrmにexportして.glbにrenameします。

しかし、現状、blenderで読み込む.vrmは色がおかしくなってしまうようです。

blender v3.5