【Unity】複数のテクスチャを重ねて表示する

ひとつのメッシュデータに複数のテクスチャを重ねて表示する方法を紹介していきます。
まず、方法は2つあります。
・Shaderを改造し、テクスチャを二枚入れると重ねて表示されるようにする。
・マテリアルを2つ用意し、マテリアルを2つ重ねる。
今回はマテリアルを2つ使用する方法を紹介します。

マテリアルを重ねる方法

やり方は単純で、InspecterからRendererのマテリアルの配列要素数を増やし、マテリアルを紐づけます。

また、重ねるマテリアルはしっかり透過部分のあるものを選択しましょう。
StandardShaderを使用する場合はRenderingModeをCutoutにし、pngファイル等の透明度のあるテクスチャをalbedoにセットしてください。

これで重ねて表示できます。

しかーし!モデルのサブメッシュが複数に別れている場合、これではうまくいかない可能性が高いです。
解決策について、サブメッシュって何よってとこから説明していきます。

モデルデータの構造

学んだわけじゃないけど多分こんな感じ

FBXファイルを読み込むとメッシュ単位でオブジェクトが生成される。
そして、そのメッシュ内のサブメッシュ毎にマテリアルが生成される。
Blenderでいうとオブジェクト毎にメッシュ、マテリアルの配色分け毎にサブメッシュといった感じだ。
問題は、Unity内でメッシュの描画を行うRendererがメッシュ毎に使用することにある。

最初に紹介したように、RendererのMaterialsの要素数を増やすことで、サブメッシュの数以上のマテリアルを重ねることができる。
しかし、ここで厄介なのがメッシュ内で保持しているサブメッシュの内、一要素目のサブメッシュにしかマテリアルが重ならない。いくつマテリアルを追加で重ねても、全て一要素目に重なってしまう。
上記例の場合、肌にタトゥーや擦り傷のマテリアルを重ねて表示したくても、肌ではなく瞳のサブメッシュに重ねて表示してしまう為、不可能である。
また、メッシュ内のどのサブメッシュを一要素目にするかは、選べない。(多分頂点数の一番少ないサブメッシュが一要素目に来ている気がする。)

解決策としては、モデリングソフトで目と肌のメッシュを分けて再度FBXにエクスポートした後にインポートし直す。
もしくは、マテリアルを2つ重ねる方法を諦めて、自作シェーダー内でテクスチャを重ねて表示する他ないと思う。多分。

バーチャルマーケット2に出展します

こんばんは。ねくすとです。
オリジナル3Dモデルアバターを作成しました!
バーチャルマーケット2に出展致します。

まず、作ったアバターがこちら
https://nextnext.booth.pm/items/1211097

アバターの作成

どんな手順でアバターを作成していったかを記録しておきます。
合計で45時間くらい?かかったかな?

素体の作成
ここまでは初めてアバター作った時と同じような手順です。アバター2体目ということもあって前回よりもスピーディーに作業ができました。
ここまでで10時間くらい

単純なフォルムということもあり、早くできたと思う。多分。

シェイプキーの作成
素体の状態で先にシェイプキーを設定しちゃいます。瞬きように目を閉じた状態と、リップシンクようにいくつかの口を開けてるモーションですね。

改めて見返すと、なんだか目が潰れてる気がしないでもない。

服と鎧の作成
服は肌のメッシュを複製して拡大することで作成しました。
鎧は一から作成し、できる限り単一ボーンに割り当てました。動作によってなるべく鎧が捻じれないようにしています。

鎧が好きなので、鎧のメッシュを作るのは楽しかった。アルみたいな中身空っぽの鎧アバターとか作ってみたいかも。

小物の作成
鞄や手袋、靴を作成。
手袋と鞄はやっぱり肌メッシュを複製して拡大。

腰に鞄が付いてるとアドベンチャーって感じがする。

剣と盾の作成
すごく単純なメッシュで作成。
細かい模様とかはSubstancePainterで入れようと考えていた。

