シームレステクスチャの作り方01 kuretex/ウェブリブログ

シームレステクスチャの作り方01

<< 作成日時： 2008/12/22 17:54

テクスチャをタイリング（同じテクスチャを何枚もならべて繰り返す）した時、
つなぎ目を目立たなくするためにシームレス処理をすることがあります。
簡単にできるのですが、ここで一度解説しておきたいと思います。

私が使っているのはフォトショップです。
ゲームの開発の都合で去年CS2にバージョンアップしましたが、
それまでは、5.5を使用しておりました。

今回は草原のテクスチャを例にしたいと思います。

まず、素材となる画像データを用意します。
曇りの日にデジカメで撮影した草原です。

素材画像からテクスチャの原型を矩形に選択します。
矩形のピクセル数は気にせず、矩形のなかの草の大きさを意識してください。
草のサイズが大きすぎると、タイリングしたときに見える草の表情が乏しくなります。
また、逆に小さすぎると草の形が認識できなくなって、なんのテクスチャかわからなくなってしまいます。
適度なサイズを選択したら、コピーして別ウインドウにペーストします。

切り出したテクスチャの情報だけでシームレス処理をすると情報量が減ってしまいます。
一枚のテクスチャのなかで使いまわしの部分が増えれば、タイリングが増えたのと同様です。
それを避けるには、できるだけ今選んだ矩形の外の情報をつかってシームレス処理をするようにします。

まず、横方向をシームレス処理しましょう。（先に縦方向でもかまいません。）
フォトショップのメニューにある、フィルタ→その他→スクロールを選びます。

画像を水平、垂直方向にスクロールするフィルタです。
出てきたウインドウに水平方向の移動量を指定します。
現在の画像サイズの半分位を入力します。
画像のサイズはウインドウの下の部分をAlt+クリックすればすぐわかります。

今回は256×256で切り出したので128ピクセル水平移動。
ラップアラウンド（巻き戻す）にチェックを入れます。ウインドウの右端に抜けた画像は左端ら出てきます。

この状態でウインドウの右端と左端はもともとつながった画像ですので、
真ん中に見えているライン（シーム）をなじませれば、横方向につながるテクスチャができるわけです。

コピースタンプツールや修正ブラシツールを使い、
切り出す前の画像で矩形選択した外側の情報をつかってなじませます。
切り出す前のウインドウのコピーしたい部分をAlt+クリック。切り出したウインドウに戻り、シームを
なぞっていきます。

同様に縦方向にスクロールしてシームを処理します。

処理がおわったら、もう一度横方向にスクロールしてウインドウの左右にかかっていた部分を
処理したらシームレス処理は終わりです。

試しにフォトショップ上でタイリングして見ましょう。
Ctrl+Aで全体を選択します。編集→パターンを定義を選択。（CS2ではこの後パターン名を入れてOKする。）
テクスチャサイズの2～3倍程度の大きさの新規ウインドウを作成。
編集→塗りつぶしから、プルダウンでパターンを選択。（CS2ではカスタムパターンのリストから先ほど定義した
パターンを選択）してOKする。すると・・・

枯葉などの目立つ要素があるためテクスチャのタイリングがばればれです。
今回は解説のため、作業の動きがわかりやすいように残しておきましたが、
本来こういったゴミは切り出してすぐに消しておいたほうが良いでしょう。
スクロールを使い、目立つ要素をなるべく処理します。

タイリングテスト

慣れてきたら一度に縦横の処理をしてもかまいませんが、
縦横同時処理だと、上下左右のウインドウ端の真ん中が盲点になりますので注意してください。

最近のフォトショップにはフィルタ→パターンメーカーで
タイルパターンを作成できる
機能があります。周波数の高いテクスチャでしたら、荒く処理した後、
こちらで生成するのも効率がよいかもしれません。

この段階で完成にしてもいいのですが、
若干繰り返しのパターンが目立ってしまっています。
もっと大きいサイズのテクスチャにすればもちろんいいのですが、
ゲームなどのデータの場合はそうはいきません。
そこで、低周波数のコントラストのうねりを調整してしまう方法があります。
それは次回説明します。