tanaka's Programming Memo

プログラミングについてのメモ。

Voxel ImporterでMagicaVoxelのボクセルを読み込んで透過させたり光らせたり

f:id:am1tanaka:20210801001016p:plain
光る砂時計

この記事は Unity アセット真夏のアドベントカレンダー 2021 Summer! – Unity公式 Asset Portal の4日目の記事です。

assetstore.info

▲前の日は さとや さんの「単独でも活用できる!Corgi Engine/TopDown Engineに同梱されているMMFeedbacksの紹介」でした。

▼次の日は kido さんの「History Inspector の紹介」です。

この記事では、ボクセルのモデルを簡単に読み込んだり、ボーン設定ができる定番アセット Voxel Importer を利用して、透過や自己発光するボクセルモデルを手軽に作成する方法をご紹介します!!

assetstore.unity.com

モデリングにはMagicaVoxelを利用します。

ephtracy.github.io

目次

記事の環境

以下の環境で作成しました。

  • Windows10
  • Unity2020.3.9f1
  • Voxel Importer 1.2.2
  • MagicaVoxel 0.99.6.2

MagicaVoxelでモデルを作成する

光る砂時計を作ってみます。今回のミソは素材ごとに違うマテリアルが割り当てることです。そのためにMagicaVoxelのRenderモードで色に素材の設定をします。また、今回のような多層構造を作るのに便利なレイヤーとオブジェクトの使い方も簡単にご紹介します。

MagicaVoxelの使い方は以下の書籍がとても参考になります。これまで使ってなかったあれこれの機能が使えるようになりました^^

モデリング

素材は以下の3種類にします。

  • 上下の木の枠のボクセル
  • 透過するガラスのボクセル
  • 光らせる砂のボクセル

上下の枠

必要に応じてサイズを設定します。今回は15 15 15で作成しました。

f:id:am1tanaka:20210801130851p:plain
オブジェクトのサイズ設定

  1. index:96のパレットを選びます
  2. EditパネルのSHAPE欄からCyliをクリックして円柱を作ります
  3. Eraseモードにします
  4. Faceモードにします
  5. 高さが2になるまで削除します

f:id:am1tanaka:20210801131132p:plain
下の枠の作成

EditパネルのMIRROR欄のZをクリックして、作成したのと同じ形を上にも作ります。

f:id:am1tanaka:20210801131313p:plain
上の枠

BrushパネルのMirrorモードのX, Y, Z全てONにして、角取りをしたら枠は出来上がり。

f:id:am1tanaka:20210801132847g:plain
枠の角取り

砂とガラスの部分は二重構造になっています。先に内側の砂で形を作ってから、ガラスのボクセルで砂を覆えば良さそうです。

砂のパレットはindex:184の緑でこんな形にしました。

f:id:am1tanaka:20210801140202g:plain
砂の作成

f:id:am1tanaka:20210801140423p:plain
枠と砂

ガラス

砂を覆うようにindex:73のパレットでガラスのボクセルを置きます。

f:id:am1tanaka:20210801141848g:plain
ガラスで覆う

f:id:am1tanaka:20210801191120p:plain
覆った

マテリアルを設定

マテリアルを分けるために色のMatter設定をします。まずは以下の通りガラスの設定をします。

  1. Renderモードに切り替えます
  2. ガラスのパレットであるindex:73を選択します
  3. MatterパネルのMATERIAL欄からGlassを選択します
  4. 適当にパラメーターを設定します

f:id:am1tanaka:20210801180019p:plain
ガラスの素材設定

砂の設定をします。

  1. 砂のパレットであるindex:184を選択します
  2. MatterパネルのMATERIAL欄からEmitを選択します
  3. 適当にパラメーターを設定します

f:id:am1tanaka:20210801180326p:plain
砂の素材設定

以上で素材の設定が完了です。枠、砂、ガラスに異なる設定をしたので、別のマテリアルが割り当てられます。

オブジェクトとレイヤー

雰囲気は良い感じになりましたが、砂が上から下まで詰まっていて砂時計に見えません。Unityに持って行く前にちょっと砂を減らします。

砂の調整はガラスや枠のボクセルをずらせばできますが面倒です。そこで砂を別レイヤーにします。この辺の操作がMagicaVoxelは独特で、理解するのに苦戦したので本筋とは違いますが備忘録として。

  1. Modelモードに切り替えます
  2. 右上の上三角形のアイコンをクリックしてワールドモードに切り替えます