剣と盾、あわせて30分くらいの単純さ

髪の毛の作成
頭髪の作成は以下を参考にしました。
http://blog.tsuno.co/2018/05/03/1525331437/

「Bsurface」といったプラグインツールを用いた作成方法です。
お絵かき間隔で髪の毛一束メッシュを作成できます。

SubstancePainterでテクスチャ作成
テキトーにUV展開した後、FBXファイルでエクスポート、SubstancePainterにインポートします。 SubstancePainterは体験版を使用しています。

読み込んだだけの状態

SubstancePainter にはデフォルトでSmartMaterialという適用するだけでそれっぽくなるマテリアルがあります。鎧にはちょっと汚れた鉄のマテリアル。服には布っぽいマテリアル。靴や手袋には革っぽいマテリアルという風に設定していくだけで・・・

はぁあああ、鎧の光沢がスゴイ鎧!(語彙力)

めっちゃかっこよくなった。SubstancePainter・・・恐ろしい子・・・!

自分でノーマルマップにテコ入れして凹凸を加えることもできるので、縦にそれっぽい凹凸をつけていきます。

単純なノーマルマップスタンプを盾に2種5か所押しただけ

デフォルトで用意されてるスタンプをポチポチするだけでこのクオリティ。なんて簡単なんだ・・・!

全体的に使い易かったですが、注意点があります。
テクスチャをエクスポートする際は、マテリアル単位でエクスポートされてしまいます。例えば今回、「皮手袋」、「長袖」、「ズボン」等を1枚のテクスチャにまとめています。Blender上ではこれらのマテリアルを分けて作業するかと思いますが、そのままSubstancePainterで使用するとテクスチャがマテリアル毎に何枚もできあがってしまいます。これについてはレベルマップを用いることで解決できます。詳細は以下参照。
https://note.mu/ig_k/n/n6649eea0c2c0

髪の毛用のテクスチャ作成
髪の毛のテクスチャは以下のサイトを参考に作成しました。

https://original-game.com/photoshop-hair-texture/

その後、作成したテクスチャに合わせてUVマップを調整します。

えらい無駄の多いテクスチャ・・・許してヒヤシンス

Unity上でアニメージョンオーバーライドの設定
物体オンオフのオーバーライドのを利用して、鎧兜をはずしたり、武器を取り出したりできるようにします。以下のサイトを参考にしました。

http://shiasakura.hatenablog.com/entry/2018/04/18/082930

アニメーションオーバーライドにより、兜の有無や抜刀⇔納刀を切り替えれる。

あとはVRChatにアップロードして完成!お疲れさまでした。

マテリアルの質感がVRChat内でもそのまんまだったことに満々満足。

ブースの作成

そして、バーチャルマーケットに出展する際は、売り物だけでなく、自分のブースも作成しなければなりません。
この自分でブースを作成できるところがバーチャルマーケットの良いところですよね。アバターの試着やホログラム表示等、バーチャル環境でしかできない展示方法を自分で作成できるのですから。
んで、私が作成したブースがこちら

武具屋をイメージして作りました。作成時間は7時間程だったと思います。

最初にBlenderでお店の外観モデルを作成。壁棚、武器棚、木箱を置いただけ。
これをUVマップを正規展開してFBXにエクスポート。ここまで1時間。

単純なフォルムのパーツ群をパパっと作成し複製。慣れたもんだね。

SubstancePainterにインポートして、とりあえずベイクします。ベイクすることでライティング(光による陰影)の反映と、後のエッジマスクに使用する、角度のマップファイル?を作成します。
その後、スマートマテリアルから木目調を選択。
あとは汚れ感を出すために、エッジ部分にマスクをかけて汚します。
手順は
①汚れ用レイヤー作成(汚れっぽいパターンを選ぶ)。

②①のレイヤーに黒マスクを追加する。
 レイヤーを右クリックで黒マスクを追加できます。黒マスクを追加することによって、①のレイヤーの内で、マスク画像の白い部分のみを表示させます。黒マスクを追加した瞬間は、マスク画像が真っ黒なのでどこも表示されません。次の③でマスクをかけない白い部分を生成します。

