Skip to content

VRM モデル

概要

N.E.K.O. は Three.js と @pixiv/three-vrm を使用した 3D キャラクターレンダリングのために VRM(Virtual Reality Model)形式をサポートしています。

モデル管理

  • /api/model/vrm/upload から VRM ファイルをアップロード(最大 200MB)
  • /api/model/vrm/animation/upload からアニメーションを個別にアップロード
  • /vrm_emotion_manager から感情マッピングを設定

ライティング設定

VRM モデルは設定可能なライティングシステムを使用します:

ライトデフォルト範囲説明
Ambient0.40 - 1.0HemisphereLight の強度
Main1.20 - 2.5メインのディレクショナルライト
Fill0.50 - 1.0セカンダリフィルライト
Rim0.80 - 1.5エッジ/リムライティング
Top0.30 - 1.0トップダウンライト
Bottom0.150 - 0.5ボトムアップライト

設定は PUT /api/characters/catgirl/{name}/lighting で行います。

UI コンポーネント

モジュール用途
vrm-ui-buttons.jsVRM 固有のコントロールボタン
vrm-ui-popup.jsVRM ポップアップダイアログ

既知の問題と修正

SpringBone 物理演算の暴走

VRM の update(delta) は delta を 単位で期待しています。ミリ秒やクランプされていない値を渡すと、髪が上方向に飛び散ります:

javascript
let delta = clock.getDelta();
delta = Math.min(delta, 0.05); // タブ切り替え時の物理演算暴走を防止
vrm.update(delta);

コライダーのサイズ過大(ほぼすべての VRM モデルに影響)

VRoid Studio からエクスポートされた VRM モデルには、コライダーの半径が約 2 倍大きくなる既知の UniVRM バグ(#673)があります。これにより髪が水平に固定されたように見えます。修正方法:読み込み後にすべてのコライダー半径を 50% 縮小します:

javascript
springBoneManager.colliders.forEach(collider => {
    if (collider.shape?.radius > 0) {
        collider._originalRadius = collider.shape.radius;
        collider.shape.radius *= 0.5;
    }
});

MToon アウトラインの太さ

モデルをスケーリングすると、MToon のアウトラインが不均衡に太くなります。スクリーンスペースモードに切り替えてください:

javascript
material.outlineWidthMode = 'screenCoordinates';
material.outlineWidthFactor = 0.005; // 1-2 ピクセルの細いアウトライン
material.needsUpdate = true;
係数効果
0.002 - 0.003非常に細い(約 1px)
0.005細い(1-2px)
0.01中程度(2-3px)
0.02+太い

カメラドラッグの不一致

ドラッグに固定の panSpeed を使用しないでください。ピクセルからワールドへのマッピングを動的に計算します:

javascript
const worldHeight = 2 * Math.tan(fov / 2) * cameraDistance;
const pixelToWorld = worldHeight / screenHeight;

完全なリファレンスは 開発者ノート を参照してください。

API エンドポイント

完全な REST エンドポイントリファレンスは VRM API を参照してください。

MIT ライセンスの下で公開。