Simu×Simu×Shading!!!(副題：MagicaVoxelによるSimutransアドオン作成における、シェーダーの活用と実践)

12月 22, 2022

この記事はSimutrans Advent Calendar 2022への参加記事です。

はじめに

こんにちは、洩矢急行です。

ボクセル、もう説明しなくてもいいくらいメジャーになりましたね(他人事)

今年もいくつかボクセルを用いたアドオンを作る事ができました。

これとか

また、今年のアドベントカレンダーでも、記事中でボクセルに言及されているものが2つほどあります。

【Pak128Japan】環境よくするプロジェクト【Simutrans Advent Calendar 2022】

ボクセルで自動車を作ろう【Simutrans Advent Calendar 2022】

さて、今回はMagicaVoxelに拡張機能を追加するシェーダーと、その活用法に触れられればなと思っています。

今回はちょっと発展的な内容になるので、初めてだよーって人は、以前の記事も併せて読んでいただくとちょっとわかりやすいかもしれません。

注意：この記事では、MagicaVoxel-0.99.7.0 を例に扱います。

MagicaVoxelでは本体の更新によってUIが大きく変わることもしばしばある為、掲載画像と配置や表記が変わっている場合があります。

機能自体が無くなることはほぼないと思いますので、同じ機能の場所を探してみてください。

そもそもシェーダーって何？

ざっくりいえば、MagicaVoxelに機能を追加するアドオンのようなものです。

こういうのがパッと作れるようになります

本来「シェーダー」は別の意味があるようなのですが、専門外なのでよくわかってないです……

導入方法

シェーダーはtxtファイルの形式で配布されています。

使用するときは、配布元のライセンスに目を通しておきましょう。

配布サイトの一例

Home · lachlanmcdonald/magicavoxel-shaders Wiki

undefined

txtファイルの中身はGLSL(OpenGL Shader Language)という言語で記述されており、自作が可能です。

作り方などに関してはここに記載があるようです(英語)

導入方法は簡単、配布されているシェーダーのtxtファイルを、MagicaVoxel本体のあるフォルダ内の「Shader」フォルダに入れるだけ。

Shaderフォルダ以下のフォルダも読み込んでくれるので、分類や整理も簡単です。

こんな感じでフォルダ分けすると

こんな感じで表示される

基本的な使い方

シェーダーの機能は画面右上、マークの所から選択します。

ここの

これ

すると右下に、導入したシェーダーの名前がずらりと表示されるので、使いたいものを選びましょう。

ずらり

今回は「tiles」のシェーダーを例に説明していきます。右上にはシェーダーの設定項目が出てきます。

「引数」の項目でパラメーターを設定

大体の場合、配布ページで各パラメーターが何を表しているのか記載があるので、参考にしつつパラメーターを設定しましょう。

tilesブラシの設定項目と、今回の設定値は以下の通りです。

パラメーター	説明	今回の設定値
Width	タイルの幅(x軸)	2
Height	タイルの高さ(y軸)	4
Depth	タイルの深さ(z軸)	6
Offset X	X軸上のタイルのオフセット	0
Offset Y	Y軸上のタイルのオフセット	0
Offset Z	Z軸上のタイルのオフセット	0

https://github.com/lachlanmcdonald/magicavoxel-shaders/wiki/Tiles-Brushより翻訳・追記

また、配布ページによると、

「The tiles brush generates a tile pattern using the first and last selected color from the palette.」
(タイルブラシは、パレットから最初と最後に選択された色を使ってタイルパターンを生成します。)

とありますので、左側のパレットから色を2つ選んでおきましょう。

d&dすることでパレット上で隣接する色を複数選択できるほか、Shiftを押しながらクリックすることで、離れた場所の色同士も選択可能です。

白い点がついている所の色が選択されています

設定が終わったら、右側にあるシェーダー設定のエリアに戻って、▶のボタンを押します

ここの▶

