【PCVR】TiltBrush作品を、Unity初心者が、VKetに出展する方法

こんにちは！KenGです。
先日、思い切ってVket4に初出展の入稿しました！！
TiltBrushを使ったブース（Default Cube）です。DC-05 REDです。

おきゅたんさんのライブ配信でも、一瞬ですが映していただけました!!感動!!

おきゅたんさんのライブ配信で初めて作ったブース初めて映してていただけた！！！
ありがとうございますありがとうございます！！！
胸が熱い！！！
次もっと頑張ろう！！！🔥🔥

Live【公式配信】#Vケット4 デフォルトキューブは魔法の箱！？ https://t.co/yIFAhEpkMV @YouTubeさんから pic.twitter.com/mNMvFBXdFM

— KenG3@ゼロからはじめるVR創作/DC-05 - Red-02 (@KenG3_vr) April 30, 2020

今回は、
TiltBrushユーザーが、Unity初心者でも、作品をVketに出展する方法
について紹介するよ。

全体流れ

TiltBrushでVR創作始めたという方は、TiltBrushの操作はわかっているが、BlenderやUnityにはあまり手を出したことがない人もいると思います。
その場合、VKetに出展するとき、特にUnityで色々つまずきます。
ここをなんとかしていきたい!

Vketでの前提・制約事項

最初、何も考えずに作業を進めると、後になってVKetのルールなどでボトルネックになり大きく手戻りが発生します。
事前にどこに問題が出てくるのか把握してから、プロセスを進めよう。

なお、VKet4でのDefault Cubeの入稿ルールは以下でした。

外部公開記事/日本語/入稿ルール/Vket4入稿ルールver.Default-Cube

マテリアル数が制限されている

Default Cubeの場合、ブースに使えるマテリアル数は60個まで。

注意点は、実際にHierarchyで使用していなくても、Asset配下に入っているパッケージ内にあるマテリアルもすべて加算される。

下図の赤枠のマテリアルの数が60個に含まれる。

なので、Asset配下のTiltBrush Toolkitの中身をいじる必要がある。
これが初心者の僕にはハードルが高かった。
TiltBrush Toolkitのいじり方はまた詳細を下に書きます。

やること
・Projectフォルダ内の使っていないマテリアルを消す

ファイルサイズに制限がある

バンドルビルドサイズ20MBまで。

バンドルビルドサイズとは、このページに詳細が書いてある。

出展者向け/外部公開記事/容量削減ノウハウ

やること
・TiltBrushのブラシストローク数を減らす
・TiltBrushのResolutionを減らす

ブースサイズに収まる必要がある

Default Cubeの場合、10mx10mx10mの中（Planeの初期サイズ）に収まる必要がある。

外部公開記事/日本語/入稿ルール/Vket4入稿ルールver.Default-Cube

やること
・全体の形状を調整する
・Blenderで中心の位置を調整

スポーン位置（特に高さ）を自由に変えられない

DefaultCubeの場合、VRCWorld位置=スポーン位置は操作できない。
常に、正面のブースエリア外からユーザーが見ている状態から開始する。

ブースを地面からはじめるとき、根っことかはブース範囲外になってしまう。
ブースの方で地面を浮かせて、TiltBrushでは地面部分はあまり描かない。

やること
・地面に埋まる部分を計算してTiltBrushで描く

TiltBrushToolkitか、PolySDKか

TiltBrush作品をUntyにインポートするには、二つの方法がある。

①TiltBrush Toolkit

googlevr/tilt-brush-toolkit

②Poly Toolkit for Unity | Google Developers

Poly Toolkit for Unity  |  Google Developers

ここでは①TiltBrush Toolkitを使う。

なぜか。
Poly Toolkitは、TiltBrush Toolkitと比較して(インポーターなどのVketには)不要なものが入っているだけ。
また、Poly Toolkitから直接インポートするフローだと、(後述する)Blenderでの原点の修正ができないからだ。

TiltBrush Toolkit ↓

Poly toolkit　↓
赤枠がTiltBrush Toolkitとの差分だ。

PolySDKはTiltBrush Toolkit+インポート部品の構成になっている。
不要なファイルは極力入稿フォルダに入れないようにしたいので、TiltBrush Toolkitで十分だ。

①TiltBrushで軽量化した作品をエクスポートする

まず、作品を制作します。

そのときに、いくつか注意することがあります。

要素数(=データ量 Sketch Cost)を抑える

要素数、ストロークの数はそれだけモデルの重さになります。
最終的に圧縮後20MBになる必要があるので、必要最低限の要素・ストローク数にしましょう。

使う筆の種類を抑える

筆の種類＝Unityにおけるマテリアル数になります。
これがUnity全体で（VKet4のデフォルトキューブの場合）60を超えるとNG。

削減できる細かい表現は、（既に使っている）代替可能なブラシで描き直そう。

Before

After(紅葉の葉をCoarseBristlesに変えた)

Resolutionを軽量化

あまりに容量が多い作品なら、パーツを減らすのが限界の場合、解像度を下げることもできます。

Unityでの位置調整しやすいようにパーツ化する

