첫 번째 텍스처 그래프 만들기

텍스처 그래프 에디터(Texture Graph Editor) 는 언리얼 엔진에서 절차적으로 텍스처를 생성하기 위한 노드 기반 인터페이스입니다. 이 가이드에서는 커스텀 UV 체커 패턴을 생성하는 텍스처 그래프를 만드는 방법을 안내합니다.

이 그래프를 통해 다양한 타일과 컬러, 그리드 선, 화살표를 커스터마이징할 수 있습니다. 이 그래프를 구성하면서 텍스처 그래프와 관련된 몇 가지 핵심 콘셉트와 워크플로를 살펴봅니다.

첫 번째 그래프를 빌드하기 전에 텍스처 그래프 시작하기 가이드에서 에디터에 대한 개요와 몇 가지 유용한 일반 콘셉트를 검토하면 도움이 됩니다.

플러그인 로드하기

텍스처 그래프 에디터는 실험단계 플러그인으로, 엔진 시작 시 기본적으로 로드되지 않습니다.

플러그인을 활성화하는 단계는 다음과 같습니다.

1. 메뉴 바 에서 편집(Edit) > 플러그인(Plugins) 을 선택합니다.
2. 검색창에 'texture graph' 를 입력합니다.
3. TextureGraph 플러그인을 활성화하고 대화창이 표시되면 예(Yes) 를 선택합니다.
4. 엔진을 재시작합니다.

텍스처 그래프 에셋

새 텍스처 그래프 생성하는 단계는 다음과 같습니다.

1. 콘텐츠 드로어(Content Drawer) 를 열고 추가(Add) > 텍스처(Texture) > 텍스처 그래프(Texture Graph) 를 클릭합니다.
2. 새 에셋 이름을 'TG_UVChecker'로 변경합니다.
3. 에셋을 저장한 다음, 더블클릭하여 에디터를 엽니다.

베이스 체커 타일 빌드하기

패턴 베이스는 2x2 타일이며, 이 타일은 반복 및 편집 가능합니다.

이 가이드에서는 처음부터 패턴을 빌드하면서 일부 워크플로와 사용자 컨트롤을 살펴봅니다.

빠르게 체커 패턴을 빌드해야 한다면, Pattern 노드에 몇 가지 표준 패턴 타입에 대한 옵션이 있습니다.

체커 패턴을 생성하는 단계는 다음과 같습니다.

1. 노드 팔레트의 프로시저럴(Procedural) 섹션으로 이동한 다음 Shape 노드를 그래프에 드래그합니다. 아래쪽 화살표를 클릭하여 노드를 펼쳐 사용할 수 있는 모든 옵션을 확인합니다.
2. 셰이프 타입(ShapeType) 을 직사각형으로 변경합니다.
3. 출력(Output) 핀을 클릭하여 드래그합니다. 선택을 해제하면 노드 팔레트가 열립니다. 목록에서 Transform 을 검색하여 선택합니다. Shape 노드와 Transform 노드가 자동으로 연결됩니다.
   1. 이 방법으로 노드를 생성할 때는 상단 입력 값에 연결이 이루어진다는 점을 명심하세요.
4. Transform 노드를 펼치고 커버리지(Coverage) 를 0.5, 0.5로 조정합니다. 트랜스폼의 커버리지를 조정하면 입력 이미지(이 경우에는 단순 직사각형)가 지정된 값으로 스케일링됩니다. 기본적으로 채우기 컬러는 컬러나 알파 값이 비어 있습니다. 디테일에서 채우기 컬러를 설정할 수 있습니다.
5. Shape 노드에서 두 번째 Transform 노드를 드래그합니다. 두 번째 트랜스폼의 커버리지(Coverage) 를 0.5, 0.5, 오프셋(Offset) 을 0.5, 0.5로 설정합니다. 이제 공간을 덜 차지하도록 Transform 노드를 최소화할 수 있습니다.
6. 그래프 뷰에서 우클릭하고 메뉴에서 Math까지 아래로 스크롤하거나 검색하여 Add 노드를 찾습니다.

