주요 작업 내용

목차 탭으로 원하는 목차를 클릭하면 바로 이동이 됩니다.

작업 기간 : 2 ~ 3 달

개발 인원 : 1명

 

자세한 작업 내역은 마지막 목차인 작업 정리에서 볼 수 있다.

1. 모델링 추출

캐릭터

모델링을 추출하기 위해 여러 방법을 시도해보며 사용할 수 있는 방법을 모색했다.

방법1 과 방법2, 방법 3이 있는데 최종적으로 채택된 방법은 3번이다.

자세한 작업 내용은 맨아래 목차인 작업 정리의 링크에서 확인할 수 있다.

(다만, 코드적인 내용은 없고 추출 과정에서 프로그램들을 어떻게 사용해야 정상적으로 사용할 수 있는 모델링을 추출할 수 있는지에 대한 실험 내용들이기 때문에 프로그래밍과는 관련이 없다.)

https://dog-birch-9d7.notion.site/de02b821dbde4753a63ceaacf43802d8?pvs=4

모델링 | Notion

 

 

 

맵

먼저 사용할 수 있는 모델링을 탐색했으나 쉽사리 나오지 않았다.

결국 에셋 스토어에서 구매를 진행했고 FBX를 로딩하는 과정에서 문제가 생겼지만 이를 해결하고 적용하였다.

이 문제는 [FBX - 한 정점의 여러 개 UV 처리] 목차에서 설명한다.

 

[사용 에셋]

https://assetstore.unity.com/packages/templates/packs/auto-chess-159545#content

Auto Chess | 패키지 | Unity Asset Store

Material Mapping 정보 

Blender에서는 Mapping 정보를 통해 알아서 텍스처를 위치시켜서 정상 출력을 하지만
내 프로젝트에서는 그런 작업이 없기 때문에 아래와 같이 텍스쳐가 Mapping 되는 것을 볼 수 있다.

Blender Mapping 정보

TFT Project

이 문제를 해결하기 위해 아래의 작업을 수행했다.

1. Inspector를 이용해서 Material 의 Mapping 정보를 수정한다.

2. HLSL 코드에서 Mapping 정보를 토대로 UV를 계산한다.

 

이 작업을 수행한 뒤는 아래와 같이 정상 출력되는 것을 확인할 수 있었다.

1. Inspector를 이용해서 Material 의 Mapping 정보를 수정한다.

먼저 Mapping 정보를 담을 struct를 생성한다.

Mapping Data Struct

이러한 정보는 Material 객체가 소유한다.

ImGUI 코드를 이용해서 Material Mapping 수치를 조절할 수 있게 했다.

Use UVMapping Setting 체크박스를 체크하면 Mapping 수치를 조절할 수 있는 UI가 생긴다.

이 UI들에 수치를 입력한 뒤 Save Material 을 누르면 정보가 저장된다.

2. HLSL 코드에서 Mapping 정보를 토대로 UV를 계산한다.

렌더링 파이프 라인에 Mapping 정보를 전달하기 위해 Client 용 구조체와 파이프라인 구조의 내용을 추가한다.

Client

value.fx

이 정보를 이용하여 Pixel Shader 단계에서 UV를 계산한다.

 

FBX

자세한 작업 일지는 아래 링크에서 볼 수 있다.

https://dog-birch-9d7.notion.site/FBX-ed86e5bf3b84467db18161f58782058e?pvs=4

FBX | Notion

1. FBX : Mesh : Material = 1 : N : M (1 <= N <= M )

기존 코드는  FBX 에서 읽은 모델링 정보를 MeshData 객체로 만드는데 ,1Mesh M Material 을 들고 있는 구조로 짜여 있었다.

이 MeshData를 이용해서 Instantiate 함수를 호출하면 해당 Mesh를 생성할 수 있는데, 

이렇게 사용하면 코드에서 각자 생성 후 특정 오브젝트에 함께 소속시켜줘야 한다.

나는 MeshData 가  정보를  N Mesh M Material 와 같이 들고 있고 Instantiate를 호출하면 모든 Mesh정보를 특정 오브젝트 아래에 소속된 후 부모 오브젝트가 반환되게 하고 싶었고 그렇게 구조를 변경했다.

이를 위해서는 FBX와 MeshData의 구현된 코드를 분석하여 구조를 변경하였다.

 

2. 한 정점이 여러개의 UV 좌표를 처리

기존의 코드 1개의 정점당 1개의 UV를 가지고 모델링의 Texture를 Mapping 했다.

