Webブラウザで動作するVRMビューワの作成
- POSTS
こんにちは、カシカでエンジニアのインターンをしております、石飛と申します。
今回はVRMモデルを表示する簡単なwebアプリを作る方法を解説します。 VRMを表示し、カメラのコントロール、モーションの変更、表情の変更の 基本的なコントロールができるWEBアプリの作っていきます。
やりたいこと VRMとは人型アバターモデルのためのファイルフォーマットです。
実際のデータはニコニ立体などから入手することができます。 今回の例でもこのサイトに公開されているニコニ立体ちゃんを利用します。
公式のガイドに従えば、Unity、Blender、Maya等の標準的なCG開発環境でVRM形式のデータを読み込むことができます。
ですが、今回はwebブラウザでVRMデータを表示することを目的とします。
実際に作ったアプリのスクリーンショットを下に示しています。 VRMデータを読み込んで表示することはもちろん、カメラを移動して様々な方向からモデルを観察することができます。 また、VRMモデルの操作として、表情の変更やFBX形式のモーションデータの適用も可能です。
(完成版のイメージと主な機能)
主なソフトウェア 作るとはいってもJavaScript系の既存ソフトウェアを組合わせるだけで、簡単な機能はすぐに実現できます。
ここでは、今回の用途において要となるNode.jsとthree-vrmの概要を説明します。
具体的な環境構築の方法はこちらの記事を参考にしてください。
Node.js JavaScriptの実行環境としてNode.jsを利用します。
Node.jsがどういうものなのかについては、こちらの記事でわかりやすく解説されています。 端的に言えば、ローカルで完結した環境でWebアプリを開発できるようにするものです。
Node.jsではnpmというパッケージ管理ツールを使うことになります。 上の記事の受け売りですが、知っている人には「Pythonにおけるpip、Rubyにおけるgem(RubyGems)、Debianにおけるapt、MacにおけるHomebrew、Rustにおけるcargo」と考えればすぐに理解できるかと思います。
なので次に説明するthree-vrmも
$ npm i @pixiv/three-vrm のようにして、npmコマンドでインストールします。
three-vrm JavaScriptで3DCGを描画するためのライブラリとしてThree.jsがよく知られています。 このThree.jsでVRMモデルを扱えるようにしたライブラリがthree-vrmであり、pixivがオープンソースで公開しています。
three-vrmのページからリンクが張られているexamplesでは、VRMの基本的な操作を扱ったデモがまとめられています。 今回はこれらデモを参考にしてアプリケーションに機能を追加します。
ビューワの実装 先述の通りにこちらの記事に従って環境構築すると、正面を向いたモデルがブラウザで確認できるかと思います。
srcフォルダ内にあるindex.tsを編集してから
$ npm run build $ npm run start ビルド・実行し直すことで機能を追加できます。
編集にあたってthree-vrmのexamplesを参考にすると述べましたが、具体的には各デモに対応するhtmlファイルのscriptブロックを参照します。
カメラのコントロール Three.jsの機能を用いることで、マウスドラッグによる視点操作が容易に実装できます。
こちらはデモのbasicを参考にしましょう。OrbitControlsをインポートし、シーン設定時にcontrolを生成していることが分かります。
// camera controls const controls = new OrbitControls( camera, renderer.domElement ); controls.screenSpacePanning = true; controls.target.set( 0.0, 1.