1. UV
- 3차원 오브젝트에 텍스쳐를 입히기 위한 기준이 되는 2차원 좌표계
- float2로 이루어진 숫자이고, 범위는 0~1 (어떤 크기의 이미지라도 이미지의 가로세로 100%의 비율을 나타내기 위해)
- 1을 넘거나 0미만일 경우 텍스쳐가 반복
- 유니티에서는 좌측하단이 float2(0, 0)
- UV = XY = RG
2. UV의 시각적 확인
1.
uv_MainTex는 MainTex의 UVstruct Input //외부 인터페이스가 아닌, 유니티 내부로부터 받는 데이터를 선언하는 곳 { float2 uv_MainTex; };
2.
In.uv_Maintex.x는 U,In.uv_Maintex.y는 Vfixed4 c = tex2D (_MainTex, IN.uv_MainTex);
- UV를 시각적으로 확인하기 위해 Emission에 UV를 넣기
void surf (Input IN, inout SurfaceOutputStandard o)
{
fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
o.Emission = float3(IN.uv_MainTex.x, IN.uv_MainTex.y, 0);
//빛의 영향을 배제한 순수한 결과만을 보기 위해 Albedo대신 Emission 사용
o.Alpha = c.a;
}- 0~1로 변하는 U가 Red로, V는 Green으로 표현된 모습이 그라데이션으로 확인
3. UV 연산
- UV에 숫자를 더하면 모든 vertex에 있는 UV값이 증가하므로 텍스쳐가 이동한다.
fixed4 c = tex2D (_MainTex, IN.uv_MainTex + 0.5);
- ex) 1을 더하면 한 사이클이 이동해서 제자리로 온 것처럼 보인다.
4. UV 연산 응용 (Time)
- 유니티 내장 변수
_Time을 사용해 UV가 자동으로 흘러가게 할 수 있다.
fixed4 c = tex2D (_MainTex, IN.uv_MainTex + _Time.y);
//x, y에 동시에 더해줬기 때문에 좌측 아래로 흘러간다.
- 그림처럼 물이 흐르는 형태의 텍스쳐를 사용하면 특정 방향으로 물이 흘러가는 것처럼 사용할 수 있다.
+) 시간 관련 변수 🔻
이름 타입 값 _TIme float4 씬이 열린 다음부터의 시간, (x, y, z, w)는 (t/20, t, t2, t3)에 대응 _SinTIme float4 sin 그래프의 시간, (x, y, z, w)는 (t/8, t/4, t/2, t)에 대응 _CosTIme float4 cos 그래프의 시간, (x, y, z, w)는 (t/8, t/4, t/2, t)에 대응 unity_DeltaTIme float4 델타 타임(지금 프레임과 이전 프레임의 시간차이), (x, y, z, w)는 (dt, 1/dt, smoothDt, 1/smoothDt)에 대응
5. 불 이펙트
- 불 이펙트를 만드는 방법
- 파티클 사용
- 시퀀스 이미지 사용
- 쉐이더 사용
* 1, 2번을 혼용해 사용하는 것이 일반적이고, 3번은 실무에 적용하기는 어렵다. 하지만 쉐이더를 배우는 과정이기 때문에 3번으로 배워볼 것이다!
-
Quad에 불 이미지를 텍스쳐로 적용, 아직 어색하다.
-
불 이미지가 조명의 영향을 받지 않도록
Albedo를Emission으로 수정
o.Emission = c.rgb;- 배경이 투명해지도록 코드를 수정한다 (알파 채널은 무거운 연산 중 하나로, 우선은 임시로 작동하도록 수정.)
//1. Tags { "RenderType"="Opaque" }를 아래와 같이 수정
Tags { "RenderType"="Transparent" "Queue"="Transparent" }
//2. #pragma surface surf Standard fullforwardshadows 를 아래와 같이 수정
#pragma surface surf Standard alpha:fade
- 또 다른 텍스쳐를 한 장 추가하고 위로 흘러가게 만들기
- 추가할 이미지 🔽
- 추가할 이미지 🔽
fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
//두번째 텍스쳐가 위로 흘러가도록
fixed4 d = tex2D(_MainTex2, float2(IN.uv_MainTex2.x, IN.uv_MainTex2.y-_Time.y));
//두 이미지 합치기
o.Emission = c.rgb * d.rgb;
o.Alpha = c.a * d.a;
* 위에서 언급하였듯, 현재 코드는 매우 무거운 stadard 라이팅이 돌아가고 있으며, 뒤의 이미지와 겹쳐도 밝아지지 않는 불완전한 이펙트이다.
6. 불 이펙트 업그레이드
-
위의 방법과 다르게, 두번째 텍스쳐를 검정색 이미지로 적용한다.
-
확실한 효과를 보기 위해 첫번째 텍스쳐도 체크무늬로 바꿔준다.(임시)
-
코드 수정 (c에 d연산이 들어가기 때문에 d의 순서가 바뀐다.)
-
d 텍스쳐 중 r채널만 가져와서 c의 uv에 더해주기
fixed4 c = tex2D(_MainTex, IN.uv_MainTex + d.r);- d는 float4(0, 0, 0, 1)이므로 d.r은 0이다. 아무런 변화가 없다.
- 하지만, 만약 d의 텍스쳐가 검은색이 아니라면 c의 텍스쳐 이미지가 이동할 것이다.
❗그렇다면... 아래와 같은 이미지를 넣으면 어떻게 될까?
- 텍스쳐의 가운데 부분만 이동한다!
➕ 노이즈 이미지를 넣으면 상당히 구겨지는 모습을 볼 수 있다.
- 이미지를 흐르면서 구겨지게 만들기 (위의 노이즈 이미지를 사용한다.)
fixed4 d = tex2D(_MainTex2, float2(IN.uv_MainTex2.x, IN.uv_MainTex2.y-_Time.y));
- 마지막으로, c 이미지를 기존의 불 이미지로 바꾸면 완성이다.🔥
( •̀ .̫ •́ )✧