すると、シェーダーが適用されます。やったね！

こんな感じ

また、一部のシェーダー(後述のブラシシェーダー)はブラシツールからも扱うことができます。

のマークがシェーダーツール

こちらでも、先に右側メニューでシェーダーの選択とパラメーターの設定を行います

操作感としてはボックスモードに近い

図形や面、ボックスなど他のブラシツールと同様、配置・消去・着色がそれぞれ可能です。また、選択範囲ツールのように、あとから変形させることもできます。

伸ばしたり

縮めたり

ボリュームシェーダーとブラシシェーダー

シェーダーはその性質によって、この2つに大別する事ができます。

大雑把に言うと、オブジェクト全体に対して効果を与えるのがボリュームシェーダー、オブジェクトの一部に対して効果を与えるのがブラシシェーダーみたいな感じですね。

実際に使用する上で意識することは余りありませんが、性質の違いとして理解しておくといいと思います。

ちなみに、ブラシシェーダーは既存のオブジェクトをペイントしたりも出来ます。

ただ、その際に注意しておきたいのが、MagicaVoxelのブラシでは、選択されていない範囲に適用されるという点です。

水色の部分を選択していると……

避けるように塗られる

塗りたい範囲を選択した後、選択範囲の反転(Ctrl+I もしくは右の編集メニュー)を忘れないようにしましょう。

反転した後に塗った姿

で、何ができるの？

様々なシェーダーがある訳ですが、それをどう活かしていくかはアイデア勝負な所があります。

今回は以前のアドオン作成で使ったものや、使えそうと思っていた活用法をいくつか紹介します。

なお、各シェーダーの設定項目などは簡単に紹介しますが、詳しい使い方などはリンク先の配布ページを参照してください。

レンガを作る

植え込みの煉瓦部分

（使うシェーダー：Brick Brushes）

これは名前そのまんまですね。

建物の壁や塀、花壇なんかでレンガを使えそうな場所って結構多いと思います。

設定項目はこんな感じ。

パラメーター	説明	今回の設定値
Mode	カラーモード	0
Direction	レンガの向き	0
Width	レンガの幅(x軸)	1
Height	レンガの高さ(y軸)	2
Depth	レンガの深さ(z軸)	1
Grout Size	フチの幅 0の場合はフチなし	0
Grout Color	フチの色(パレット番号で指定) 0の場合はフチ部分が空白になる	1
Offset	列ごとの位置ずれ 0の場合はランダム	0
Noise	1レンガ内の色のランダム性 0で単色、100に近づくほどノイズ多め	0
Threshold	歯抜け度合い 100で歯抜けなし、0に近づくほど歯抜け多め	100

今回選択した色は

■#b55233(r:181 g:82 b:51)

■#a34a2e(r:163 g:74 b:46)

■#924129(r:146 g:65 b:41)

■#803924(r:128 g:57 b:36)

の4色です。

モデルが小さい場合、無理にフチを設定せず、レンガ本体の色を複数設定したほうがそれっぽく見えます。

ちなみに、bricksと名のつくシェーダーには、bricksとbricks_vertの2種類ありますが、両者の差異はオフセット方向の違いだけなので、設定項目に差はありません。

シチュエーションによって適切なものを選びましょう。

屋根を作る
屋根部分を作成

（使うシェーダー：Prism Brush）

このシェーダーは、錐体を作成します。

生成した図形と組み合わせて、簡単に屋根を作ることができます。

ブラシで指定したサイズによって、底面の大きさと高さを設定し、パラメーターによって傾きを指定します。

設定項目はこんな感じ。

パラメーター	説明	今回の設定値
Mode	モード（0で直線、1で曲線）	0
Size X	x軸上の傾斜のサイズ	12
Size Y	y軸上の傾斜のサイズ	12

また、x軸方向・y軸方向それぞれ傾きを設定できるので、いずれかの傾きを0にすることで、切妻屋根を作ることも可能です。

