ディスプレイスメントマップ
displace
displace パラメーターは、指定した2枚目の画像（ディスプレイスメントマップ）に従って、画像の各ピクセルを移動させます。平面のデザインをTシャツのしわ、旗の波打ち、クッションの曲面などの上に単に重ねるのではなく、その凹凸に沿わせるための機能です。
displace だけでは何も起こりません。ピクセルが移動できる距離を指定する displace-x と displace-y と組み合わせて使用します。
マップの仕組み
マップの赤チャンネルがピクセルを水平方向に、緑チャンネルが垂直方向に移動させます。
中立値は 128 ではなく 127 です。 マップ上でちょうど 127 のピクセルは、対応する画像のピクセルをその位置にとどめます。127未満の値は一方向へ、127を超える値は反対方向へピクセルを移動させ、その量は displace-x と displace-y によって拡大されます。そのため、一様に 7f7f7f のマップはまったく何も起こしません。マップを作成する際は、これが適切な出発点になります。
マップは画像全体に引き伸ばされるため、画像と同じ寸法である必要はありません。商品モックアップではこの性質が有用で、商品写真から作成した1つのマップを、その写真に配置するあらゆるデザインに使い回せます。
マップの選び方
ノイズではなく「面」として機能するマップには、次の4つの性質があります。
| 性質 | 理由 |
|---|---|
| グレースケールであること | 赤チャンネルは水平方向、緑チャンネルは垂直方向にピクセルを移動させます。両チャンネルが等しければ斜め方向に同じ量だけ移動し、これがしわに沿った見え方になります。 |
127 を中心としていること | 平均値が 127 から大きく外れたマップは、デザインを波打たせるのではなく、全体を一方向にずらしてしまいます。 |
| 滑らかで低周波であること | マップに鋭いエッジがあると画像が裂けます。マップをぼかすことで、ずれが曲がりに変わります。 |
| 振幅が小さいこと | マップの大部分を 127 ± 40 程度に収め、移動量は displace-x と displace-y で指定します。 |
デザインを沿わせたい面そのものが、たいていは最適なマップの元になります。商品写真の彩度を落とし、大きな陰影だけが残るまでぼかし、中間調が 127 付近に来るまでコントラストを下げます。これにより、実際のしわのハイライトと影がそのまま変位の場になります。
加工していない写真を含め、どんな画像でもマップとして使用できます。その場合、赤と緑のチャンネルがそのまま不規則な変位の場になり、曲がるのではなく裂けた結果になります。
実例
以下のマップは、薄紙の写真そのものから sat=-100、blur=20、con=-60、bri=-16 で作成したもので、グレースケールかつ滑らかで、平均値は 126 です。これを blend-displace に渡すことで、写真ではなくロゴの方が曲がります。
https://assets.imgix.net/docs/ai-image-edit/wrinkle-fabric.jpg
?w=600
&blend=https%3A%2F%2Fassets.imgix.net%2Fimgix-logo.png%3Fw%3D300
&blend-mode=multiply
&blend-align=middle,center
&blend-displace=https%3A%2F%2Fassets.imgix.net%2Fdocs%2Fai-image-edit%2Fwrinkle-fabric.jpg%3Fw%3D600%26sat%3D-100%26blur%3D20%26con%3D-60%26bri%3D-16%26fm%3Dpng
&blend-displace-x=30&blend-displace-y=30パスではなくURLでマップを指定する場合、そのクエリ文字列を含めて完全にパーセントエンコードする必要があります。
実運用では、マップは一度作成して商品写真と一緒に保存するため、URLでは blend-displace=/maps/shirt-folds.png のような短いパスで指定します。
マップの指定
マップはパスまたはURLで指定し、mark と同じ方法で解決されます。
取得できないマップを指定した場合、リクエスト全体がオリジンのステータスで失敗します。そのため、存在しないマップを指定すると 404 が返ります。画像でないファイルの場合は 422 が返ります。
一部のマップは警告なくスキップされ、画像はワープされずにレンダリングされます。対象は、一辺が8192pxを超えるマップ、10ビットまたは浮動小数点のチャンネルを持つマップ、およびPDFです。
レイヤー形式
mark-displace と blend-displace（およびそれぞれの -x と -y）は、元画像ではなくレイヤーを変位させます。どちらも blend-displace[1] のようなインデックス付きの指定に対応しています。
レイヤーの場合、マップはレイヤーではなく元画像に合わせて配置されます。これにより、商品写真ごとに1つのマップを用意すれば、あらゆるデザインに対応できます。
mark-tile は mark-displace を無視します。
処理の順序
変位は、リサイズの前に実行される distort、skew、arc とは異なり、画像のリサイズ後に実行されます。マスク、ボーダー、レイヤーはその後に適用されます。