③add generatorでエッジ部分のみのマスクパターンを生成する。
 黒マスクを右クリック→add generatorでマスク部分を生成する機能を追加します。この操作だけではどういったマスクを生成するのか?が決まっていないのでまだマスクは真っ黒のままです。PROPERTIESタブから既存のマスク生成設定を選択します(Metal Edge Wear等)。後はこのタブ内の設定をいじくりまわすことで、どの程度の範囲を汚すのか?どの程度の角度の角までを汚すのか?等を詳しく変更できます。

以上の流れで角を汚せます。
この状態でテクスチャをエクスポートします。ここまでで2時間。
SubstancePainterってスゴイ。

角汚しが無いバージョン。
角汚しが有りバージョン。角が汚れてたほうがなんだかそれっぽい。

次はUnity上での配置作業。
Blenderで作ったFBXファイルを読み込み、そのマテリアルにSubstancePainterで作成したテクスチャを使用します。
後はモデル”小さな騎士”とそのパーツ群を、それっぽいポーズを付けさせながら配置。ここまでで4時間半。

配置しまくってなんだかそれっぽくする。

最後に看板イラストや商品概要をはっつけて完成!
イラストは描いてもらいました。ありがとう(そるとりっぴ)!

大看板の右上が寂しかったので、何かのイラストで埋める流れになったのだが
何故かキリンで埋めたのが一番しっくりきたので唐突のキリン採用となった。

また、ここには表示されていませんが、アバターの試着をできるギミックが入っております。後は細かい修正等して計7時間程でした。
そして謎のキリン。

入稿締め切り10日前には入稿できてよかった!締め切り当日だと運営様への負担がものすごいでしょうしね。
はー、疲れた!バーチャルマーケット2が楽しみですね!
アバター自体が売れなかったとしても、これはいい経験になりそうです!

VRChat用に自作アバターをBlenderで作成

先日、VRChatを初めてプレイ。
普通のVR対応のコミュニケーションツールと侮っていたが、
何もかもが想像以上にすごい。
VR空間上での他者とのコミュニケーションそのものが遥かに未来を感じる体験であったことと、ワールド&アバターの持ち込みの自由度が異常。

と、いうわけでオリジナルアバターを作成してVRChatの世界を闊歩すべく、
初めての3DCG作成をしていきますヨ!

まずはどんなアバターを作るかをイラストで描いて決めます。
というわけでクリップスタジオの無料試用を用いて描いた!ドン!

アンドロイド娘!
普通にモンスターとかカッコいいロボットにしようかとも思ったけど、
人間と同じ骨格にしないとフルボディトラッキング時に綺麗に動けないので
仕方なく女の子のロボットに(言い訳)

後は後ろとか横から見たときどんな感じかをイラスト化

このときに3DCG作成時の下地になるように三面図っぽく作成

VRChatの場合は上図Aポーズよりも下図Tポーズのほうがいいらしいので修正。

そんなわけでBlenderをSteamからインストールして早速3DCG制作開始

その際には以下のZen先生の動画と

以下のWebサイトを参考にBlenderの基礎を学びながら作業しました。
かんたんBlender講座 – 高知工科大学

制作工程・・・

お顔をワニでも分かる口座に従って作成

三面図の下地に沿うように体を作成(参考:かんたんBlender講座 – 高知工科大学)

身体全体がとりあえずできた。

パーツごとにUVマッピングしていく
このとき、綺麗にUVマッピングしていくようにカット位置を指定しいく必要がある。かんたんBlender講座を参照。
マッピングできたらクリップスタジオでテクスチャの色付け。 

 

顔が恐怖を覚えるほどに不気味ブサイクなのでガンガン修正 可愛くなった

