3DのTextureとして、3Dオブジェクトに貼り付けしたときループとなるような画像を「パターンテクスチャ(Pattern Texture)」と呼び、キーワード検索すれば素材として公開している素晴らしいものが多数存在していますが、ここでは自作する時の自分なりの手順をまとめておこうと思います。
早速ですが、写真をパターン化する前と後で違いを確認してみましょう。
パターンテクスチャ化(前後比較)
これは Unity上でそれぞれ平面にテクスチャをループで貼りつけてみて、テクスチャをパターン化する前後で比較した画像です。
パターン化前は一定間隔で縦方向に線が入っているように見えますね。ココが画像の継ぎ目というのがよくわかります。横方向の継ぎ目には線が入っておらず、目立ってませんが、これはたまたま、砂利や陰影の濃さが画像の上下で同じ感じだったためです。
右の画像を見てみると、画像の継目をうまく誤魔化すことで、画像をループで貼り付け(ループでのタイリング)したときに、テクスチャの境目がわかりにくくなります。 パターン化前にあったつなぎ目も見なくなってますね!
ブラウザ上でループ画像を生成する簡易ツールを作りましたので、こちらからどうぞ。
上記のツールに画像ファイルを利用すると、下のような画像を生成できます。
例は沖縄で撮影した石垣の写真をツールで、ループ画像にしたものです。 ちゃんとつなぎ目が分かりにくいループ画像になってますね!
以下、自分なりのパターンテクスチャ作成方法をメモしたものです。より効率のよい方法は引き続き模索中ですですので、知っている方はぜひ教えてください。
スマフォカメラなどで、適当に地面や板、木の皮などを撮影します。自分の場合、接写に強くて綺麗に取れるRICOH GR DIGITAL IV というデジカメを使っています。試行錯誤しながらですが、個人的に感じたポイントを以下に書いて見ました。
** 撮影のポイント **
2の倍数のサイズとなるように画像サイズを縮小、カットします。なぜ2の倍数かというと、一般にゲーム等で高速にメモリ上で取り扱うために効率がよいサイズだからです。
ここでは縦256ピクセル、横256ピクセルに加工しています。
以下、Photoshop上での操作です。あくまでやり方の例として書いておきますね。
Photoshopが無くとも、Windows標準のPaintでも、画像のコピーと移動、トリミングをすることで同様の作業ができます。CliptStudio や無料画像編集ソフト(Gimp等)など、同様の機能を持つソフトは沢山あると思いますのでお好きなのをお使いくださいー
まず、対象画像を別レイヤーにコピーして、「Scrolled Image」とでも命名しておきます。また、元画像を「Original Image」とでも命名しておきます。
PhotoShop レイヤ命名例
「Scrolled Image」のみ選択した状態で、「ラップアラウンド(巻き戻す)
にチェックを入れておけば、スクロールしてキャンバスからはみ出た画像部分、キャンバスの反対側から描画されます。
「Scrolled Image」の継目を 消しゴムツール
で消していきます。「Original Image」とうまく合成できればよし。消しゴムツールの硬さはある程度抑えてあげると良いと思います。下の画像だと、中心縦部分、横部分に画像の継目が見えてしまっています。
砂利道の写真(スクロールフィルタ適用)
「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お名前:以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前: