VRoid Studioという神ツールをご存知ですか？こちらは果てしなく簡単に3Dキャラクターを「描く」ことができるツールです。YouTubeやVRCなど、「Vのモノ」が流行っている昨今自分の分身となる3Dモデルが欲しくなるのは必然…私も色々と弄っては自分のモデルを作成しています (完成したとは…言ってない…)。

VRoid Studio | VRoid

VRoid Studioは、人型アバター（キャラクター）の3Dモデルを作成できるWindows・Mac用アプリケーションで、どなたでも無償でご利用いただけます。作成した3Dモデルは、VR/ARコンテンツ内でアバターとして利用するなど、商用・非商用を問わず、さまざまな用途に活用できます。

しかし、そんな神ツールのVRoid Studioにも微妙な点があります。それは「髪の毛の合成ができない」こと…。ツール内で作成した髪型はプリセットとして保存、他のモデルを作成するときに読み込むことで再利用することができます。しかし、読み込める髪型は1つのみ、他の髪型を読み込もうとすると追加はしてくれない仕様になっています。

VRoid Studioの髪型プリセットはBoothなどで購入することもできます。ここではケモミミやメガネだったり、自分で作成した髪型に”追加”したいのですがVRoid Studioだけでは実現することができません。

そこで「VRoid Studio髪型合成ツール」をWebアプリとして作成しました。この記事では、技術的な面と合わせて簡単に紹介していきたいと思います。(※もちろん非公式ツールです)

基本機能紹介

VRoid Studio Hair Mixer

VRoid Studioの髪型プリセットをただただ合成してくれるWebツールです。

本ツールの機能は至極単純、髪型プリセットを合成するだけ…です。

下準備

まずは下準備です。まずは合成したい髪型を準備します。こちらは自分で作成してもインターネット上で入手しても大丈夫です。

VRoid Studioで髪型を作成/保存した場合は下記の場所に保存されています。

▼Windows
（”AppData”は隠しフォルダの為、フォルダーオプションにて「隠しファイル、隠しフォルダー、および隠しドライブを表示する」にチェックを入れることで表示されます。）
C:\Users\ユーザー名\AppData\LocalLow\pixiv\VRoidStudio\hair_presets
▼Mac
（”Library”はデフォルトでは非表示の為、「/Users/<ユーザ名>/」まで開いた状態で「command+shift+.（ドット）」を押すことで表示されます。）
/Users/<ユーザ名>/Library/Application Support/com.Company.ProductName/hair_presets
※Finder>移動>フォルダへ移動>「フォルダの場所を入力:」へ上記パスを入力してください。

作成したモデルや髪型のプリセットを削除する方法

引用した部分に書いてあるように、これらは隠しファイルになっているので閲覧には解除しておく必要があります。

上記のフォルダを見てもらうと、髪型プリセットの中身はpreset.jsonとテクスチャ画像(png形式)になっています。次の段階ではこれらのファイルをブラウゼで選択することで合成していきます。

合成

合成する髪型が決まったらいよいよ本ツールの出番です！画面上のお願い通りにファイルを選択してください。

この時、はじめにベースにしたい髪型を選択してください。1プリセット内にベースヘアは1つのみなので、2つ目に読み込まれるベースヘアは無視されます。

合成が完了すると合成結果のzipファイルをダウンロードすることができます。

これを解凍し、髪プリセットが保存されているフォルダに設置することでVRoid Studioから合成した髪型を使用することができます。

合成例

というわけで、上記の作業でこんな感じに合成できます！

デフォルトキャラ2名にご協力いただきました。

技術的な話

さて簡単にですがツール自体の説明をしたので技術的な部分も簡単にまとめておきます。

フロントエンド

Svelte • Cybernetically enhanced web apps

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

フロントエンドにはSvelteというJavaScriptフレームワークを使用しています。ここらのフレームワークとしてはReactやVueが主流のようですが、シンプルに実装できるという点ではこのSvelteに大きなアドバンテージがあります。

kognise/water.css

A drop-in collection of CSS styles to make simple websites just a little nicer – kognise/water.css

