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
ここで.vrmaはvrm1.0以上でないと読み込めません。したがって、まずはmodelをvrm1.0でexportしてから.vrmaを当てましょう。
そして、.vrmにexportして.glbにrenameします。
しかし、現状、blenderで読み込む.vrmは色がおかしくなってしまうようです。
blender v3.5