f:id:am1tanaka:20210801180658p:plain
ワールドモードへ]

何もない場所をクリックすると、砂時計の大きさの立方体のワイヤーの色がレイヤーの色になります。砂時計がレイヤー0にあるオブジェクトだということを表しています。

f:id:am1tanaka:20210801180755p:plain
レイヤーを表す色

起動時にいじっているのはレイヤー0にある1つのオブジェクトということになります。MagicaVoxelでは1つのファイルにこのようなオブジェクトを複数持たせることができます。オブジェクトは新しく追加したり、コピーして複製したり、丸ごと移動したり、他のvoxファイルからImportして読み込むことができます。

オブジェクトの複製

現在のレイヤー0のオブジェクトを、レイヤー1に複製します。

  1. 砂時計をクリックして選択します
  2. EditパネルのSELECT欄からCopyをクリックします
  3. Pasteをクリックします

f:id:am1tanaka:20210801181351p:plain
オブジェクトを複製

見た目には分かりませんが、これで砂時計は2つに増えています。赤の矢印をドラッグして移動させると、2つの砂時計が確認できます

f:id:am1tanaka:20210801181539p:plain
コピーした砂時計を移動

レイヤーの設定

編集しやすくするためにレイヤーを分けます。BrushパネルのLAYER欄から、赤い丸の右の1と書いてある欄のさらに右の小さな四角の部分をクリックします。< が1の行に移動します。

f:id:am1tanaka:20210801181710p:plain
レイヤーの設定

これで選択していたオブジェクトがレイヤー1に移動しました。よくあるツールだと「レイヤーを指定してオブジェクトを作成」という感じですが、MagicaVoxelでは「オブジェクトを作成してから別のレイヤーへ移動」という感じです。

LAYERの0の左の丸をクリックすると片方の砂時計が消えます。1の丸をクリックすると、もう一方の砂時計が消えます。丸をクリックし直せば表示します。これで、好きな方だけ砂時計を表示することができます。

f:id:am1tanaka:20210801182139g:plain
レイヤーの表示と非表示

レイヤー0から砂を消す

レイヤー0を表示して、レイヤー0の砂時計をクリックして選択します。

f:id:am1tanaka:20210801182402p:plain
レイヤー0の砂時計を選択

  1. 右上の下三角アイコンをクリックしてモデルモードにします。
  2. Region Selectツールで枠の部分をクリックして選択します
  3. Transformツールで移動させて砂時計のボクセルを見えるようにします
  4. Region Selectツールで砂時計のボクセルの一つをクリックして選択したら、右のEditパネルのSELECT欄からCutで削除します
  5. 枠を元の位置に戻します

f:id:am1tanaka:20210801185004g:plain
砂を消す

レイヤー1を砂だけにする

同じような操作をして、レイヤー1のオブジェクトを砂だけにします。

  1. 右上の三角をクリックしてワールドモードに切り替えます
  2. 赤い枠のレイヤー1の砂時計をクリックして選択します
  3. 右上の三角をクリックしてモデルモードに切り替えます

f:id:am1tanaka:20210801185429p:plain
レイヤー1の砂時計を選択

  1. Region Selectツールを選択します
  2. 枠のボクセルの一つをクリックして選択します
  3. Cutで削除します

f:id:am1tanaka:20210801185616p:plain
枠を削除

f:id:am1tanaka:20210801185722p:plain
枠の削除完了

同様にしてガラスを削除します。

f:id:am1tanaka:20210801185750p:plain
砂だけ

あとは、砂を削除して好みの状態にします。削除する前の砂のオブジェクトをコピーして、別のレイヤーに取っておくと砂のさまざまな状態を作りやすくなります。

f:id:am1tanaka:20210801185944p:plain
砂完成

右上の三角をクリックしてワールドモードに切り替えたら、レイヤー1の場所を移動させて、レイヤー0の砂時計に重ねます。

f:id:am1tanaka:20210801190601g:plain
レイヤー0と1を重ねる

以上で完了です。Renderモードでレンダリングすると、砂が光っている砂時計がレンダリングされます。

f:id:am1tanaka:20210801190653p:plain
砂時計ボクセル完成!!