그게 가능했던 이유는 이미지가 끊긴 곳 없이 모두 연결된 아래와 같은 형태였기 때문이다.

하지만 지형 모델링을 Load 하는 과정에서 Texture가 Mapping이 되지 않는 것을 확인할 수 있었는데
이유는 Blender는 어떻게 Mapping 하는지를 봄으로써 짐작할 수 있었다. 

아래의 사진을 보면 정점 1개에 2개의 UV 좌표가 존재한다는 것을 확인할 수 있다.

Blender Mapping

따라서 FBX 코드를 분석하여 여러개의 정점을 처리할 수 있도록 처리 했다.

먼저 단일 UV와 복수 UV의 경우를 다르게 처리하기 위해 제약을 걸었는데,

FBX 파일명의 앞에 MU 가 붙어 있어야 복수 UV 처리를 하게 했다.

2. 애니메이션

블랜딩

Matrix로 만드는 과정을 Compute Shader에서 함으로써 HLSL에서 알파 블랜딩을 할 수 있게 했다.

애니메이션 교체 명령이 들어오면 Transition이 들고 있는 Blend Time 만큼 멈추고 보간을 진행합니다.

컴퓨트 쉐이더에 현재 애니메이션 정보와 다음 애니메이션 정보, 그리고 Blend Time의 Ratio 정보를 넘깁니다.

이러한 정보를 토대로 HLSL 에서 보간값을 적용하여 최종 Matrix를 만듭니다.

 

Frame Event

Animation Tool Code Ver

코드적으로 동작할 수 있게 구조를 짜서 사용했다.

Animation Tool Edit Ver

Animation Controller 정보를 코드로 사용하다가 Editor ImGui를 만들었다.

https://github.com/thedmd/imgui-node-editor/tree/docking

GitHub - thedmd/imgui-node-editor: Node Editor built using Dear ImGui

이 작업에서 가장 주된 작업은
1.Node Editor는 Git에 다른 사람이 구현해둔 것을 분석해서 필요한 부분을 이식하는 작업.

2. Param 과 Inspector 창을 띄우기

3.Editor 기능과 내 프로젝트에 Code적으로 구현된 Controller 시스템을 연결.

3. Mouse

Mouse Cursor

3D

특정 지점의 평면을 제공하여 평면의 방정식을 이용 클릭한 곳에 Cursor가 생성되도록 했다.

2D

UI Camera는 OrthoGraphic 설정이 되어 있다.

2D Cursor는 UI Cam 의 View Space로 위치 정보를 잡아주어야 한다.

Mouse Manager

Mouse 입력 정보를 설정 후 특정 상태에 특정 Event를 뿌립니다.

Mouse Event

Mouse Manager에서 Mouse Event를 감지해서 특정 Component , Script의 Event를 호출합니다.

4. UI

Button , Image , Text 

Text

글자를 출력한다.

Image

Mtrl의 이미지와 Color를 교체한다.

Button

유니티를 보면 Button 생성 시 Image ,Button Component를 가지고 있으며 자식으로는 Text를 소유하고 있다.

내 프로젝트도 이런 구조로 Button을 생성할 수 있게 Prefab화 시켰다.

Button Event

GameObject가 가진 외부 공개 함수 목록을 통해 Inspector에서 Button Event를 지정할 수 있다.

코드는 ImGUI를 이용한 ui 코드이다.

 

람다를 이용해서 void 함수 포인터에 함수를 넣을 수 있도록 했다.

이렇게 함으로써 Button 에서는 이벤트 발생 시 m_FuncPtr()만 호출해주면 된다.

Gauge

Gauge Type1

Gauge Type2

두가지 Type의 Gauge를 HLSL 를 사용해서 변화할 수 있도록 구현했다.

Billboard

항상 카메라를 보는 Rect Mesh가 필요했다.

 

1.Point Mesh를 받아온다. (VS)

2.Point Mesh를 ViewSpace Pos 로 변환 후 그것을 중점으로 한 네개의 점을 구한다.(GS)

3.네개의 점을 통해 삼각형 2개로 사각형을 만든 정보를 PS에 전달한다.(GS)

4.전달 받은 GS_OUT 정보로 출력한다.

 

이러한 정보는 Pixel Shader에서 받아서 사각형을 출력한다.

결과

 

작업 정리

https://dog-birch-9d7.notion.site/TFT-b7ed93f470e74ecf8368bc95da9d6ce4?pvs=4

TFT 작업 정리 | Notion