언리얼 HLSL을 이용한 Custom Shader 제작 (1/2)

이번 시간에는 HLSL(High Level Shading Language)을 이용해 언리얼의 Custom Shader를 제작하는 방법을 알아보겠습니다.

 

Shader

Shader라는 용어가 조금 생소할 수 있기 때문에 먼저 Shader가 무슨 뜻인지 알아보겠습니다.

Shader는 직역하면 음영을 주는 것인데 실제로는 GPU를 이용해 병렬처리를 하는 것으로 많이 쓰입니다.

 

처음 Shader Programming을 배울 때 제일 어려웠던 부분이 바로 이 용어와 기능이 매치가 안된 점이었습니다.

Shader Programming이라고 하면 뭔가 물체의 음영을 줘서 색깔을 칠하거나 재질을 다루는 코드를 작성해야할 거 같은데 정작 하는 것은 Mesh의 각 정점별로, 각 픽셀별로 돌아가는 병렬 프로그래밍이었기 때문입니다.

정점별로 돌아가는 함수를 Vertex Shader, 픽셀별로 돌아가는 함수를 Pixel Shader라고 합니다.

나중에 OpenGL과 GLSL(OpenGL Shading Language)을 이용해 Shader Programming을 하고 나서야 왜 Shader라고 불리는지 알게 되었습니다.

정점별로, 픽셀별로 돌아가는 코드에서 주로 하는 것이 바로 Light에 따른 음영을 주는 작업이기 때문입니다. (음영을 주는 작업 외에 다른 작업도 하긴 합니다.)

HLSL은 Shader Programming을 할 때 사용하는 언어입니다.

 

Shader Programming

Unreal에서는 Shader Programming을 할 수 있습니다.

하지만 보통 바로 Vertex Shader나 Pixel Shader를 다루지는 않습니다.

대신 조금 추상화된 듯하지만 직관적인 Material을 이용해 Shader를 다룹니다.

Material을 만들면 해당 Material을 위한 Shader 코드가 내부적으로 생성되는 듯 합니다.

이로써 프로그래머 뿐만 아니라 아티스트나 기획자도 Shader Program을 간편하게 다룰 수 있게 됩니다.

 

Material

Material이란 직역하면 재질로 유리나 나무 등 물체 고유의 특성을 의미합니다.

각 물체마다 Material을 지정할 수 있고 물체에 지정된 Material을 수정하면 물체의 재질이 바뀌어서 물체의 색이 바뀌게 됩니다. 뿐만 아니라 Material을 이용하면 화면 전체에 효과를 주는 Post Processing을 구현할 수 있습니다.

 

Material Editor

Material을 만들 때 보통 Material Editor를 이용합니다.

Material Editor는 Blueprint처럼 마우스를 이용해 Node를 생성하고 연결해서 재질의 특성을 결정하는 툴입니다.

이 재질의 Base Color는 무슨 색인지, 금속 재질인지, 거칠기는 어느 정도인지 등의 정보를 Node를 이용해 결정할 수 있습니다.

 

Custom Node

Material Editor에서 생성할 수 있는 Node 중에 한 가지 입니다.

직접 HLSL 코드를 작성할 수 있는 환경을 제공합니다.

 

사실 Custom Node를 사용하지 않아도 대부분 원하는 Material을 생성할 수 있습니다.

하지만 직접 코드 컨트롤이 필요한 부분에서는 Custom Node를 사용하는 것이 좋습니다.

예를 들어 Gaussian Blur를 이용할 때는 근처의 픽셀을 가져와야 합니다.

하지만 Material Editor에서는 반복문을 제공하지 않아 일일히 가져 오는 식으로 구현해야 하는데 Custom Node를 이용해 직접 HLSL 코드를 작성하면 쉽게 구현할 수 있습니다.

 

앞으로 예제에서는 Material을 이용해 Post Processing을 구현하는 것을 설명 드리겠습니다.

2가지 예제를 보여드릴텐데 첫 번째는 Code Snippet을 이용해 Desaturate를 하는 것이고

두 번째는 새로운 소스코드를 이용해 Gaussian Blur를 하는 것입니다.

예제들은 아래 링크를 참조했습니다.

https://www.raywenderlich.com/57-unreal-engine-4-custom-shaders-tutorial

 

Code Snippet 이용해 Desaturate

먼저 결과 이미지 보여드리겠습니다.

원본 이미지

 

Desature 이미지

Unreal에서 Post Processing을 구현할 때는 크게 2가지 일만 하면 됩니다.