Size Y のパラメーターを0に

また、モードを1にすると、傾きが曲線になります。

モードを1に

作成した立体を同じシェーダーで一部消去したりすると、こんなものも作れます。

雪を降らせる

（使うシェーダー：Cover）

既存のモデルの上に、設定した色のボクセルが層になって積み重なります。

上の2つはブラシシェーダーに分類されるものですが、このCoverシェーダーは全体に適用されるボリュームシェーダーです。

設定項目はこの通り。

パラメーター	説明	今回の設定値
Headroom	表面上で利用できる必要がある空間のボクセルの数 (後述)	1
Noise	ボクセルが欠ける確率 0の場合欠けは無し、100に近づくほど欠損が増える。	0
Seed	グローバルシード	100

Handroomの設定項目は、こちらから感じ取ってほしいです。

元のモデル

Handroom : 1

Handroom : 5

Handroom : 10

Handroom : 15

こちらの項目も複数色を選択する事ができます。

見本で選択した色は以下の通りです

■#ffffff (r:255 g:255 b:255)

■#f3f3f3 (r:243 g:243 b:243)

■#e6e6e6 (r:230 g:230 b:230)

■#dadada (r:218 g:218 b:218)

白一色だけでなく、グレーなども混ぜることで凹凸が強調され、よりリアルな質感に近づける事ができます。

おわりに

~~うーん読みづらい！~~

便利な機能なのは間違いないんですけど、その良さがイマイチ文面だけで伝わっているのか心配になりますね。(動画とかの方が伝わりやすかったかも……？)

どのシェーダーをどのように活かすかは使い手に委ねられているので、アイデア次第でより良い活用法を見つけられることと思います。

不明な点などありましたら、コメント欄は勿論の事、TwitterやDiscordなどで聞いてみてください。出来る限り回答します。

では、良きボクセルライフを！

おまけ

降雪をディティールアップさせる

先程紹介したCoverシェーダーを用いた降雪対応ですが、ひと手間加えることでよりそれっぽく作る事ができます。

雪溜まりを作る

軒下の雪が滑り落ちる先や、建物の脇など、雪が貯まりやすい、雪をどけた先になりそうなヶ所には、余計に雪を盛ってあげます。

ボクセルモードのオプションから、値を大きくすると簡単に作る事ができます。

壁の脇の雪だまり

[▼ボクセル]の右にある数字を大きくすると、ブラシのサイズが大きくなります

また、駐車場などの広い土地がある場合、除雪した雪をためておく雪捨て場を作るのもいいかもしれません。

駐車場脇に雪捨て場を

轍を作る

折角なのでシェーダーを使った方法を紹介します。

まず、パレット上に未使用の色を用意しておいてください。(マーキングに使います)

今回は赤を使います。

まずは、轍をつける部分をマーキング色で塗ります。

ボクセルモードを使うと便利です。

まずは片輪分だけ塗って

コピペして書き足して両輪分にします

次に、マーキングした部分を2段分盛り上げます。

面モードで盛り上げます。モリモリ

マーキング色の部分を選択し、右下の編集メニュー-修正から、中空を選択します。

マーキングの一番上の面を削除し、凹状にします。

次に、パレット上で雪に使っている色をコピーします。

パレットを分けたいだけなので、色は同じでOK

マーキングした部分を、コピーした先の色を使ってrandで配色します

配色後の姿、色は同じなので周りとの違いは分かりません

ここからはレンダリングモードでの設定になります。

コピーした先の色を全て、材質をガラスに変更し半透明にします。

設定項目はこんな感じ

すると……

イイ感じになったかな？

また、コピー先の色で轍のない部分を塗ると、除雪された部分っぽくも見えます。

蛇足

記事タイトルの由来はこれです↓

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

~~そろそろネタが尽きてきました~~

お目汚し失礼しました。

このブログを検索

もりや雑感