床を置 いて歩けるようになったら、次は灰色の箱を部屋らしくします。床の色を変え、タイル模様を貼り、光沢を少し落とすだけで、同じ空間の印象が変わります。
ただ、Unityには似た名前が3つ並びます。Shader、Material、Texture。どれに何を入れるのか分からないまま操作すると、床がピンクになったり、模様の大きさが合わなかったりします。
この記事では、3つの役割を整理してから、6m四方の床にタイル画像を貼り、模様の大きさを実寸で決めるところまでを解説します。
この記事でわかること
- Shader・Material・Textureの役割の違い
- 模様の大きさ（Tiling）を実寸から決める方法
- マテリアルがピンクになる本当の原因
- 1つのマテリアルを共有したときに起きること
6m四方の床がある状態から始めます。まだなければ 最初のワールド で作れます。
壁紙でたとえると分かりやすい
3つの関係は、部屋に壁紙を貼る作業にたとえると整理できます。
- Texture（テクスチャ） は、壁紙の柄そのものです。木目やタイルの画像ファイルを指します
- Shader（シェーダー） は、材質の種類です。「マットな壁」「ツヤのある床」のように、光の当たり方のルールを決めます
- Material（マテリアル） は、その柄をその材質で貼った状態です。柄・色・ツヤ具合をまとめて1つにしたものです
オブジェクトに付くのは Material です。Textureはその中の欄に差し込む部品で、ShaderはMaterialの一番上で選ぶ種類です。
作る順番はこうなります。
- マテリアルを作って、オブジェクトに割り当てる
- マテリアルの一番上でシェーダーを選ぶ
- 選んだシェーダーに応じて、「色」「画像」「凹凸」などの欄が出る
- その欄にテクスチャを差す
シェーダーを変えると、下に並ぶ欄 が丸ごと入れ替わります。ここを一度見ておくと、後でマテリアルの画面が読めるようになります。
VRChatのワールドでは、床や壁は Standard で十分です。色・金属感・ツヤ・凹凸まで一通りそろっていて、焼き込んだ照明とも素直につながります。
なお、アバター改変で使う lilToon などのシェーダーは、ワールドの床や壁には向きません。キャラクターの見え方に合わせて作られているので、部屋の照明と噛み合わず、広い面に使うと重くなります。アバターとワールドで使うシェーダーは別、と分けて覚えてください。
実践：床にタイルを貼る
6m四方の床に、タイル模様を貼って、模様の大きさを調整します。完成すると、床のタイル1枚が約37cm四方になり、立ったときに自然な大きさに見えます。
1. マテリアルを作って割り当てる
Playを止めて、Projectの Assets に Materials フォルダを作ります。中で右クリックして「Create → Material」を選び、FloorTile と名前を付けます。
Inspectorで次の値にします。
| 項目 | 設定 | 意味 |
|---|---|---|
| Shader | Standard | 光を受ける基本の材質 |
| Rendering Mode | Opaque | 透 けない床にする |
| Albedo の色 | 白 | 後で貼る画像の色をそのまま出す |
| Metallic | 0 | 金属ではない |
| Smoothness | 0.2 | 強い光沢を抑える |
Projectの FloorTile を、Hierarchyの Floor へドラッグします。Floorの Mesh Renderer にある Materials の欄に入っていれば成功です。
Albedo は表面の基本の色です。まだ画像を入れていないので、いまは色の欄だけで床全体の色が決まります。試しに Albedo の色を青灰色に変えてみると、床の色が変わるのが分かります。確認したら白に戻してください。
2. タイル画像を取り込む
模様の比較に使える 練習用タイル画像（PNG・1024×1024） を用意しています。この記事のために作った練習素材で、実在する製品を再現したものではありません。
プレビューはWebPです。Unityへ取り込むときは、リンク先のPNGを使ってください。
AssetsにTexturesフォルダを作る- 保存したPNGをそのフォルダへドラッグする
- 画像を選び、Inspectorで次を確認して「Apply」を押す
| Import設定 | 値 | 理由 |
|---|---|---|
| Texture Type | Default | 通常の色画像として使う |
| sRGB (Color Texture) | オン | 色として見る画像だから |
| Wrap Mode | Repeat | 端を越えたら繰り返す |
| Generate Mip Maps | オン | 遠くから見たときのちらつきを抑える |
| Max Size | 1024 | 練習画像の大きさに合わせる |
ここで編集しているのはマテリアルではなく、画像アセットの取り込み方 です。マテリアルの設定とは別の画面なので、混同しないようにしてください。
FloorTile に戻り、Albedo の左にある画像の枠へ、いま取り込んだ画像をドラッグします。床に模様が出れば成功です。
Albedo の色は 白 のままにしておきます。Standardでは色の設定が画像に掛け算されるので、色を付けたままだと元の画像より暗く濁って見えます。
3. Tilingを実寸で決める
貼ったばかりのタイルは、たぶん大きすぎます。ここを直します。
Tiling は、1つの面の中に画像を何回繰り返すかの設定です。数字だけ見ても大きさが分からないので、タイル1枚が実際に何メートルになるか で考えます。
今回の床は6m四方、練習画像には4×4のタイル模様が入っています。つまり計算はこうです。
| Tiling | 床に並ぶタイルの数 | タイル1枚の大きさ | 見え方 |
|---|---|---|---|
(1, 1) | 4 × 4 | 1.5m | 巨大。タイルに見えない |
(2, 2) | 8 × 8 | 0.75m | 大判タイル |
(4, 4) | 16 × 16 | 0.375m | 一般的な床タイルらしい大きさ |
(4, 4) にしてみてください。ClientSimで実際に立って、足元を見下ろします。画面で見て決めるのではなく、立ったときの大きさで決める のがコツです。
現実の目安を知っておくと調整が早くなります。床タイルは30〜60cm、フローリングの板は幅10〜20cm、レンガは長さ20cm程度です。
床と壁で同じTilingにする必要はありません。床は真上から踏み込むので繰り返しが見えやすく、壁は斜めから見るので少し大きくても気になりません。
変わるのは貼り方だけです。床のTransformも、当たり判定の大きさも、Tilingでは変わりません。
4. 光沢と凹凸を足す
Smoothness は表面の滑らかさです。0.2 と 0.8 を入れ替えて、床を斜めから見比べてください。値が高いほど照明の映り込みが鋭くなります。
ただし、数字を上げれば鏡になるわけではありません。何が映り込むかは、周囲の物と照明で決まります。また、光らせたいからと Metallic を1にすると、金属の反射に変わって色味まで変わります。
Normal Map（法線マップ） は、面の向きの情報を画像として持ち、溝や傷があるように光の当たり方を変えます。タイルの目地を表現するのに向いています。
Normal Map用の画像を持っている場合は、その画像のImport設定で Texture Type を「Normal map」に変えてApply してから、マテリアルの Normal Map 欄へ入れます。この設定を忘れると、Unityは普通の色画像として扱うので、凹凸が不自然になります。
今回の練習用PNGは色画像なので、Normal Map欄に入れても正しい凹凸にはなりません。
そしてもう一度確認します。Normal Mapを貼っても、形も当たり判定も変わりません。 足が乗る段差はCubeとColliderで作り、細かな表面の質感はNormal Mapで作る、という分担です。
ピンクになったら、シェーダーを疑う
床や配布アセットが、鮮やかなピンク色（マゼンタ）になることがあります。VRChatのワールド制作でいちばんよく出会う表示トラブルです。
このピンクは、「このマテリアルのシェーダーが、いまのプロジェクトで動いていない」 という印です。画像が壊れたわけでも、テクスチャが見つからないわけでもありません。
よく出会う場面は、上から順にこうです。
- 配布ア セットを入れた直後。そのマテリアルが、URPやHDRP向けのシェーダーを参照している
- アバター用のシェーダー（lilToonなど）が入ったマテリアルを、そのシェーダーがないプロジェクトで使った
- フォルダ整理でシェーダーのファイルを消した、または別PCへコピーするときに漏れた
直し方は簡単です。
- ピンクのオブジェクトを選ぶ
- Inspectorのマテリアルで、一番上のShaderのドロップダウンを開く
- Standard に切り替える
- Albedo に元のテクスチャを差し直す
多くの場合これで直ります。テクスチャの再インポートから始めると遠回りになるので、まずシェーダーを見る と覚えてください。
同じマテリアルを共有する
作った FloorTile を、別のCubeにも割り当ててみてください。片方のマテリアルの色を変えると、もう片方も一緒に変わります。
これは不具合ではありません。2つのオブジェクトが 同じマテリアルを参照している からです。
部屋中の床をまとめて調整したいときは、この性質が便利です。逆に一部だけ違う色にしたいなら、Projectでマテリアルを複製し、FloorTileAccent のように名前を変えて割り当てます。
オブジェクトごとに別のマテリアルを作るより、「一緒に調整したい面はどれか」で分けるほうが、後の管 理が楽になります。マテリアルの数が増えると描画の負荷も上がります。
うまくいかないときは
- ピンクになった → シェーダーが動いていません。Standardに切り替えます（上の節を参照）
- 画像の色が思ったより暗い → Albedoの色が白以外になっていないか。Standardでは色が画像に掛かります
- 模様が繰り返されず、引き伸ばされる → 画像のImport設定で Wrap Mode が
Repeatになっているかを見ます - 片方を変えたら別の床も変わった → 同じマテリアルを共有しています。複製して分けます
おまけ：先に知っておくと良いこと
- Rendering Modeは、迷ったらOpaque: 透明にできるモードもありますが、描画の順番の問題や負荷が増えます。ガラスや葉っぱなど、必要な場所だけ変えます
- テクスチャの解像度は「見える距離」で決める: 床や壁のような大きな面は1024〜2048、小物は512程度が目安です。Questやスマホ向けなら、その半分から始めます
- Max Sizeを下げても元の画像は変わらない: Import設定のMax Sizeは、Unityが使う大きさを決めるだけです。
1024を512にして見比べ、差が気にならなければ下げたままにできます - 側面の模様がつぶれるのは正常: 6m四方で厚さ0.2mの床は、上面と側面で面積が大きく違います。同じマテリアルだと側面の模様が引き伸ばされますが、実際には見えない場所なので気にしなくて構いません
- 無料素材にも権利がある: 配布サイトのテクスチャは、商用可・クレジット表記など条件が付いていることがあります。公開するワールドに使う前に確認してください
まとめ
床の見た目は、3つの部品でできています。
- Textureは柄、Shaderは材質の種類、Materialはそれを貼った状態
- 模様の大きさは数字ではなく、タイル1枚が何メートルか で決める
- ピンクは画像の問題ではなく、シェーダーが動いていない印
- 同じマテリアルを共有すると、片方の変更が全部に効く
調整に迷ったときの問いかけは、「立って足元を見たとき、この模様は大きすぎないか？」 です。画面の中ではなく、その場に立った視点で決めると外しません。
床の見た目が決まったら、次は明るさです。照明とベイク で、同じ部屋に光と影を作ります。全体の進み方は ワールド制作の学習マップ で確認できます。