パターンテクスチャ

3DのTextureとして、3Dオブジェクトに貼り付けしたときループとなるような画像を「パターンテクスチャ（Pattern Texture）」と呼び、キーワード検索すれば素材として公開している素晴らしいものが多数存在していますが、ここでは自作する時の自分なりの手順をまとめておこうと思います。

テクスチャのパターン化（Unity3Dで表示）

早速ですが、写真をパターン化する前と後で違いを確認してみましょう。

パターンテクスチャ化（前後比較）

これは Unity上でそれぞれ平面にテクスチャをループで貼りつけてみて、テクスチャをパターン化する前後で比較した画像です。

パターン化前

パターン化前は一定間隔で縦方向に線が入っているように見えますね。ココが画像の継ぎ目というのがよくわかります。横方向の継ぎ目には線が入っておらず、目立ってませんが、これはたまたま、砂利や陰影の濃さが画像の上下で同じ感じだったためです。

パターン化後

右の画像を見てみると、画像の継目をうまく誤魔化すことで、画像をループで貼り付け（ループでのタイリング）したときに、テクスチャの境目がわかりにくくなります。 パターン化前にあったつなぎ目も見なくなってますね！

ツールでのパターンテクスチャの作成方法

ブラウザ上でループ画像を生成する簡易ツールを作りましたので、こちらからどうぞ。

ループ画像変換ツール - 画像ルーパーWeb版

上記のツールに画像ファイルを利用すると、下のような画像を生成できます。

例は沖縄で撮影した石垣の写真をツールで、ループ画像にしたものです。 ちゃんとつなぎ目が分かりにくいループ画像になってますね！

手動でのパターンテクスチャの作成方法

以下、自分なりのパターンテクスチャ作成方法をメモしたものです。より効率のよい方法は引き続き模索中ですですので、知っている方はぜひ教えてください。

1. テクスチャの元画像取得

スマフォカメラなどで、適当に地面や板、木の皮などを撮影します。自分の場合、接写に強くて綺麗に取れるRICOH GR DIGITAL IV というデジカメを使っています。試行錯誤しながらですが、個人的に感じたポイントを以下に書いて見ました。

** 撮影のポイント **

• 被写体に影が映らないようにする。
• なるべく正面からとる。（被写体の面の法線を意識する）
• 画像のふち部分の色合いがなるべく均一になるようにする。
• 木の板などパターンとなる方向が決まっているものは、木の継目がふち部分にくるように撮影位置を調整する。また、木の継目に対してふち部分が垂直または水平になるように撮影位置を調整する。
• 壁など、凹凸があるものについて太陽があたっていると影が焼きこまれてしまうことを意識する。（いやなら日陰の部分をさがして露光眺めで撮影するとか）

試しに撮影した砂利の地面

2. テクスチャの加工

2の倍数のサイズとなるように画像サイズを縮小、カットします。なぜ2の倍数かというと、一般にゲーム等で高速にメモリ上で取り扱うために効率がよいサイズだからです。

ここでは縦256ピクセル、横256ピクセルに加工しています。

砂利道の写真を一部トリミング＆サイズ縮小

3. テクスチャのスクロールフィルター適用

以下、Photoshop上での操作です。あくまでやり方の例として書いておきますね。

まず、対象画像を別レイヤーにコピーして、「Scrolled Image」とでも命名しておきます。また、元画像を「Original Image」とでも命名しておきます。

PhotoShop レイヤ命名例

「Scrolled Image」のみ選択した状態で、「メニューバー：フィルタ(T) ⇒ その他 ⇒ スクロール」を選択し、スクロールフィルターを以下のように設定します。 そして ラップアラウンド（巻き戻す） にチェックを入れておけば、スクロールしてキャンバスからはみ出た画像部分、キャンバスの反対側から描画されます。

3. テクスチャの継目をごまかす

「Scrolled Image」の継目を 消しゴムツール で消していきます。「Original Image」とうまく合成できればよし。消しゴムツールの硬さはある程度抑えてあげると良いと思います。下の画像だと、中心縦部分、横部分に画像の継目が見えてしまっています。

砂利道の写真（スクロールフィルタ適用）

4. テクスチャ確認

「Original Image」「Scroll Image」両方を選択して再度スクロールフィルターで画像を動かして、おかしな継目が見えないか確認しておきます。

砂利道の写真（違和感を消しゴムで削除）

完成です！これでループできる砂利の画像が完成しました。

以上の4ステップでパターンテクスチャ作成の完了となります。単純に継ぎ目をぼやかすだけでは難しい模様などがある場合でも基本的な流れは同じで、消しゴムツールでぼやかす代わりに、うまく繋ぎ目を画像編集する流れになると思います。

法線マップ（というかHeight Map）とかも手で作る場合も同じ方法でいけそうですが、時間がかかりそうですね。

自動的に生成する

手動ではなく、動的にパターンテクスチャを生成する方法もあります。 プロシージャルテクスチャという技術で、テクスチャ生成用の関数にパラメータを入れることで、座標にあう色や法線の情報を生成してくれるものです。

プログラムから、それっぽく見える画像を生成でき、いくらでも解像度を上げることができるが、生成時に時間がかかり重たいのが難点です。

今後、PCやゲーム機のスペック向上でパターンテクスチャの生成はこちらが主流になっていくと思います。

ページの更新履歴

コメント

pu 2018年11月12日 1:25 PM

素晴らしい記事をありがとうございます！
法線マップはcrazybumpで作成すると楽ですよ～

あまじ 2018年11月13日 9:27 PM

pu 様
貴重な情報ありがとうございます！
crazybump、テクスチャから自動で法線マップを生成できるソフトなんですね。
法線だけじゃなく、スペキュラマップ、デフューズマップの生成もできるとか。
評価版もあるし個人（趣味）でも手が届く金額というのもよさそうですね。
試しに使ってみようという気になりました。ありがとうございます！