feDisplacementMap 설명

feDisplacementMap은 항상 이해하기 어려운 SVG 필터 중 하나입니다. 그런데 막상 들여다보니 그렇게 복잡하지도 않고 실제로 가지고 놀기에도 재미있습니다.

먼저 이 SVG 필터가 무엇을 할 수 있는지 봅시다.


feDisplacementMap는 in 및 in2 두 개의 입력 소스를 받습니다. in는 변위될 이미지이고 in2는 in가 변위되는 방법을 계산하는 데 사용됩니다. 이 경우 in에 숲 이미지를 사용하고 feTurbulence으로 만든 이미지를 사용했습니다. 따라서 숲 이미지에 잔물결 같은 효과를 만들 수 있습니다.

본질적으로 feDisplacementMap가 하는 일은 이미지의 각 픽셀을 반복하고 변환 공식에 따라 픽셀을 이동하는 것입니다.

변환 공식

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

공식을 분석하면 다음과 같습니다.

P'(x, y) 왼쪽은 변환 후 좌표

올바른 부분은 어떻게 변형되는지입니다

XC(x,y)와 YC(x,y)는 in2 이미지에서 주어진 좌표의 RGB 값을 255로 나눈 값을 의미하므로 0과 1

사이가 됩니다.

scale가 클수록 픽셀이 더 많이 변위됨

예시

<filter>
    <!-- ... -->
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" 
        xChannelSelector="R" yChannelSelector="G"/>
</filter>

feDisplacementMap의 구문과 변환 공식을 비교하면 다음을 알 수 있습니다.

축척은 scale에 해당합니다.

xChannelSelector는 확인할 색상 채널을 지정합니다XC(x,y).

yChannelSelector는 확인할 색상 채널을 지정합니다YC(x,y).

Note: SourceGraphic is the original input to the SVG filter, which is the forest image.

전체 예는 다음과 같습니다.

<svg>
  <defs>
    <filter id="displace">
      <feTurbulence id="turbulence" baseFrequency="0.1 0.1" result="turbulence" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="A" yChannelSelector="A"/>
    </filter>
  </defs>
  <image href="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" height="100%" width="100%" filter="url(#displace)"/>
</svg>

이제 우리는 feDisplacementMap을 이해했습니다.

feDisplacementMap를 사용하여 흥미로운 그래픽을 창의적으로 실험할 수 있습니다!