7. Transform 노드의 출력 값을 Add 노드의 A 및 B 입력에 연결합니다. 그 결과로 사각형 4개로 이루어진 체커 타일 하나가 빌드됩니다.

   
8. 그래프를 빌드할 때는 그래프를 정리된 상태로 유지하는 것이 중요합니다. 모든 노드를 선택하고 그래프를 우클릭한 다음, New Comment 를 검색하여 선택합니다. 코멘트 박스에는 4개의 노드가 포함되어 있습니다. 코멘트 이름을 'CheckerBlock'으로 지정합니다.

구분선 생성하기

기본 체커 블록을 사용하여 구분선을 오버레이하고 두께와 모서리 반경 값을 제어할 수 있습니다.

구분선을 추가하는 단계는 다음과 같습니다.

1. Shape 노드를 생성하고 셰이프를 직사각형으로 설정하고 너비와 높이를 0.9로 설정합니다.
2. Shape 노드의 출력 핀을 드래그한 다음, Transform 을 검색하여 선택합니다.
3. Transform 노드에서 반복(Repeat) 값을 2.0, 2.0으로 설정합니다.
4. 출력 핀을 드래그한 다음, Invert 를 검색하여 선택합니다. 이 노드에서는 선 마스크에 대한 적절한 값을 제공합니다.

5. Invert 노드에서 범위제한(Clamp) 을 활성화합니다.

   
6. 생성한 선의 기본 구조체를 사용하여 선의 두께 및 모서리 반경을 조정하는 메커니즘을 추가할 수 있습니다. 그래프에서 우클릭한 다음, Scalar 를 검색하여 선택합니다.
7. 노드를 우클릭하고 이름변경(Rename) 을 선택하여 노드 이름을 'Rounded Corners'로 변경합니다. 노드를 Shape 노드의 라운딩(Rounding) 핀에 연결합니다. 값을 0.25로 설정합니다.
8. 이 프로세스를 3번 반복하여 여러 개의 스칼라 노드를 생성하고 노드 이름을 각각 'Linethickness', 'SquareBase', 'LineMult'로 변경합니다.1. LineThickness 노드의 핀을 드래그하고 목록에서 Multiply 를 검색하여 선택합니다.
9. LineMult 노드의 출력을 Multiply 노드의 B 핀에 연결하고 값을 0.1로 설정합니다.
10. SquareBase 핀을 드래그하고 목록에서 Subtract 를 검색하여 선택합니다.
11. Output 노드의 출력을 Subtract 노드의 B 값에 연결합니다.
12. Subtract 노드의 출력 핀을 Shape 노드의 너비(Width) 및 높이(Height) 값에 연결합니다.
13. 모든 노드를 선택하고 노드 주변에 새로운 코멘트 박스를 생성하여 그래프를 정리합니다.

화살표 생성하기

패턴의 방향을 알 수 있도록 각 사각형의 중앙에 화살표를 추가할 수 있습니다.

이 마지막 엘리먼트를 추가하는 단계는 다음과 같습니다.

1. 그래프에서 우클릭한 다음, Shape 를 검색하여 선택합니다. 이 단계를 반복하여 2개의 Shape 노드를 생성합니다.
2. 첫 번째 노드의 셰이프를 트라이앵글(Triangle) 로 설정한 다음, 너비를 0.6으로 설정합니다.
3. 출력 핀을 드래그한 다음, Transform 을 검색하여 선택합니다. 오프셋(Offset) 값을 0.0, 0.05로 설정합니다.
4. 두 번째 Shape 노드를 직사각형(Rectangle) 으로 설정한 다음 너비를 0.1, 높이를 0.4로 설정합니다.
5. 출력 핀을 드래그한 다음, Transform을 검색하여 선택합니다. 오프셋(Offset) 값을 0.0, 0.8로 설정합니다.
6. 그래프에서 우클릭한 다음, Add 를 검색하여 선택합니다. Transform 노드의 출력 핀을 Add 노드에 연결합니다.