スタイル部分ではWater.cssというクラスレスのCSSフレームワーク(と言っていいのでしょうか?) を使ってみました。

こちらは1つのcssを読み込むだけでページの見た目を「それっぽく」整えてくれます。この領域ではBootstrapなどが多く使われていますが、それらはデザイン用のクラスを付与する必要があり、結果としてコード内に処理とは関係ないクラスを多く記述しなくてはいけなくなります。

一方クラスレスのwater.cssは読み込むだけ。導入するときも削除するときも簡単です。今回はそのまま使用していますが、本番のcssができるまでの仮置としても活用していけそうです。

バックエンド

このツールでしたらフロントエンドだけで作ることも可能だったのですが、fastAPIでツールと作ってみたかったのでバックエンドも実装してみました。

FastAPI

FastAPI framework, high performance, easy to learn, fast to code, ready for production

fastAPIはその名の通りAPIを簡単に作ることができるWebフレームワークです。Pyhonでのコーディングは慣れていましたが、Webサーバとして書いたのは初めてでしたが、fastAPIはドキュメントも分かりやすく簡単に実装することができました。

終わりに

さて簡単に書いてきました。何といってもVRoid Studioが神ツール過ぎて髪ツールを作った。それだけです。

MagicalVoxelでキャラクターを作る

さて、まずは今回のメインとなるキャラクターを作らないといけません。しかしこれはMagicalVoxelを使っていれば簡単に「それっぽい」ものが作れます。というわけで今回私が作成したのが以下のようなキャラクターです。

私でも1,2時間くらいで作れたので、何回かMagicalVoxelでモデリングをしたことがある方であれば、1時間もかからずにこのくらいのキャラクターを作れると思います。とは言え流石に全く方針もない状態では作るのが難しいと思いますので、私が参考にさせてもらったサイトさんを紹介しておきます。

オリジナルアバターを簡単に作りたい人向けチュートリアル　モデリング編

それでははじめていきましょう。 ドット絵感覚で3DCGモデルを作れるMagicaVoxelを使用します。 こんな感じになります。 まずは MagicaVoxel のダウンロードをしてください。…

こちらの解説は、キャラクターのモデリングだけではなく、MagicaVoxel自体の使い方もとても分かりやすくまとまっていて、とても参考になりました。こちらのサイトさんでは、モデリング後にBlenderを用いてボーン入れなどを行っていますが、今回はより簡単な方法でお手軽にやってみようと思います。

キャラクターのモデリングをする際は、Tポーズと呼ばれる形で作成する必要があります。これは上記の画像のように腕を横に伸ばして足は揃えている形です。これは後の作業で重要になってきます。また、モデリングをする際は髪の毛先と体など、分かれていて欲しいところは1ブロック分話しておく必要があります。もしくっついていると、モデルを動かした際に、体に髪の毛がくっついて動いてしまいます。

エクスポートしてMixamoでオートリグ

モデルが完成したら、obj形式でエクスポートします。エクスポートするにはウインドウの右下にあるボタンから形式を選んで保存先を決めるだけです。今回はobj形式で出力したいため、左上のobjと書かれているボタンから保存しました。保存が完了すると、指定したフォルダ内にobj,mtl,pngの3形式で指定した名前のファイルが出力されます。これらは後ほどの手順でしようするためしっかり置いておいてください。

次にMixamoというサービスを使用して作成したモデルに骨を入れていきます。MixamoはAdobeが買収して運営している3Dキャラクターのカスタマイズやアニメーション付けができるWebサービスです。

Mixamo

Upload your custom character to Mixamo and get an automatically rigged full human skeleton, custom fit to your model and ready to animate. Customize your rigging options with optimizations for mobile performance. Motion Captured …

Mixamoにアクセスして、AdobeやGoogleのアカウントでログインします。もし該当のアカウントがなければ無料でする作成することもできます。

ログインするとアニメーションを選択する画面になりますが、それらは無視して画面右にある「UPLOAD CHARACTER」から先ほどエクスポートしたobjファイルを選択します。アップロードが完了するとモデルが灰色の状態になりますが、それは気にせずNEXTを押して進んでください。