一つの作品をUnity上に配置する際、どうしてもパーツごとの位置を調整したくなります。
あとで調整できるように、予めブース上での位置を決め、パーツに分割しよう。

なお、パーツに分ける時は、飛び抜けるパーツをなくそう。(小さい消し残しが含まれていると、モデルの領域が大きくなる)

パーツごとに、作品の保存・Exportをします。

②Blenderで原点を修正する

TiltBrushで描いたモデルは、そのままUnityに持ってくると、大抵の場合原点がずれています。

※ 原点は、移動や回転の際にギズモが表示される箇所です。ここを中心に移動・回転します

この原点も、Unityでブースの範囲内に納めなければいけないです。
なので、原点をモデルの中心に持ってきましょう。
原点の修正は、Blenderで行います。

blender.org - Home of the Blender project - Free and Open 3D Creation Software

Blenderでfbxをインポート。

TiltBrushのエクスポートしたモデルデータはここにある。

インポートしたら、やっぱり原点がずれている。
これを修正する。

モデルをワールド座標の中心あたりに移動させる。

Shift+Sで開くメニューから「3Dカーソルをワールド原点」に。

3Dカーソルがワールド原点に移動したら、以下のメニューから、モデルの原点を3Dカーソルと同じワールド原点に移動させる。

原点(赤い点)がワールド原点=モデルのほぼ中心部に移動した。

この状態でfbxエクスポートしてあげると、原点がモデルのほぼ中心に位置した状態でUnityにインポートできる。
エクスポート時は、ライト・カメラは除外することを忘れずに。

③Unityで調整する

環境

以後は、下記の環境を前提に書きます。
※ VKet4入稿当時の各種対応バージョンを記載しています

OS : Windows 10
Unity ver : 2018.4.14f1
TiltBrush Toolkit ver : v22.0.0
VRCSDK ver : VRCSDK2-2020.01.14.10.39
VRChat ver : Open Beta Build 900
※VRChatのビルド番号は、メニュー画面の赤枠部分で確認できます

下準備

各種アセットをインポートします。

・Vket公式アセット
・最新版のVRCSDK

TiltBrush Toolkitのインポートし、中身を精査する

自分の入稿番号配下へ

TiltBrush Toolkitを自分の番号の入稿フォルダのAsset直下へインポート。
※下図の黒塗りつぶし部分が、自分の入稿番号がついた入稿フォルダ
番号配下じゃないと、最後にVketToolを使ってのVRChatへアップロード時、含んでくれません。

TiltBrush Toolkit中身の精査

実はTiltBrush Toolkitの中には、使っていないマテリアルが大量に入っています。このままだと、マテリアル60個以下のルールを破ってしまいます。
不要なものを精査しましょう。

まず、 TiltBrush Toolkitの中身を知ろう。
Basicの中に、TiltBrushの各ブラシのシェーダー・マテリアルのフォルダがあります。

不要なブラシのフォルダをアンチェックしましょう。
どのブラシを使っているかわからない場合は、後からでも消せるので焦らないで良いです。

エラーフィックス

TiltBrush Toolkitを、一番トップのAssetsではなく、自分の入稿番号のフォルダ配下のAssetsフォルダへインポートしたため、一部のファイルにエラーが出てしまいます。

↓　Ctrl + Shift + Cで表示されるUnityのエラーコンソールを開いてみると…

エラー内容は「書いてあるパスに該当するファイルが見つからない」なので、参照するファイルのパスを書き換えてあげます。
このエラーの場合、「DiamondHull.shader」というシェーダーファイルが、「Assets/ThirdParty/Noise/Shaders/」にある「Noise.cginc」というファイルを参照しようとして、それが見つかっていません。

試しに、「DiamondHull.shader」というシェーダーファイルを選択してInspectorを見てみましょう。
やはりエラーが表示されています。(Brush.cgincとNoise.cgincが見つからないエラーです)
※32,33行目以外のエラーについては、実際にそのパスを参照しているコードがないので「?」なのですが、無視しても動いたので無視しました

これを直していきます。

エラーが出ている「DiamondHull.shader」のシェーダーファイルをダブルクリックし、テキストエディタ(AtomやSublimeTextなど)で開きます。
※シェーダーファイル自体をテキストエディタにドラッグ・アンド・ドロップでもOK開けます

そして、↓の赤線のパスの部分が書き換え対象です。(Brush.cgincとNoise.cginc)

※該当コード部分

    CGPROGRAM
     #pragma target 3.0
     #pragma surface surf StandardSpecular vertex:vert nofog
     #pragma multi_compile __ AUDIO_REACTIVE
     #pragma multi_compile __ TBT_LINEAR_TARGET
     #include "../../../Shaders/Include/Brush.cginc"　←　これ
     #include "Assets/ThirdParty/Noise/Shaders/Noise.cginc"　←　これ

書き換えは、実際に今格納されているBrush.cginc、Noise.cgincのパスをコピーして書き換えます。
Brush.cgincは、Projectフォルダの、Tiltbrush/Assets/Shaders/Includeの中にあります。
これを右クリック・CopyPathでパスをコピー。