7. Add 노드를 선택한 다음, 프리뷰 창에서 자물쇠 아이콘을 클릭합니다. 이 아이콘을 클릭하면 다른 노드를 선택해도 해당 노드로 프리뷰가 잠깁니다. 프리뷰를 잠그면 트랜스폼 값을 편집하고 최종 결과를 확인할 수 있습니다.

   
8. 단일 화살표 셰이프를 사각형 4개로 이루어진 표준 타일 베이스로 변환합니다. 이렇게 변환하려면 Add 노드에서 출력 핀을 드래그한 다음, Transform 을 검색하여 선택합니다.
9. Transform 노드에서 반복(Repeat) 값을 2.0, 2.0으로 설정합니다.
10. 프리뷰의 잠금을 해제하여 다른 노드 프리뷰를 확인합니다.
11. 화살표가 좀 너무 큽니다. 줌(Zoom) 값을 -0.1로 설정하여 반복되는 각 타일의 스케일을 조절합니다. 음수 값이면 줌 아웃되어 화살표가 더 작아집니다.
12. 줌 아웃하면 각 타일 사이에 빈 영역이 노출됩니다. 디테일(Details) 패널에서 채우기 컬러(Fill Color) 값을 클릭하고 A(알파) 값을 1로 설정합니다. 이 컬러는 이미 기본값인 검은색으로 설정되어 있습니다. 이 값을 조정하면 솔리드 마스크가 생성됩니다.
13. 모든 노드를 선택하고 노드 주변에 새로운 코멘트 박스를 생성하여 그래프를 정리합니다.

컴포넌트 연결 및 컬러 추가하기

이제 스케일링 가능한 체커 패턴을 만들 수 있는 핵심 구성 요소가 완성되었습니다. 그리드 선 섹션과 유사하게 컨트롤을 더 추가하여 나중에 사용할 패턴을 조정할 수 있습니다.

1. 가장 중요한 엘리먼트인 체커 컬러부터 시작합니다. 노드 팔레트에서 2개의 Color 노드를 드래그합니다.
2. 각 노드의 이름을 'CheckerColorA'와 'CheckerColorB'로 변경합니다.
3. 디테일(Details) 패널에서 Color 노드를 원하는 체커 컬러로 조정합니다.
4. CheckerColorA 의 출력 핀을 드래그한 다음, Blend 를 검색하여 선택합니다. Blend 노드는 복잡한 블렌드 작업을 위한 다양한 기능을 갖춘 강력한 함수입니다. 이 예시에서는 디폴트 세팅을 유지합니다.
5. CheckerColorB 의 출력 핀을 Blend 노드의 배경(Background) 값에 연결합니다.
6. CheckerBlock에 있는 Add 노드의 출력 핀에서 새 Transform 노드를 드래그합니다.
7. 새 Scalar 노드를 생성하고 이름을 'CheckerRepeat'로 변경합니다.
8. CheckerRepeat 값을 2.0으로 설정합니다.
9. CheckerRepeat 의 출력 핀을 새로 생성한 Transform 노드의 반복(Repeat) 핀에 연결합니다. 하나의 스칼라 입력이 X 및 Y 반복 값에 모두 적용됩니다.

10. Transform 노드의 출력 핀을 Blend 노드의 마스크(Mask) 값에 연결합니다.

    

그리드 선 컬러

그리드 선에 대해 비슷한 워크플로를 반복할 수 있습니다. 이미 선 두께와 라운딩에 대한 컨트롤은 있지만, 선 컬러에 대한 세팅은 없습니다.

