アバターのUVに直接ロゴ貼ろうとするとどうしてもぼやけるよね
liltoonの機能でそこまで解像度を盛らなくてもきれいにロゴ貼れます
必要なもの
・VRCにアバターをアップロードする環境
・liltoon等MSDFテクスチャをサポートするシェーダー
・MSDFGen(GitHub) win64.zipとopenmp.zipの違いは判らないのでwin64選べばいいと思う
・svgファイルもしくはAdobe IllustratorもしくはInkscape等ロゴをsvgファイルとして出力できるソフト
手順
MSDFGenをダウンロードしておく
解凍ソフト等使い任意の場所に解凍
svgファイルが用意出来たら以降は作業フォルダになる
svgファイルを用意する
自分がアバターに貼りたいロゴを用意する
細すぎる線はカバーできず潰れることがあるのでMSDFテクスチャの解像度を下げたい時は気を付けるべき 個人的には出力後で2px分は確保したい
シェーダーのベースカラー以外はつけられないので作る際は白黒が望ましい
Illustratorでの作業は以下
ロゴ作ったらたいていの場合いくつかオブジェクトが混在してる状態になってると思うのでパスを一つのオブジェクトにまとめる
以降の作業は不可逆なのでパスをまとめる前にバックアップを保存しておく
まずはまとめる前の下準備
文字オブジェクトは"右クリック、アウトラインを作成"
文字のパス化を終えたらCtrl+Aで全選択後上メニューの"オブジェクト、パス、パスのアウトライン"
全部終えたらそのままパスファインダーの"合流"をクリック
白いオブジェクトが生成されているのでこれを削除し上メニューの"オブジェクト、複合パス、作成"を実行
これでオブジェクトにまとめる作業が完了したので"ファイル、書き出し、書き出し形式"からsvgとして書き出し
svgオプションはわからんけどそのままでいいと思う
MSDF画像の生成
MSDFGen.exeはコマンドで動くアプリケーションなのでMSDFGenフォルダにbatファイル作成
msdfgen.exe -svg icon.svg -o output.png -size 128 128 -pxrange 4 -autoframe -testrender render.png 1024 1024
pause
実行時はsvgファイルをicon.svgにしてmsdfgen.exeと同じフォルダに配置
batを実行するとMSDFテクスチャがoutput.pngで出力される
-size 128 128の部分を任意の数字に変えることでMSDFテクスチャの解像度が変わる
-testrender以下はMSDF描画した際のだいたいの表示が分かる Unityにいちいちインポートしなくても確認できるので便利 消しても動く
他のパラメータはMSDFGenのGitHubページ参照
Unityで描画
MSDFテクスチャ(output.png)をUnityにインポート
インポート設定はこんな感じ(VRCにアップロードする際はストリーミングミップマップにチェックを入れる)
liltoonシェーダーを使用したマテリアルのメインカラー2ndにMSDFテクスチャを使用、"MSDFテクスチャを使用"にチェックを入れる
必要に応じてタイリングとオフセットを使用しロゴを貼りたい場所に位置を調整する
比較
だいたい同じ512xテクスチャで比べるとこんな感じ(出力の関係で完全に同じではない) 左が通常テクスチャで右がMSDF
MSDFは細い線がつぶれている
こうならないようロゴの製作段階で細い線は極力使わないようにしたい
真ん中部分を拡大し比較
上がMSDF、下が通常テクスチャ
通常テクスチャは解像度の低さからぼやけが生じているがMSDFは同じ解像度でもベクターな表現を維持できている
通常テクスチャでぼやけを解決するには解像度を高くするしかなく書き出し時間や画像サイズでネックになる
雑記
MSDFで今のところ単色しか使えてないので(マテリアル設定時のベースカラーのみ)カラフルにする方法があれば知りたい できれば2ndテクスチャ内で完結させたい・・・
UVに合わせたMSDFテクスチャを作るのは案外悪くなさそう
参考URL