そしてボーンを各パーツごとに対応付けしていく。
これでボーンの動きに合わせて身体が動いてくれる。
また、VRChatでの使用を想定している場合、公式で配布しているモデルのボーンを流用すると良い。自分でボーンをいちから作ると、VRChat上で予期せぬ動きをする場合が多々ある。
以下、公式の配布モデル

あとはテクスチャの影を入れたり、髪にボーンを加えたりブラッシュアップしていく。
シェイプキーで表情差分を作成。VRChat上ではこのシェイプキーを用いた表情差分で、口パクを表現できる。本当は16種類の表情差分を作る必要があるのだけれど、5種類の差分を作ればそれの使いまわしで十分にそれっぽくなる。(sil,aa,th,oh,ou)

あとはVRChatに対応したバージョンのUnityをインストールし、VRChat用のSDKをインポートしたりなんなりしてVRChat上にアップロードできる。
その詳しい方法は以下を参考に。
VRChat用人型アバターを作ってみた

そしてVR空間上についに降り立った俺氏。


想定以上にお尻がセクシーになってしまった。
とはいえこれで遂に一から自分の力で仮想空間上の自分を作ることができた。
ここまでにかかった時間は
まったり作業でイラストに10~15時間
Blenderでの作業で30~40時間
UnityでのアップロードとVRChatでの仕様把握に数時間といったところか。

総評:VRChat最高かよ

Webページ作成の備忘録

はい、ねくすとです。

備忘録を作ろうと思ってブログを立ち上げた次第。

というわけでまずはブログ開設までの備忘録。

 

ブログを開設までの流れは以下

1.ドメイン取得

2.レンタルサーバーと契約

3.WordPressを使う

 

1.ドメイン取得

サイトの住所としてドメインを取得するよ。

世界でひとつだけのドメインを自分のものにするわけだからお金がかかるよ。

今回は「お名前.com」ってとこでドメインを取得。年間で1000円くらい。

けどさっそく躓いた。ドメインを取得しようと決済に進むと

カートの内容が変更されました。内容をご確認のうえ、お進みください。

と表示されてしまって先に進めない。

調べたところ「お名前.com」側のエラーみたいで時間をおくしか解決方法がないようで。

5時間程後に再度決済したら無事ドメイン取得。

とはいえこのドメインを必ずしも取得する必要はない。レンタルサーバーを借りる時点でレンタルサーバー側が用意してくれたドメインを使用することも可能。

とはいえその場合はレンタルサーバーの引っ越しは難しくなると思うから無難にドメイン取得ほうがいいよね。愛着沸きそうだし。

 

2.レンタルサーバーと契約

契約するレンタルサーバーによって月々の値段がだいぶ変わる。

「xサーバー」がオススメによくあがっていたけど月々900~。高杉。

初心者にはここまで良いところじゃなくても十分だと思う。

そうなると「ロリポップ」か「スターサーバー」が選択肢にあがってくる。

両方月々250円のライトプラン?だかがある。

一体何が違うの?って調べたら、

・ロリポップは転送データ量の上限がスターサーバーの10倍近い

・スターサーバーはSSDを利用していたりとサーバーの設備自体が高スペック

ってところが大きな違いみたい。

ロリポップって名前が前衛的だったのでロリポップでサーバーを借りることに。

借りたらお名前.comで取得したドメインをロリポップ側で独自ドメインとして設定。

そしたら今度はお名前.com側でロリポップサーバーで使うよってのを教えるためにDNSサーバー設定を行う。

これでなんかよく分からん準備は完了。ロリポップのサイトにて、細かい手順を説明してくれてるからそれに従えば多分なんとかなる。とはいえもっと勉強しなきゃね。

 

3.WordPressを使う

WordPressを使うためにレンタルサーバーの中にWordPressをインストールする。

これもロリポップのサイトからできる。

あとはWordPressを介して自分のサイトをいじったり記事を投稿できるようになる。

たった今WordPressで記事を書いているところだけども。

投稿 > 新規追加

ででてきた画面に文字を入力してるだけ。

もっとかっちょいい感じにサイト全体をいじるのはまだ先になるかな。

 

以上。