Scene에 Post Process를 적용할 공간 및 적용할 Post Process 종류를 설정할 Actor를 만드는 것과

Post Processing 효과를 직접 구현하는 것입니다.

 

첫 번째, Scene에 Post Process를 적용하는 공간을 설정하는 것은 Post Process Volume을 이용합니다.

위와 같이 Modes->Volumes->Post Process Volume을 찾을 수 있습니다.

씬에 드래그 앤 드롭을 하면 Actor가 생성됩니다.

생성된 Actor를 클릭해 몇 개 설정을 수정해야 합니다.

위 이미지처럼 Details 패널에 Rendering Features 부분에서 Array에 Plus 마크를 클릭하고 Asset Reference를 클릭하면 Material을 직접 지정할 수 있는 공간이 생깁니다. 이곳에 이따가 생성할 Material을 넣으면 됩니다.

다음으로 Post Process가 적용될 공간을 설정해야 합니다. 위 이미지처럼 Infinite Extent를 체크하면 모든 공간에서 적용되는 Post Process를 만들 수 있습니다.

 

다음은 Material을 만들 차례입니다.

Content Browser에서 마우스 오른쪽 버튼을 누르고 Material을 선택해서 만들 수 있습니다.

만들어진 Material을 오른쪽 버튼으로 클릭하면 이름을 변경할 수 있습니다.

이제 만들어진 Material을 더블 클릭하여 Material Editor를 열어봅시다.

Material Editor

Material을 만들고 가장 먼저 해야할 일은 Material Domain을 바꾸는 것입니다.

Material은 기본적으로 Surface로 설정됩니다.

하지만 우리는 Post Process를 만드는 것이 목표이므로 Material Domain을 Post Process로 바꿉니다.

바꾸면 원래 있던 Node가 바뀌고 Emissive Color 핀만 남게 됩니다.

Desaturate를 구현하는 과정은 매우 간단합니다. 위 이미지처럼 2개의 Node만 추가하면 됩니다.

하나는 SceneTexture이고 다른 하나는 Custom Node입니다.

왼쪽 SceneTexture Node는 Scene의 Rendering 결과를 받아올 Node이고 중간 Node인 Custom Node는 받아온 이미지에 추가적인 연산을 처리할 Node입니다. 

원래 Post Process란 것 자체가 Rendering을 끝낸 후 추가적으로 효과를 주는 것이라서 Post Process를 구현하려면 Rendering이 끝난 이미지를 가져올 필요가 있습니다.

SceneTexture Node를 먼저 클릭합니다.

Details를 눌러 Scene Texture Id를 Post Process Input0으로 설정합니다.

이제 이 Node는 Rendering이 끝난 Texture를 가져오게 됩니다.

다음은 Custom Node를 생성하고 Details를 클릭합니다.

각 요소들을 설명하면

Code: 여기에 Code Snippet을 작성할 수 있습니다. 이곳에 작성된 Code는 이미 만들어진 HLSL에 코드에 삽입됩니다.

Output Type: Custom Node의 결과 타입입니다.

Description: Node의 이름이 이 값으로 변경됩니다.

InputName: Input Data의 이름입니다. Code 필드에서 Input Data를 사용할 경우 이름을 맞춰야 합니다.

값들을 위 이미지처럼 설정하면 됩니다.

Code 부분만 주의 깊게 보면 되는데 내용은 SceneTexture의 각 Color 값과 (0.3, 0.59, 0.11) 벡터와 내적하는 것입니다.

위와 같이 연산하면 각 픽셀마다 0.3 * R + 0.59 * G + 0.11 * B의 값이 계산되어 저장됩니다.

내적의 결과는 Scalar 값이지만 OutputType을 Float3으로 했으므로 결과 값이 각 채널의 값으로 채워집니다.

Material Editor에서는 마지막으로 각 Node를 연결하면 됩니다.

Material을 저장한 후 Scene으로 돌아가 아까 만들어 두었던 Post Process Volume에 Material을 방금 만든 Material로 설정하면 모두 끝이 납니다.

 

이로써 Code Snippet을 이용해 Desaturate를 구현하는 것을 알아봤습니다.

하지만 위 예제에서 봤듯이 Code를 직접 삽입할 수 있는 필드가 매우 작습니다.

그래서 당연하게도 Unreal에서는 Shader 파일을 따로 만들어서 코드를 작성할 수 있는 방식을 제공합니다.

 

다음 시간에는 Shader 파일을 따로 만들어서 코드를 작성하는 방식과 해당 방식을 이용해 Gaussian Blur Post Process를 구현해 보도록하겠습니다.