DiamondHull.shaderファイルの赤線部分にペーストします。

これで、エラーがなくなります。

Noise.cgincも同じようにしてあげます。
Noise.cgincは、Projectフォルダの、ThirdParty/Noise/Shaders/の中にあります。

右クリック・CopyPathしてから、DiamondHull.shaderファイルの赤線部分にペーストします。

該当箇所修正済コード　※(自分の入稿番号)のところは自分で修正してね!

    CGPROGRAM
     #pragma target 3.0
     #pragma surface surf StandardSpecular vertex:vert nofog
     #pragma multi_compile __ AUDIO_REACTIVE
     #pragma multi_compile __ TBT_LINEAR_TARGET
     #include "Assets/(自分の入稿番号)/Assets/TiltBrush/Assets/Shaders/Include/Brush.cginc"
     #include "Assets/(自分の入稿番号)/Assets/ThirdParty/Noise/Shaders/Noise.cginc"

これで、VketToolsのエラーはなくなるはずです!

その他のファイルでも同じような「failed to open source file ...」のエラーがあった場合は、同様にフォルダ階層を変えたことで参照パスにファイルがないことが原因の可能性が高い。
同じように対処してあげよう。

また、VKetToolsのルールチェックで、AudioReactivityについてはエラーになります。

AudioReactivityは、Unityでは使えますが、VRChatには対応していないぽいので、アセットインポート時にチェックを外す、またはインポート後なら削除しよう。

ここにあります。

作品モデルインポート

それでは、作品をインポートしていきます。

Projectフォルダにドラッグアンドドロップ 。
※フォルダごとでも、フォルダの中身全選択でもOKです。モデルとテクスチャがもれなく入っていること

TiltBrushのfbxの中身を知ろう

最上段はGameObject、メッシュはその下層にある。
Add componentなどする場合は、配下のメッシュ自体にaddしないと機能しないことが多いので注意しよう。

インポート設定（Project内のprefabに対して）

最後のライティングで、ちゃんと作品にもライティングや陰影が反映されるように、Generate Lightmap UVsにチェックを入れてApplyを押そう。

マテリアルの修復

冒頭で触れていなかったが、ブースの入稿ルールとして「メッシュに直接埋め込まれたマテリアルをしようしてはいけない」という項目がある。
要は、Unityで使えるマテリアルを使えということらしい。

Use Embedded Materials→UseExtractMaterials(Legacy)に切り替える。
Applyを押す。
Extract Materialsを押す。

ウィンドウが表示されるが、何もせずそのまま「フォルダーの選択」を押す。

これでExtract（抽出）されるマテリアルは使わないので、全部消して、TiltBrush Toolkitの中にあるブラシのマテリアルをドラッグアンドドロップしよう。
Hierarchyにprefabをドラッグアンドドロップして、中身を開いて、各種ブラシの要素に、TiltBrush Toolkitの各種ブラシのマテリアルをアタッチしていこう。

これで、モデルにちゃんと色がつくはずだ。

軽量化調整

メッシュが重すぎる（バンドルビルドサイズ20MBを超える）際、

これで劇的にファイルサイズが落とせるらしい。

ただ、僕の場合、これをやると、一部の作品ではメッシュが壊れて、マテリアルもまた剥がれてしまってうまくいかなかった。
その場合は、TiltBrushで作品を作る際に、ストロークや解像度を減らすなどで軽量化すると良い。

ライトベイク

最後に、作品に陰影をつけるため、ライトベイク（照明の反射や陰の出方を予め計算しておく）を行う。

これをやることで、リアルタイムライトよりブース全体が軽量化になる。
ちなみに、ブースの入稿ルールでも、動かないものはStaticにしてライトベイクすることが推奨されていた。
おそらく今後もルールは継続されるので、覚えておいて損はない。

Staticにする（ライトベイクのため）

Bake（Lightningから）

軽くするためにはサンプル数を減らす。

試しに、
Direct Samples : 16
Indirect Samples : 16
とかにしてみると、劇的にベイクが早くなる。

できたらあとはベイクをする。

未解決な問題

Bloom系の筆は挙動が不安定のようだ。
時々、こんな巨大な光になってしまうことがある。

モデルのインポート順番によっては解決することもあるが、根本的な原因と解決策がわかっていない。
誰か解決策がわかった人は、ぜひコメント・シェアしていただきたい。

④VRCにアップロードする

VketのSDKでアップロードする。

入稿前に、必ずVRChatで動作確認しよう。

その他でつまずいたら

なにかあったら、コンソールのエラーログを見よう。
調べてわからなかったら、TwitterやDiscordなどでわかる人に聞こう。
丁寧に教えていただけるとので、感謝を忘れずに。

終わりに

お疲れ様でした!!

BlenderやUnityに使い慣れていない方は大変でしたでしょうが、
これができたら、あなたのTiltBrush作品を、VRChat、VKetを通して世界中のたくさんの人の目に触れるチャンスを得ることができます!!

ぜひ挑戦して、いろいろな人にあなたの作品をシェアしてみてくださいね^^