次にマーカーをモデルの体に合わせて設置する作業になりますが、ページ内の図の通りに設置するだけで大丈夫です。私の場合は以下のようになりました。

マーカーが置けましたら、ウインドウ下の「Skeleton LOD」から「No Fingers」を選択してNEXTを押します。たったこれだけで、体に合わせた骨をモデルに入れてくれます。便利ですね。

もしエラーが発生した場合は設置したマーカーが体の表面すれすれになっていないか確認してみてください。気持ち中心の方にマーカーを設置することで解決することがありますのでエラーが出る場合は確認してください。

処理が完了すると先ほどのアニメーションを選択する画面に戻ります。ここで左のアニメーション欄から選択することでモデルが動き出します。しばらく動いている様子に感動したのち、「Download」から骨入りモデルをダウンロードします(ダウンロード前に選択したアニメーションを削除するため、「Download」ボタンの3つくらい下にあるアニメーションの設定項目右上のバツボタンを押してください)。ダウンロードする際の「Format」は「FBX for Unity(.fbx)」、「Pose」は「T-Pose」を選択してください。

UnityでVRMファイルに変換

最後にこれまでの手順で作成したファイルを汎用性の高いvrmファイルに変換しておきたいと思います。この作業にはUnityを使用するため、Unityが入っていない場合は個人/小規模であれば無料で使用できるのでインストールしておいてください。

… インストールしておいてくださいと言いつつ、参考にさせてもらったサイトさんで完ぺきな解説がされていたので、ここではリンクの紹介だけさせていただきます。

【Unity】人型アバターのFBXファイルをVRMファイルに変換する

FBXの人型アバターをVRMに変換する流れをご紹介します！

1つだけ注意点ですが、MagicaVoxelで作成したモデルは世間的にはとても小さいです。そのため、上記のサイト内では「モデルのスケール→XYZが全部1.0になっているか」という確認手順がありますが、ここだけ、指示を無視して35倍程度にしておくとちょうどいい大きさで出力してもらえます。

VroidHubに登録してみる

おまけに、VroidHubというプラットフォームに作成したvrmファイルをアップロードすることで、モデルを活用しやすくしておこうと思います。

VRoid Hub

VRoid Hubは、3Dキャラクターのための投稿・共有プラットフォームです。モデルデータをアップロードするだけでキャラクターが活き活きとアニメーションするプロフィールページを作成でき、利用条件と共にモデルデータを配布することもできます。登録した3Dモデルは、VRoid Hubと連携した各種VR/ARプラットフォームや3Dコンテンツ上で利用可能です

上記の手順でvrmファイルまで完成しているためアップロードは簡単です。上記のリンクからサイトにアクセスしていただき、pixivアカウントでログインしてください。ログインができると画面上部に「キャラクターを登録」というボタンが出てきますので、あとは画面の指示通りにファイルをアップロードするだけです。

というわけでこれで作業完了です！あとはVroidHubに対応したアプリで読み込むだけで使いたい放題です。お疲れさまでした！

ちなみに…vrmファイルを作成する際にそのままの大きさで出力するとこんな感じにアリエッティになります。

終わりに

という感じで、今回はMagicaVoxelでモデリングしたキャラクターをVRMファイルへの変換するところまでをやってみました。ちょっと前ではこんな簡単に動くモデルを作成することは難しかったと思いますが、いい時代になりましたね。

さらには使うときも様々なアプリで統一のフォーマットやプラットフォームからのダウンロードに対応していて便利になりました…これからもっと進化していってほしいものです。

ご覧いただいた通り、私には絵心はありません。それもそのはず、生まれてこの方、ちゃんとイラストの勉強をしたことがありません。なんだか小とか中とか高の時にそのような授業があったような気もしますが、きっとそんなこともありません。

次にこちらの画像をご覧ください。こちらは今回紹介するMagicalVoxelというソフトを使用し、先ほどと同じように5分くらいで作成したボトルガムです。いわゆるボクセルアートというヤツです。(便宜上「アート」と銘打ちましたが内容が伴っていないのは目をつむってください)

