[Unity Shader] 전광판 쉐이더 만들기

전광판 쉐이더를 정리한 글을 보았는데, 너무 신기했다.

'쉐이더는 때깔(?)을 이쁘게 할려고 사용한다.' 라고 생각했는데, 무한하게 응용이 가능한 것 같다.

 

제작 방법도 자세하게 설명되어 있어서 바로 따라 만들어 보았다.

 

http://blog.naver.com/plasticbag0/221567167750

유니티 쉐이더를 이용한 LED 전광판 구현일지!

 

 

 

 

우선 만들기 위해 세팅을 했다.

 

1. Quad 오브젝트 추가 (영상 크기에 맞게 늘려줌.)

2. Video Player 컴포넌트 추가 (Video는 겨울왕국 2 예고편을 사용했다. 저번 주에 봤는데 너무 재밌었다. ㅎㅎ)

3. Material, Shader 추가

 

 

 

UV에 타일링 입히기

---

fixed4 frag (v2f i) : SV_Target
{
	fixed4 c = tex2D(_MainTex, floor(i.uv * _Tiling)/_Tiling);
	return c;
}

 

결과 화면

타일링 변수 값 131을 했을 때 (안나, 엘사 미안해...)

영상에 모자이크 효과가 생겼다.

 

 

 

LED 텍스쳐 추가하기

---

fixed4 frag (v2f i) : SV_Target
{
	fixed4 c = tex2D(_MainTex, floor(i.uv * _Tiling)/_Tiling);
	float4 d = tex2D(_LEDTex, i.uv*_Tiling);

	return c * d;
}

 

텍스쳐 만들기

결과 화면

가로로 길어서, 텍스쳐가 좌우로 길어지는 문제가 생긴다.

출처에 있는 블로그에서는 정사각형으로 제작해서 문제 없었음.

 

고쳐보자.

 

우선 Tiling 변수를 X와 Y로 각각 나눠준 뒤, uv에도 X와 Y에 각각 계산했다.

fixed4 frag (v2f i) : SV_Target
{
	float2 UVxy = float2(floor(i.uv.x * _TilingX) / _TilingX, floor(i.uv.y * _TilingY) / _TilingY);
	fixed4 c = tex2D(_MainTex, UVxy);

	float2 LEDxy = float2(i.uv.x * _TilingX, i.uv.y * _TilingY);
	float4 d = tex2D(_LEDTex, LEDxy);

	return c * d;
}

 

결과

Tiling X 값 : 96, Tiling Y 값 : 54 (영상 크기에 비례해서 값을 주어야 함.)

 

 

밝기 추가하기

---

fixed4 frag (v2f i) : SV_Target
{
	float2 UVxy = float2(floor(i.uv.x * _TilingX) / _TilingX, floor(i.uv.y * _TilingY) / _TilingY);
	fixed4 c = tex2D(_MainTex, UVxy);

	float2 LEDxy = float2(i.uv.x * _TilingX, i.uv.y * _TilingY);
	float4 d = tex2D(_LEDTex, LEDxy);

	return c * d * _Brightness; // 이 부분만 수정하면 됨.
}

 

결과 움짤

 

마지막으로 Bloom 효과를 넣고, 맵 간단하게 제작해서 연출해 봄.

걸어다니는 사람들, 건물 위에 전광판 효과

텍스트도 추가했음.

텍스트 UI를 텍스쳐화(?) 시키고 싶었는데, 구글링해도 잘 안 나와서 포토샵으로 텍스트 이미지를 만들었음.

쉐이더에 OffsetX 변수 추가해서 텍스쳐가 흐를 수 있도록 함.

 

 

끝!!