2021.12.1
この記事は 裏ドット絵 Advent Calendar 2021 2日目 の記事です。本来であれば12/1の日記でした。
最近のnoteは便利ですね。
当然裏があるなら表もあります。（※もともとこちらのアドベントカレンダーが全部埋まったため、裏が生まれた。） 今後の両記事も、要チェックやで～！
はじめに
はじめましての方ははじめまして。JPEGで保存されたドット絵系VTuberの穣津ペグです。趣味はドット絵広告の蒐集でした。活動内容としてはドット絵を玩具にして遊んだりこねくり回したりしていたので、もしかしたらこの場にはふさわしくない存在かもしれません。あらかじめご了承ください。
ちなみにアドベントカレンダー自体は2018年に参加して以来です。これが当時の記事です。
ただ最近はもっぱら𝑨𝒅𝑺𝒆𝒏𝒔𝒆を𝑩𝒍𝒐𝒄𝒌してしまっているので、これだ～！と思うドット絵広告には巡り会えていません。しいて取り上げるとすればエ○ーテイルでいいんじゃないですか？
あとはこのような動画を制作しています。
動画のタイトルだけでドット絵を玩具にしていることがおわかりいただけるかと思います。あらかじめご了承ください。
閑話休題。本記事では「3Dモデルにドット絵テクスチャを使う」について語ります。本題が急すぎるな。今回は以下の3Dモデルを用いて解説します。
よろしくお願いします。
3Dモデリング制作までの経緯
そもそも何故わざわざ3Dモデルにドット絵を組み込もうとしたのか、というと「ドット絵VTuber」というアイデンティティを固持するためです。
穣津ペグは「JPEGで保存されたドット絵」というあるあるネタを擦るために誕生したVTuberですが、活動を始めて半年後あたりには3Dモデル制作に興味が移っており、自分用の3Dモデルを作りた～い！と考えるようになりました。しかし、ここで脱ドット絵を実行してしまうと存在意義が消滅するため、テクスチャをドット絵にするという手法を選択しました。
うっそで～～～す。ドット絵しか描けなくてテクスチャをドット絵にするしかなかったからです。この場では、極端な個人的需要に応えるための試行錯誤の成果を披露します。これが私の生き様だ！見ろ！！なあ！！
今回登場するソフトウェア・エディタ
Blender
3Dモデリングソフトの一種。かと思ったら2Dアニメも作れるし動画編集もできるよくわからないソフト。オープンソースなので無料で使える他、さまざまな機能に特化したアドオンなども開発・配布されている。本記事では3Dモデル開発に使用する。
Unity
ゲームエンジンの一種。個人開発者であれば無料で使えるのが特徴。めちゃくちゃ雑にいうと機能が多彩すぎるツクール。最近ではポケモンのリメイク版に使用されたエンジンとしても有名。
図解・これが穣津ペグのテクスチャだ！
急になにこれ？と思いますが大丈夫です。私も雰囲気でモデリングをやっています。一応説明しておくとこのテクスチャと呼ばれるものは、3Dモデルに質感を与えるための画像全のことを指します。これを今更ドット絵でやるやつがいるんですよ。
今回は「ドット絵テクスチャの上に載ってる格子状のやつ」が「3Dモデルで描画される場所」と対応していることだけ覚えてれば問題ありません。（界隈ではUVと呼びます。詳しくはUVマッピングで検索！）
次に、説明のために各ドット絵テクスチャをカテゴリ分けします。
①単色パレット
穣津ペグはドット絵ベースなので、単色でいい箇所（肌全体や服の大部分など）のUVはここに突っ込んでいます。パレットがなぜか2パターンあるのは後述のUnityに持っていこう！！で触れますので大丈夫です。
②顔パーツ
目元など、ドット絵の描き込みが必要な箇所はUVを分けてテクスチャを設定しています。複数種類あるのは表情を変更するためです。
③服飾・装飾パーツ
こちらも目的は顔パーツと同様です。必要に応じてUVを切り分けます。
④髪パーツ
顔パーツ／服飾・装飾パーツと同様です。
⑤その他
余り。装飾などを追加した時にドット絵が必要ならここに描き足します。
Blenderのシェーダー設定を変更しよう！
※ここは覚える必要がないので、「こういう設定で作ってるんだな～～～」と感じるだけでOKです。
ここで問題です。上記のドット絵テクスチャをBlenderの初期状態で反映した場合どうなるでしょうか？
こうなります。なぜかというと、穣津ペグのドット絵テクスチャは「アルファカット（※透明な部分を描画しない）」を前提に作っているのですが、初期状態だと透明な部分をそのまま描画しているからです。
そういうわけで、Blenderのシェーダーに「透明度を反映する」よう設定を行います。
これをこうして設定して…
透明な部分が切り取られていればOKです。
Unityに持っていこう！！
※今回のテーマに該当する部分だけを書きます。
3Dモデルを作成しても、使える場所がなければ持ち腐れです。今回はゲームエンジンの一種であるUnityで使えるようにしてみましょう。Unityで使えるようになればゲームはもちろん、今流行りのメタバースのアバターにもできます。
BlenderでなんかこうエイヤッってするとFBXファイル（※3Dモデルのファイル形式の一種。ドット絵でいうPNGみたいなもの。）を作成できるので、これをUnityに持っていきます。 「そらよッ！」
真っ白じゃないですかー！やだー！ まあテクスチャもマテリアルもシェーダーも設定していないからですが……
そういうわけでUnityにテクスチャを入れてマテリアルを作ってシェーダーを設定して反映させます。
Blenderのシェーダー設定と同じことが発生していますね。つまりUnity用にパラメータを設定して透明度を反映してやればいいってことじゃん！！ そういうわけで透明度が存在する箇所を切り取るよう設定してあげましょう。
パネル詐欺？
これはUnityのデフォルトのシェーダー（Standard Shader）が光源を計算して「影」を描画するせいです。穣津ペグの世界には影を必要としないので、意図的に無くしたいと思います。なんと、この世にはそういう用途のためのシェーダーが存在します。ありがたく使いましょう。トゥーンシェーダーと呼ばれています。
今回はVRMファイルで用いられるMToonを使います。とりあえず入れてみましょう。（※細かい内容はカットします）（※アルファカットだけに）
なんか物足りないですね。これは現在のシェーダーが「ポリゴンの裏面を描画しない」設定だからです。穣津ペグの3Dモデルは裏面描画をフル活用しているので、ここで改めて設定し直します。
ようやく見たことある姿になりました。ここで一工夫入れましょう。一部のシェーダー設定には「アウトライン」という項目があります。雑に説明すると、漫画の絵みたいに輪郭線を描画することができる優れた代物です。便利ですね～～～。さっそく反映してみましょう。
口のところに変なシワが出てしまいました。これはシェーダーがすべての輪郭に線を描画しているせいで発生しています。これを解消するために、アウトラインを描画しない場所を「マスク」情報として追加します。
マスクには画像ファイルを使用します。これが穣津ペグのマスクファイルです。
これだけだとよくわかんないですね。前述のドット絵テクスチャの上に重ねてみましょう。
なんとなく役割がわかりましたでしょうか？ 黒い部分が「アウトラインを表示しない」場所です。ようやく①単色パレットで詳細を飛ばしたところが来ましたね。アウトラインを「表示する場所」と「表示しない場所」を分けるためにあったんですね。今見返すと随分と無駄が多いな。
そうして完成したのが穣津ペグの3Dモデルです。うっひょ～～～～～～！
全身も貼っちゃおｗ
あとはHumanoid設定とかシェイプキーをなんたらするとポーズが取れるようになったり表情を変えたりできますが、話が脱線しすぎるのでこの辺で終わりとうございます。
さいごに
いかがでしたか？ 今後の人生においてこの技術が必要になる確率はかなり低いでしょうが、何かの参考になれば幸いです。
本記事をお読みになったドッターの皆さんへ：
モデリングは敷居が高いようでクッッッソ激烈に低いです。ぜひ初心者編の講座を見るなどして挑戦してみてください。なんならボクセルでもいいです。個人的にいうとボクセルのほうが難しいので、ボクセルが作れたら3Dモデルなんかすぐ出来ます。今すぐチャレンジして新しい道を切り開こう！！！！！！
Blenderは無料！今すぐダウンロード！そして玉石混淆の講座の海に溺れよう！ドット絵も似たようなものですね。
追伸
確かテクスチャにドット絵を使うローポリ専用の3Dモデルエディタがあったと思うんですが、名称を失念したので誰か知ってたら教えて下さい。コメント欄が空いてます。
検索した感じではおそらく↑これだと思うんですが…… 違ったらすみません。このサイトで入手できるのはどうやら体験版で、機会があれば試してみます。本体価格は24.9ドル。Steamで製品版が売ってる。
ウィトルウィウス的人体図で失礼します。さようなら。
いいなと思ったら応援しよう！
