ブラウザ３Dゲームを作る作戦その6: 軽量化
Load の軽量化
- フィールド等のMMD以外のモデルデータは、glTF(GL Transmission Format) がおすすめだそうです（.gltf /.glb）。
.gltf はjson形式、.glbはバイナリ形式になっているそうで、どちらも同じようにThree.js 側から読み込めます。
なのですが他の形式と明るさが合わないので現在調査中。
- VMDは長いループを作らなくてもThree.js 側のループ再生で違和感なく繋げられる（走り出し等もfadeInでつなげればいい）ので、走るモーションも最初から1ループ程度を切り出しておくと軽いデータにできます。
vmdについてモーションとセットにして使いそうなのは loopやフェードイン/アウト、再生速度（timeScale）などでしょうか。
var motionFiles = [ {filePath : './vmd/walk/walk_short.vmd', loop : THREE.LoopRepeat, fadeIn: 0.1, fadeOut: 0.1, timeScale: 1 }, …省略 ];
ループについては、はじめに actionを取り出す時点で
action.setLoop( motionFiles[i].loop );
で設定できます。一度だけ再生したいとき、終了時のポーズで止めたいときは clampWhenFinished を trueにすればよいようです（デフォルトはfalse でactionがセットされていないポーズになる）。
if (motionFiles[i].loop == THREE.LoopOnce){ action.clampWhenFinished = true;}
処理 の軽量化
- モデルデータのメッシュ結合について
例えば今回使っているデータでは children にたくさんの家や木などが入っています。
[
:480]
木の幹同士、葉同士など同じマテリアルをblender などで結合すると軽くなるか試していたのですが、パーツの数がよほど多くない限り効果がないように思います。これも今は後回しになりそうです。
- 前回の記事https://iwanabot.hatenablog.com/entry/2020/05/03/203526でRaycaster はさほど重くなさそうなどと申しておりましたが、あれは嘘だ。
プレイヤーを増やしたときのネックになっていたのがRaycaster の処理でしたので、頭の水平2軸はもうやめて、足側も移動キーでX軸とZ軸のどちらかだけのRaycaster を出すようにしました。以前はプレイヤー毎5本でしたが、今はこれで常にY軸と足の片方の軸の2本なので比較的軽くなりました。
