# Part 08 | UV를 다루는 방법을 배워봅시다

## 01 UV의 기본 개념

![](https://velog.velcdn.com/images/biomatrix117/post/85f605c5-9ad1-4d6e-a6a0-58ddfa6e4bab/image.png)

UV의 원리 : 3D로 이루어진 오브젝트에 2D 그림을 입히기 위해 벗겨내어 펼쳐 놓은 것과 비슷한 느낌

UV는 2차원 좌표다. UV 배치는 엔진이나 툴마다 다르다. 언리얼, DirectX는 왼쪽 위가 Vector2 (0,0)이고, 유니티, OpenGL은 왼쪽 아래가 (0,0)이다.

텍스처에 좌표 할당해주는 거라고 생각하면 될듯.

## 02 UV를 시각적으로 해석해 보도록 합시다

![](https://velog.velcdn.com/images/biomatrix117/post/8a171b6d-9b9b-4adc-8637-4b7fe4d5c1c8/image.png)

UV 노드의 색은 좌측 하단은 (0,0,0) 우측 하단은 (1,0,0) 좌측 상단은 (0,1,0) 우측 상단은 (1,1,0) 을 시각적으로 나타낸 것

## 03 UV에 숫자를 더해 봅시다

![](https://velog.velcdn.com/images/biomatrix117/post/711b122c-eed5-44ba-8e8e-7c221ec6e8f8/image.png)

U와 V에 각각 0.3을 더해주고 적용시키면 텍스처가 왼쪽 아래로 살짝 내려온다.

단색이나 줄무늬로 나온다면 텍스처의 Filter 옵션이 Repeat나 Clamp여서 그런 것.

텍스처 필터 옵션

* Repeat : UV 이동시켜도 계속 연결되어 보임
* Mirror : 좌우 반전되면서 반복
* Mirror Once : 한 번만 좌우 반복
* Per-axis : U방향과 V방향에 다른 옵션 선택
* Clamp : 마지막 픽셀의 색이 연속되어 늘어남

## 04 UV에 숫자를 곱해 봅시다

![](https://velog.velcdn.com/images/biomatrix117/post/0af7e736-3aa0-4a07-a601-64ae5e00b665/image.png)

(0,0)에는 무슨 숫자를 곱해도 0이니 변화가 없을 거고, (1,1)인 부분에 2를 곱하면 (2,2)가 될 것이다.

덧셈은 이동(Offset), 곱셈은 타일링(Tiling)이다.

Tiling And Offset이라는 노드도 있다.

## 05 Time으로 UV가 흘러가게 해 봅시다

![](https://velog.velcdn.com/images/biomatrix117/post/e3b2e845-e7d8-4027-b900-91efde075d88/image.png)

Add에 매개변수에 Time을 넣어주면 텍스처가 흘러간다. 반대로 흘거가게 하고 싶으면 Time 노드에 Negate 노드(-1 곱함)를 붙이면 된다.

이를 이용하여 물이 흘러가는 효과를 줄 수 있다.

UV에 Time을 더하면 이동하지만, 곱하면 아무것도 보이지 않는다. Time의 숫자는 유니티가 커질 때부터 지금까지의 시간이므로 그 숫자가 매우 커질 수 있기 때문이다.

## 06 UV를 이용해서 불 이펙트를 만들어 보도록 합시다

불 이펙트를 만드는 방법에는 3가지가 있다

* 파티클 : 파티클 많이 사용하면 매우 자연스러운 불 만들 수 있지만 저사양 기기에서 부하 초래
* 시퀀스 이미지 : 여러 장의 불 애니메이션 이미지를 반복해서 Plane에 플레이
* 셰이더

알파 채널을 가진 불 이미지를 준비한다.

Unlit 셰이더로 만들어서 어두운 곳에서도 빛나고, 빛이 있다고 해도 더 밝아지는 일이 없게 한다. (Unlit은 불 같은 이펙트에는 매우 많이 사용되는 옵션이고, 빛 연산이 없어서 가볍다)

Graph Inspector > Graph Settings > Surface Type > Transparent로 바꿔서 알파 채널을 넣을 수 있게 한다.

Blending Mode: Transparent가 활성화되면 나오는 선택 모드

* Additive : 배경과 덧셈이 되면서 밝아짐

Render Face : 앞면과 뒷면 중 어떤 면에 렌더링 될지 결정하는 기능. 이펙트는 대부분 Both.

![](https://velog.velcdn.com/images/biomatrix117/post/a9484535-65cb-4243-b924-cb64c523ee27/image.png)

불이 위로 흘러간다. (실수했던 점 : Combine 안 하고 Add만 해서 UV에 Float 숫자 하나가 더해지기만 함)

![](https://velog.velcdn.com/images/biomatrix117/post/a2f08541-cb37-4f57-88eb-63375a28dca5/image.png)

위로 움직이는 불 텍스처와 그냥 모닥불 이미지의 RGBA값을 곱한 결과를 Base Color에 넣어주고, 알파 채널만 따로 곱해준 결과를 Alpha 채널에 넣어주면 불 이펙트가 만들어진다.

퀄리티가 높은 건 아니지만, 멀리서 보이는 작은 불 등에 사용하기 괜찮다. 이 방법은 흐르는 물, 폭포, 동그랗게 퍼져나가면서 점점 사라지는 플라즈마 이펙트 등에도 사용할 수 있다.

![](https://velog.velcdn.com/images/biomatrix117/post/3a3898a3-fc24-4f00-aabd-ac724a314012/image.png)

Float를 곱해서 포스트 프로세스 Bloom 효과를 이용할 수도 있다 Global Volume > Tone Mapping > ACES : 좀 더 필름같은 강렬한 느낌

## 07 좀 더 멋진 방법으로 불을 만들어 봅시다

![](https://velog.velcdn.com/images/biomatrix117/post/b3bab169-999c-4b29-b660-3258eccbaeb4/image.png)

검은 텍스처의 R 채널은 전부 0이다. UV에 0을 더해주면 아무 일도 발생하지 않는다.

![](https://velog.velcdn.com/images/biomatrix117/post/ce985ea1-af65-473d-9deb-bd760193d964/image.png)

회색을 UV에 더해주면 0.5만큼 움직인 느낌이 아니다. 텍스처는 sRGB 상태이지만 우리가 원하는 건 '회색'을 원하는게 아니라 '0.5'라는 데이터를 출력하길 원하므로, Linear 텍스처로 만들어줘야 한다.

텍스처를 선택하고 Inspector에서 sRGB (Color Texture) 토글을 해제해야 한다.

![](https://velog.velcdn.com/images/biomatrix117/post/be62cd29-a7b2-4cfd-805c-f40152b5f6c7/image.png)

가운데가 밝은 이미지를 넣으면 가운데가 이동한다. 이미지의 밝기에 따라 이동하는 것이 다르다는 것을 알 수 있다. (역시 sRGB를 꺼줘야 제대로 된다)

![](https://velog.velcdn.com/images/biomatrix117/post/f0b5a042-b14a-4f94-82d4-3f6bde1390c1/image.png)

노이즈를 넣으면 더 구겨진다

![](https://velog.velcdn.com/images/biomatrix117/post/8460ed35-4f40-45a2-a611-e1f8de2d9316/image.png)

노이즈의 UV에 Time을 더해서 흐르듯 변화하는 노이즈를 만들 수 있다 checker만 불 이미지로 바꾸면 일렁이는 불을 만들 수 있다 (노이즈를 위로만 흘러가게 하면 더 자연스러워진다)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lazyartisan.gitbook.io/note/main-page/books/urp/part-08-or-uv.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.