Choose your operating system:
Windows
macOS
Linux
Bump Offset (범프 오프셋) 매핑은 오브젝트 표면에서 텍셀의 위치를 더욱 멀리 디스플레이스(노멀 방향으로 이동)시키기 위해 UV 좌표를 창의적인 방식으로 변경하여 표면에 깊이감을 내는 것으로, 표면의 디테일이 실제보다 더욱 살아있는 것처럼 보이도록 만듭니다. 이번 하우투 예제에서는 Bump Offset 머티리얼 표현식을 찾는 방법뿐 아니라, 머티리얼에서 Bump Offset 노드를 활용하는 방법까지도 다뤄보도록 하겠습니다.
범프 오프셋
BumpOffset 은 흔히 'Parallax Mapping' (시차 매핑)이라 알려진 것에 대한 언리얼 엔진 4 용어입니다. BumpOffset 표현식으로 별도의 지오메트리 추가 없이 머티리얼에 입체감을 줄 수 있습니다. BumpOffset 머티리얼은 회색조 하이트맵 (heightmap, 높이맵)을 사용하여 깊이 정보를 나타냅니다. 하이트맵에서 밝은 부분은 더욱 '튀어나와' 보이며, 이러한 부분은 표면을 따라 움직이는 카메라로 보면 시차를 (많이 움직인 것으로) 보이게 됩니다. 하이트맵의 어두운 부분은 '멀어 보이는' 부분으로, 조금 움직이는 부분입니다.
범프 오프셋 머티리얼 표현식 찾기
Bump Offset 머티리얼 표현식은 팔레트 검색창을 통해 찾을 수 있습니다.
또는 머티리얼 그래프에 우클릭 한 다음 검색해도 됩니다.
Bump Offset 머티리얼 표현식 검색을 할 때, Bump Offset Advanced 라는 머티리얼 표현식도 검색될 것입니다. Bump Offset Advanced 는 일반 Bump Offset 머티리얼 표현식에서는 사용할 수 없는 부가 컨트롤을 추가하기 위해 만들어진 것입니다. 두 노드의 입력이 다르긴 하지만, 배치된 오브젝트의 UV 를 조작하여 오브젝트 표면의 디테일이 실제보다 살아있는 것처럼 보이도록 만든다는 점에서 동일한 방식으로 작동합니다.
Bump Offset 머티리얼 표현식을 찾았으면, 다른 머티리얼 표현식처럼 먼저 왼쪽 마우스 버튼 으로 선택한 다음 머티리얼 그래프에 끌어놓는 방식으로 놓을 수 있습니다. 왼쪽 마우스 버튼 을 놓으면 머티리얼 그래프에 Bump Offset 머티리얼 표현식이 배치됩니다.
범프 오프셋 머티리얼 표현식 사용
Bump Offset 머티리얼 표현식을 사용하도록 머티리얼을 구성하는 방법은 다음과 같습니다.
이 튜토리얼은 프로젝트에 시작용 콘텐츠 를 포함시킨 경우 찾아볼 수 있는 콘텐츠를 활용합니다. 프로젝트에 시작용 콘텐츠를 포함시키지 않은 경우,
-
먼저 콘텐츠 브라우저 에 우클릭 하여 뜨는 메뉴의 기본 애셋 생성 부분 아래 머티리얼 을 선택한 다음 이름을 Bump_Offset_Example 라 짓습니다. 이름을 지었으면, 콘텐츠 브라우저 에서 머티리얼에 더블클릭 하여 엽니다.
-
Bump Offset 머티리얼 표현식은 UV 좌표를 사용하여 작동하기 때문에, 베이스 컬러, 러프니스, 앰비언트 오클루전, 노멀 입력에 텍스처를 활용하는 머티리얼이 있어야 합니다. 이 예제에서는 프로젝트에 시작용 콘텐츠를 포함시킨 경우 Textures 폴더에서 찾을 수 있는 다음과 같은 텍스처를 사용하겠습니다.
-
T_Brick_Clay_New_D
-
T_Brick_Clay_New_M
-
T_Brick_Clay_New_N
텍스처를 찾았으면, 머티리얼을 열고 콘텐츠 브라우저 에서 마우스 왼쪽 버튼 으로 텍스처를 선택한 다음 머티리얼 그래프에 텍스처를 끌어 놓습니다. 머티리얼 그래프에 마우스가 있을 때 왼쪽 마우스 버튼 을 놓으면 그래프에 텍스처가 배치됩니다. 첫 번째 텍스처를 추가한 이후, 나머지 두 개의 텍스처에도 위의 과정을 반복합니다. 완료되면 다음과 같은 모습일 것입니다.
![BumpOffset_Adding_Textures.png]()
-
-
이제 머티리얼 그래프에 텍스처가 배치되었으니, 텍스처를 올바른 입력에 연결하기 시작하면 됩니다. 먼저 T_Brick_Clay_New_D 를 베이스 컬러 입력에 연결합니다. 다음 T_Brick_Clay_New_N 을 노멀 입력에 연결합니다. 그리고 T_Brick_Clay_New_M 텍스처의 빨강 채널을 러프니스 입력에 연결합니다. 마지막으로 T_Brick_Clay_New_M 의 초록 채널을 앰비언트 오클루전 입력에 연결합니다. 완료되면 이런 모습일 것입니다.
![BumpOffset_Making_Connections.png]()
-
모든 텍스처가 연결되었으니, 이제 Bump Offset 머티리얼 표현식을 머티리얼 그래프에 추가해 줄 차례입니다. Bump Offset 머티리얼 표현식을 찾으려면, 팔레트 에 Bump Offset 를 검색어로 넣고 검색하면 됩니다. 찾았으면 다른 머티리얼 표현식처럼 머티리얼 그래프에 추가할 수 있는데, 먼저 왼쪽 마우스 버튼 으로 선택한 다음 머티리얼 그래프에 끌어오면 됩니다. 머티리얼 그래프에 커서가 있는 상태에서 마우스 왼쪽 버튼 을 놓으면 머티리얼 그래프에 표현식이 배치됩니다. 완료되면 다음과 같은 모습일 것입니다.
![BumpOffset_Adding_BumpOffset_Node.png]()
-
Bump Offset 머티리얼 표현식이 머티리얼 그래프에 배치되었으면, 세 텍스처의 UV 입력에 연결해 줘야 작동합니다. Bump Offset 머티리얼 표현식을 텍스처에 연결하려면, Bump Offset 머티리얼 표현식 오른편의 출력 원을 왼쪽 마우스 버튼 으로 클릭합니다. 왼쪽 마우스 버튼 을 누르고 있는 상태에서 마우스를 Texture Sample 의 UV 입력 위로 올린 다음 초록색 체크 표시가 나타나면 버튼을 놓습니다. 텍스처 하나에 이 작업을 완료했으면, 나머지에도 그 작업을 해 줍니다. 완료된 모습은 다음과 같을 것입니다.
![BumpOffset_Connecting_BumpOffset.png]()
Bump Offset 머티리얼 표현식을 세 텍스처의 UV 입력에 처음 연결할 때, Bump Offset 머티리얼 표현식 하단에 빨간 경고표시가 보일 것입니다. Bump Offset 머티리얼 표현식은 정상 작동을 위해서는 하이트 맵이 필요한데, 현재 제공되어 있지 않습니다. Height 에 입력이 제공되면, 이 오류는 사라질 것입니다.
-
Bump Offset 머티리얼 표현식을 모든 텍스처의 UV 입력에 연결했으면, 이제 작동되도록 구성을 해 줘야 합니다. 먼저 해 줘야 할 작업은, Height 입력을 줘야 합니다. 그러기 위해 베이스 컬러 입력에 사용한 텍스처 T_Brick_Clay_New_D 를 마우스로 선택하고 CTRL + W 키를 눌러 복제합니다. 노드가 복제되면 Bump Offset 앞쪽으로 오도록 이동시킨 다음 텍스처의 Alpha 출력을 Bump Offset 머티리얼 표현식의 Height 입력에 연결합니다. 완료되면 다음과 같은 모습일 것입니다.
-
이제 흔히 UV 스위밍이라 불리는 현상을 겪지 않기 위한 Bump Offset 머티리얼 표현식에 설정을 해 줘야 합니다. Bump Offset 머티리얼 표현식 세팅을 조절하려면, 머티리얼 그래프의 Bump Offset 머티리얼 표현식을 왼쪽 마우스 버튼 으로 클릭하여 선택한 다음 디테일 패널에서 Height Ratio 를 0.005 로 설정합니다. 완료되면 다음과 같은 모습일 것입니다.
![BumpOffset_Setting_Up_BO_Node.png]()
-
Height Ratio 가 설정되면, 적용 버튼을 눌러 머티리얼을 컴파일하도록 해 줍시다. 머티리얼 컴파일이 완료되면 게임에서 사용할 수 있습니다.
새로 만든 머티리얼을 실제로 사용한 예제입니다.
![BumpOffset_Setting_Results.png]()
결론
Bump Offset 머티리얼 표현식을 사용하면 별도의 3D 지오메트리를 추가하지 않고도 저렴하게 머티리얼에 추가적인 깊이감을 낼 수 있는 매우 효율적인 방법입니다. 하지만 Bump Offset 머티리얼 표현식이 깊이감을 내는 것은 착시 효과일 뿐이므로, 플레이어나 사용자가 Bump Offset 이펙트가 적용된 표면과 평행으로 카메라를 움직이는 상황에서는 이러한 효과가 깨지거나 작동하지 않을 수 있다는 점 염두에 두시기 바랍니다.