Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2021年1月24日に更新

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

パターンテクスチャ

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

テクスチャのパターン化(Unity3Dで表示)

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

パターンテクスチャ化(前後比較)

テクスチャのパターン化(Unity3Dで表示)

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

パターン化前

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

パターン化後

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

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

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

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

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

石垣の写真

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

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

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

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

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

** 撮影のポイント **

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

試しに撮影した砂利の地面 砂利道の写真

2. テクスチャの加工

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

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

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

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

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

画像編集ソフト

Photoshopが無くとも、Windows標準のPaintでも、画像のコピーと移動、トリミングをすることで同様の作業ができます。CliptStudio や無料画像編集ソフト(Gimp等)など、同様の機能を持つソフトは沢山あると思いますのでお好きなのをお使いくださいー

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

PhotoShop レイヤ命名例

「ScrolledImage」「OriginalImage」等の名称でレイヤ分けしておく

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

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

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

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

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

4. テクスチャ確認

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

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

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

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

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

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

自動的に生成する

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

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

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

いくら近づいても荒くないテクスチャ

例えば VR 機器と組み合わせて、プレイヤーが視点を合わせたり近づいたりしたときに、見ているオブジェクトの詳細なテクスチャを動的に生成していき、いくら近づいても荒くない、解像度が高い映像を見せる、みたいな手法に使えます。 写真などがベースだと、予め解像度が高いものを用意しなきゃいけないので、限界がありますよねー

ページの更新履歴

更新日 更新内容
2015.11.14 ページ公開
2018.3.24 スマホからレイアウトが崩れて読みにくいので修正。ついでに文章構造と内容も訂正。アイキャッチ画像追加。
2021.1.1 プロシージャルテクスチャ追記。
2021.1.24 自作ツールへのリンクと説明を追記。

コメント

pu 2018年11月12日 1:25 PM

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

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

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

 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

第2章36 ポインタと配列

#C11仕様#C言語#ゲームプログラミング✎ 2021-01-18
C言語でポインタを使い、配列へのアクセスを行う方法と仕組みを解説しています。
広告領域
追従 広告領域
目次
ゲーム等で使えるつなぎ目のないループするテクスチャ画像の作り方
ゲーム等で使えるつなぎ目のないループするテクスチャ画像の作り方
パターンテクスチャ
パターンテクスチャ
テクスチャのパターン化(Unity3Dで表示)
テクスチャのパターン化(Unity3Dで表示)
パターン化前
パターン化前
パターン化後
パターン化後
ツールでのパターンテクスチャの作成方法
ツールでのパターンテクスチャの作成方法
手動でのパターンテクスチャの作成方法
手動でのパターンテクスチャの作成方法
1. テクスチャの元画像取得
1. テクスチャの元画像取得
2. テクスチャの加工
2. テクスチャの加工
3. テクスチャのスクロールフィルター適用
3. テクスチャのスクロールフィルター適用
3. テクスチャの継目をごまかす
3. テクスチャの継目をごまかす
4. テクスチャ確認
4. テクスチャ確認
自動的に生成する
自動的に生成する
ページの更新履歴
ページの更新履歴
コメント
コメント
Nodachisoft © 2020