1. 새 Color 노드를 생성하고 이름을 'LineColor'로 변경합니다.
2. 디테일(Details) 패널에서 LineColor 노드를 원하는 컬러로 설정합니다.
3. LineColor 노드의 출력 핀을 드래그한 다음, Blend 를 검색하여 선택합니다.
4. 이전 체커 Blend 노드의 출력 핀을 새 Blend 노드의 배경(Background) 입력에 연결합니다.
5. GridLines 코멘트 박스에서 Invert 노드의 출력 핀을 드래그한 다음, Transform 을 검색하여 선택합니다.
6. CheckerRepeat 노드를 새 Transform 노드의 반복(Repeat) 입력에 연결합니다. 출력 핀을 여러 번 사용할 수 있습니다.
7. Transform 노드의 출력 핀을 새 Blend 노드의 마스크(Mask) 입력에 연결합니다.

화살표 컬러

이 프로세스를 반복하여 체커 패턴 위에 화살표를 추가합니다.

1. Color 노드를 생성하고 이름을 'ArrowColor'로 지정합니다.
2. 디테일(Details) 패널에서 ArrowColor 노드를 원하는 컬러로 설정합니다.
3. ArrowColor 노드의 출력 핀을 드래그한 다음, Blend 를 검색하여 선택합니다.
4. 이전 체커 Blend 노드의 출력 핀을 새 Blend 노드의 배경(Background) 입력에 연결합니다.
5. Arrow 코멘트 박스에서 Transform 노드의 출력 핀을 드래그한 다음, Transform 을 검색하여 선택합니다.
6. CheckerRepeat 노드를 새 Transform 노드의 반복(Repeat) 입력에 연결합니다.
7. Transform 노드의 출력 핀을 새 Blend 노드의 마스크(Mask) 입력에 연결합니다.
8. Blend 노드의 출력 핀을 드래그한 다음, Output 을 검색하여 선택합니다. Output 노드의 이름을 'BaseColorOutput'으로 변경합니다.

출력 및 익스포트

Output 노드에는 일반 텍스처 어트리뷰트와 출력 이름, 폴더 경로, 해상도에 대한 세팅이 있습니다.

단일 그래프에 여러 개의 출력을 추가할 수 있습니다. 이 워크플로는 컬러, 러프니스, 노멀 및 메탈릭 맵이 필요한 머티리얼을 위해 더 복잡한 텍스처 세트를 생성할 때 유용합니다.

여러 출력 타입을 구성하는 단계는 다음과 같습니다.

1. GridLines 코멘트 박스에서 Transform 노드의 출력 핀을 드래그한 다음, BrightnessContrast 를 검색하여 선택합니다.
2. 밝기(Brightness)를 0.5로 조정하여 더 평평한 그레이스케일 이미지를 생성합니다.
3. BrightnessContrast 노드의 출력을 드래그하여 새 Output 노드를 생성합니다. 노드 이름을 'RoughnessOutput'으로 변경합니다.
4. 이전 Transform 노드의 출력 핀을 드래그한 다음, NormalFromHeightMap 을 검색하여 선택합니다.
5. NormalFromHeightMap 노드의 출력을 드래그하여 새 Output 노드를 생성합니다. 노드 이름을 'NormalOutput'으로 변경합니다.

6. 각 출력 노드의 출력 이름과 압축 세팅을 조정합니다.

   
7. 메인 메뉴 바에서 익스포트(Export) 를 클릭합니다.

익스포트 창이 열리고 출력할 수 있는 맵으로 출력 노드가 표시됩니다. 필요에 따라 이러한 노드를 선택하거나 선택 해제하여 하나 또는 모든 맵을 반복작업할 수 있습니다. 창에서 익스포트 를 클릭하여 새 텍스처 맵을 생성합니다.

기존 텍스처의 기본 편집부터 새로운 텍스처 생성, 패킹, 아틀라싱, 블루프린트와의 결합에 이르기까지 다양한 텍스처 워크플로에 텍스처 그래프 에디터를 사용할 수 있습니다. 텍스처 그래프를 파이프라인 유틸리티로 사용하여 일반 프로세스를 지원할 수 있습니다.