ゲーム等で使えるつなぎ目のないループするテクスチャ画像の作り方

ページ内の目次
1 パターンテクスチャ
2 パターンテクスチャ化（前後比較）
3 1. テクスチャの元画像取得
3.1 撮影のポイント
4 2. テクスチャの加工
5 3. テクスチャのスクロールフィルター適用
6 3. テクスチャの継目をごまかす
7 4. テクスチャ確認
8 ページの更新履歴

パターンテクスチャ

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

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

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

Unity上でテクスチャをパターン化する前後で比較した画像です。画像の継目をうまく誤魔化すなど、パターン化することで、面に対して画像をループで貼り付け（ループでのタイリング）したときに、テクスチャの境目がわかりにくくなります。

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

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

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

撮影のポイント

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

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

砂利道の写真

2. テクスチャの加工

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

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

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

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

以下、Photoshop上での操作です。無料画像編集ソフトでも同様の機能を持つソフトは沢山あると思います。

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

PhotoShop レイヤ命名例

「Scrolled Image」のみ選択した状態で、「メニューバー：フィルタ(T) ⇒ その他 ⇒ スクロール」を選択し、スクロールフィルターを以下のように設定します。ラップアラウンド（巻き戻す）にチェックを入れておけば、スクロールした分、が画像の反対側から描画されます。（Photoshopが無くとも、Windows標準のPaintでも、画像のコピーと移動、トリミングをすることで同様の作業ができます。）

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

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

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

4. テクスチャ確認

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

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

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

法線マップ（というかHeight Map）とかもし手で作る場合も同じ方法でいけそうですが、時間がかかりそうですね。皆様どのように作ってるのでしょうか・・。

ページの更新履歴