任意の場所にvoxファイルとして保存して、MagicaVoxelでの作業は完了です。

Unityにボクセルを読み込む

Voxel Importerでvoxを読み込む

ここからはあっという間です。UnityのプロジェクトにVoxel Importerをインストールします。

assetstore.unity.com

ついでにPostProcessing Stack V2も設定しておくといい感じで光るので良いです。PostProcessing Stackについてはこちらなどを。

Voxel Importerをインストールすれば、ボクセルの読み込みはvoxファイルをProjectウィンドウにドラッグ&ドロップするだけです。

f:id:am1tanaka:20210801213741p:plain
ボクセルをインポート

読み込んだボクセルをシーンにドラッグ&ドロップすれば表示できます。

f:id:am1tanaka:20210801213839p:plain
ボクセルの表示

パラメーターの調整

MagicaVoxelで設定したMatterの設定の多くはUnityへは反映されないのでUnity側で調整が必要です。また、他にもいくつか設定しておきたい項目があるので調整します。

  1. Projectウィンドウで読み込んだボクセルを選択します
  2. デフォルトでは1ボクセルが1mです。砂時計は15ボクセルなので15mと巨大なので、Scaleを0.066にしておおよそ1mにします
  3. Applyをクリックして変更を適用します
  4. Extract Materials...ボタンをクリックして、Materialsなどのフォルダーを指定して、マテリアルを保存します

f:id:am1tanaka:20210801214719p:plain
基本設定

ライトをベイクする場合は、さらに以下を設定すると問題が起きにくくなります。

  1. Advancedに切り替えます
  2. Share same faceのチェックを外して、面の共有をやめます
  3. Generate Lightmap UVにチェックを入れます
  4. ベイク時にoverlapの警告が表示される場合は、Pack Marginを増やすと軽減できる場合があります
  5. 全て設定したらApplyボタンを押します

f:id:am1tanaka:20210801215125p:plain
Advanced設定

マテリアルの設定

Extractしたマテリアルを編集して見た目を調整します。保存したマテリアル名ではどのマテリアルか不明ですが、ガラス用のマテリアルはシェーダーがTransparentになっているので分かりやすいです。

  1. Albedoのアルファを下げて透過させます
  2. Smoothnessを大きくしてピカピカにします

f:id:am1tanaka:20210801215752p:plain
ガラスの設定

残り2つのマテリアルのAlbedoを変更してみて、砂のマテリアルを探します。見つけたら、Emissionを設定して光らせます。

f:id:am1tanaka:20210801220103p:plain
Emissionの設定

以上で完成です!!

f:id:am1tanaka:20210801001016p:plain
完成!!

Voxel Importerのメリット

MagicaVoxelはobj形式でのエクスポートができるので、Voxel Importerがなくても同じようなことはできます。ただし、objだと以下のような感じに読み込まれます。

f:id:am1tanaka:20210802122335p:plain
objだとメッシュやテクスチャが分かれてしまう

Voxel Importerなら1つのメッシュで済みます。他にも、ボクセルにウェイトを設定してアニメさせることもできますし、ボクセルの最適化などもできますので、持っていると何かと有難いアセットだと思います。

まとめ

MagicaVoxelで作成したモデルをVoxel Importerで読み込んで、透過や自己発光を設定しました。

assetstore.unity.com

MagicaVoxelで色のMATERIALを変えるとUnityに別マテリアルとして読み込める性質を使って、1つのボクセルモデルに複数のマテリアルを設定しました。静止オブジェクトならドラッグ&ドロップだけでボクセルを読み込むことができ、マテリアルの取り出しもボタンひとつでできます。あとはマテリアルの設定をいじるだけ。また、MagicaVoxelのレイヤーを使うと多重構造などを作りやすくなります。

こんなことをしながら、3年目に突入したVoxelorerBirdの制作を続けています。

大半がMagicaVoxelの記事のような気がしますが、以上、Unity アセット真夏のアドベントカレンダー 2021 Summer! – Unity公式 Asset Portal の4日目の記事でした。

assetstore.info

▲前の日は さとや さんの「単独でも活用できる!Corgi Engine/TopDown Engineに同梱されているMMFeedbacksの紹介」でした。

▼次の日は kido さんの「History Inspector の紹介」です。

では良い制作の夏を!

参考URL

参考図書