いかがでしょうか？ なんだか「それっぽい」感がありませんか？もちろんこの作品は、先ほどの残念絵と描いたのと同じ人間が作りました。同じ人なのにここまで違いが出るのはちょっと気になりませんか？ というわけで、今回は、この「それっぽい」を簡単に生み出したMagicalVoxelを紹介したいと思います。

MagicalVoxel とは

MagicalVoxelは @ephtracy 氏がオープンソースで開発を進めている、ボクセルモデリングソフトです。このソフトは高性能ながら無料で使用することができ、ボックスを積んでモデリングするだけでは無く、綺麗なレンダリングまでこのソフト内で完結することができます。OSはWindows, Mac両方に対応しているためほとんどのPCユーザは使用できると思います。

MagicaVoxel

MagicaVoxel Official Website

そもそも、「ボクセル」とは何か…という所ですが、調べてみると「ボクセル」とは「コンピュータ上で立体を表現するときの最小単位」とのことらしいです。平面では最小単位を表現しようとすると「ドット」がありますので、その立体版ということになると思います。また、ドットを組み合わせて絵を描くと「ドット絵」になりますが、その立体版が「ボクセルモデリング」と言えそうです。

インストール→起動

では早速インストールしていきます。このソフトは公式ホームページのリンクからダウンロードすることができます。使用するPCの環境にあったバージョンをダウンロードして適切なフォルダに解凍することで起動できるようになります。

使用しているPCがMacの場合は、時々正常に起動できない症状があるらしいのですが、その場合は解凍したファイル内のソフト本体を一度別のフォルダに移動したのち元に戻すと正常に起動するようになるらしいです。残念ながら私はWindows環境なので、本当に症状が発生するか、上記の方法で直るのかは未検証です…。

使ってみる

さて、ソフトの導入が終わったので早速使ってみます。起動すると以下のような画面が出てきます。初見だとちょっと複雑そうに見えるかもしれませんが、慣れてくると、これが意外とシンプルにまとまっているのです。

操作方法の詳細はチュートリアル系の記事を書いている方がたくさんいるので省きますが、基本的には、画面左のパレットで色を選択して、パレットの右隣にあるツールからペンモード(ボクセルを設置)や消しゴムモード(ボクセルを削除)などの機能を選び、あとは好きな形にボックスを積んでいくだけです。

どのような手順でボックスを積んでいくかは、作りたいものによると思いますが、今回は果てしなく簡単な例としてルービックキューブを作ってみました。もとがただの立方体なので、色を選択してそれっぽい位置に設置するだけの簡単な作業でした。

画面左側のパレットを見ていただけるとわかると思いますが、パレット内では、自分の好きな色を作ったりもできるので、「使いたい色がない」ということもありません。

さて、MagicalVoxel ではここから、obj 形式などの3Dモデルでエクスポートすることもできますが、私が驚いたのは、レンダリングの機能です。この機能を使うことで、より「それっぽい」感が溢れる作品を作ることができます。というわけで以下の画像をご覧ください。

これは先ほどのただ色をつけただけの立方体をレンダリング機能で「それっぽく」したところなのですが、いかがでしょうか？ 私個人としては気に入っているのですが、ここまでの操作は先ほどのモデリングも含めて、15分程度です。そう思うと簡単に「それっぽい」を作れるというのがわかっていただけたかと思います。

ちなみに上記画像は、素材の設定だけしていて、黒い部分をガラスの設定で透明にし、他の色の部分は発光するように設定しました。この設定もポチポチとスライダーを動かすだけで簡単です。

以上が今回紹介したかったMagicalVoxelというソフトです。

最後に

はい。今回は簡単にMagicalVoxelという到底無料とは思えないような高性能ボクセルモデリングソフトを紹介してきました。本記事は私が作成したボクセル作品を掲載して紹介しましたが、このソフトをフルで使えば今回のような小物だけではなく、キャラクターモデルや風景など、作れる範囲はアイデア次第です。

Twitterでは「 #magicalvoxel 」のようなタグで今回の「それっぽい」とはかけ離れたとんでもなく素晴らしい作品たちが投稿されていますので、ちょっとでも本ソフトが気になった方は是非ともご覧ください。

そして、MagicalVoxel、是非ともいじってみてください。