この記事では、テクスチャをシームレスにする方法を4つ紹介します。
使用ソフト
・After effects25.5.0
おそらくどのバージョンでも大丈夫だと思います。
対象読者
・エフェクトデザイナー
・AEでテクスチャを作っている、作りたい方
・AEでシームレス化の方法を知りたい方
環境
・After effects（日本語版）
以降のコンポジション設定は、幅512×高さ512で作成していきます。
目次
◆そもそもシームレス画像って何？
まず、シームレスは継ぎ目がない、途切れがない、縫い目がないという意味です。
なのでシームレス画像とは、途切れ、縫い目、切れ目が無い画像のことをいいます。
画像で解説すると、下の左画像のような切れ目のある状態 から 下の右画像のような切れ目のない状態に調整していきます。
◆切れ目があると何がダメなの？
特にノイズ系テクスチャを使うオーラ、ショックウェーブエフェクト、Dissolve、Flow Mapなど使用する際に注意なのですが下動画のように切れ目があると、エフェクトに切れ目が映ってしまい見た目が悪くなってしまいます。
切れ目をごまかせるのであれば、切れ目があっても良いと思いますが誤魔化しきれない時があったり、誤魔化す為に本来必要のないエフェクトを配置することになるので基本シームレス化することをおすすめします。
左：シームレス化する前のテクスチャ 右：シームレス化した後のテクスチャ
簡単にオーラテクスチャをスクロールさせたものですが、左の動画に切れ目が入っていると思います。
※UnityのNova shaderでスクロールさせています。
◆タイリングに小数点のある数字を入力すると？
シームレス化していても切れ目が出る場合があります。
それは、Tilingに小数点を入れた時です。
これに関しては、切れ目があっても特に目立たない、ごまかせる、小数点を入れた方が見た目が良くなるなら入れてもいいと思っています。
そういった状況が揃った時は、自分は小数点を入れています。
揃わない時は、整数を入れています。
↓シームレス化したテクスチャでタイリングに小数点を入力した時の見た目です。
1.オフセット(Offset）
1-1：シームレス化したいものを用意
まずは、シームレスにしたいもの用意します。
今回シームレス化するものは、以下のテクスチャとなります。
フラクタルノイズで適当に作成したものなので特に解説はしません。
1-2：用意したテクスチャレイヤーの上に調整レイヤーを作成し、オフセットを付与
用意したテクスチャのレイヤーの上に調整レイヤーを作成します。
調整レイヤーは下にある全てのレイヤーに効果を付与します。
タイムラインウィンドウの上で右クリックで作成していきましょう。
次に調整レイヤーにオフセットを付与します。
エフェクトコントロールウィンドウ上で右クリック
ディストーションの欄からオフセットを選んでください。
1-3：オフセットの値を0にして切れ目が中央に来るようにする
次にオフセットの 中央をシフトの値を0にします。
今回は、X軸を0にします。
するとノイズの中央部分に切れ目が発生します。
1-4：切れ目にマスクをかける
調整レイヤーを選択後、長方形レイヤーを使用して
切れ目部分に合わせてマスクをかけます。
1-5：マスク数値設定
次にマスクの設定をしていきます。
・[加算]を[減算]に変更
・マスクの境界のぼかしに25を入力 ※今回は25でしたが作るものによって変わります。大体20から40ぐらいが丁度良いと思います。
1-6：確認
結果このような見た目になりました。
切れ目が無くなったかどうか極座標で確かめてみます。
赤で囲ってあるレイヤーを選択し、Shift+Ctrl+Cでプリコンポーズをします。
その後、合体したレイヤーに極座標を付与します。
プリコンポーズできたレイヤーを選択して、ディストーションから極座標を付与します。
その後、補間の数値を100%
変換の種類を長方形から極線へに変更します。
左のような見た目になったら成功です。
右がシームレス化する前のものになっています。見比べると切れ目が無くなっていると思います。
2.モーションタイル（Motion tile)
２つ目は、モーションタイルを使用したシームレス化です。
オフセットと大体同じですが、紹介していきます。
2-1：シームレス化したいものを用意
オフセットの時と同じものを使用します。
2-2：用意したテクスチャのレイヤーの上に調整レイヤーを作成し、モーションタイルを付与
1-2と同じように2-1で用意したテクスチャのレイヤーの上に調整レイヤーを作成します。
その後、調整レイヤーを選択してスタイライズからモーションタイルを付与します。
2-3：モーションタイルの値を0にして切れ目が中央に来るようにする
タイルの中心のX軸を0にします。
すると切れ目ができたと思います。
2-4：切れ目にマスクをかける
1-4と同じように長方形レイヤーを使用して、切れ目にマスクをかけます。
2-5：マスク数値設定
次にマスクの設定をしていきます。
・[加算]を[減算]に変更
・マスクの境界のぼかしに25を入力 ※今回は25でしたが作るものによって変わります。大体20から40ぐらいが丁度良いと思います。
2-6：確認
結果このような見た目になりました。
切れ目が無くなったかどうか1-6と同じように、極座標で確かめてみます。
左のような見た目になったら成功です。
右がシームレス化する前のものになっています。見比べると切れ目が無くなっていると思います。
2-7追記：ミラーエッジ
先ほどまでのマスクを使用する他に、モーションタイル内にある「ミラーエッジ」という機能を使う方法もあります。
チェックすることで切れ目部分が鏡合わせのようになります。
ミラーエッジ チェック後
ミラーエッジ チェック前
2-8追記：ミラーエッジ確認
極座標を付与してみる以下のようになりました。
結構馴染んでいる感じもしていますが、鏡合わせになっている部分が分かりやすいかもしれません。
個人的にノイズ系は、マスクを使用した方が良いような気がしています。
ただ、チェック一つで行えるのは魅力ですね。
別のテクスチャ作成でもしかしたら使い所あるかもしれません。
3.レイヤー複製
3-1:シームレス化したいものを用意
今までと同じものを使用します。
3-2：用意したものを2つ複製
3-1で用意したものを２つ複製します。
画像のように合計３つにしてください。
3-3：2つのレイヤーを両端に配置する。
まず、一番上のレイヤーを非表示にしてください。
次に上から2番目のレイヤーを左端に配置し、レイヤーの右端が中央に来るようにします。
今回、コンポジションのサイズを512✕512にしているので位置のX軸を0.0にします。
すると上画像のような見た目になったと思います。
※分かりやすいように上から3番目のレイヤーは非表示にしています。
次に3番目のレイヤーを右端に配置し、レイヤーの左端が中央に来るようにします。
X軸を512にします。
すると下画像のように中央に切れ目が入ったような見た目になったと思います。
3-4：一番上のレイヤーを表示させ、切れ目に合わせてマスクをかける
まず、3-3で非表示にした一番上のレイヤーを表示させます。
次に、一番上のレイヤーにマスクをかけます。
一番上のレイヤーを選択した後、長方形レイヤーを使用して中央の切れ目に合わせてマスクをかけてください。
切れ目ギリギリではなく少し余裕を持たせてマスクをかけるととシームレス化しやすくなります。
現在、下画像のような見た目になっていると思います。
3-5：マスク数値設定
次に、マスクの数値を設定します。
マスクの境界のぼかしに50を入力します。
結果、下画像のようになりました。
4.CC RepeTile
4-1：シームレス化したいものを用意
4-2：CC RepeTileを付与
シームレス化したいレイヤーを選択後、エフェクトコントロールウィンドウ上で右クリック
スタイライズ→CC RepeTileをクリックします。
Blend Bordersの数値を40%ぐらいにします。
4-3：確認
極座標を付与して確認してみると、以下になります。
左：RepeTileあり 右：なし
5.Unity上で確認
最後にUnity上で切れ目が無いか確認してみます。
1：オフセット
2：モーションタイル
3：レイヤー複製
4：CC RepeTile
unity上でスクロールさせても切れ目が目立つ感じも無いのでこれで終わりにしたいと思います。
今回は縦方向のみシームレス化しましたが、横方向にシームレス化したい場合は方向を変えて同じようにしてもらえるとシームレス化できると思います。
最後まで読んでいただきありがとうございました。
今後も読んでいただけると嬉しいです。
