[GLSL] Zoom Effect

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

 

---

의도치않게 밀리고 밀린 GLSL 시리즈... HLSL을 공부하느라 밀렸다는 것도 약간 아이러니하다 

흥미로운 TD 튜토리얼 영상을 찾아서 그걸 공부해보기전에 TDSW GLSL 시리즈를 끝내고 싶어서 다시 시작했다. 

GLSL와 크게 관련 없는 부분은 길게 설명해두지 않았으니 가급적 원본 동영상도 시청하길 권장한다!

Zoom Effect  : UV

이번 시간에 만들어볼 것은 이미지가 zomm in-out 되는 간단한 이펙트다!

우선 이미지를 한 장 준비해서 Index 0로 GLSL top에 연결해준다. 

참고로 무료 버전에서 지원하는 비율보다 커서 발생하는 에러이므로 신경쓰지 않아도 된다.

 

v.UV를 변수로 대체해서 진행해보자. 이 때 sTD2DInputs[0] 텍스쳐와 같이 쓰게되는데, 이것은 TD에 내장되어있는 텍스쳐 관련 함수다. 

우선 확대 이미지를 만들기 위해서 2를 곱해보자. 그러면 어리석은 생각이었다는걸 바로 알 수 있다.

 

 

 왜 이렇게 변하는지 알아보기 위해 uv를 체크해보면 

(좌) vUv.st (우) vUv.st * 2

 

차이점이 확실하게 느껴진다.

 

(좌)는 지난 시간에 배웠던 uv 좌표값을 충족하고 있지만 (우)의 경우 0 to 1이 아니라 0 to 2가 된다.

따라서 실제로 (우)의 uv 좌표에서는 0 to 1이 차지하는 공간이 여기에만 해당하기 때문에 이미지가 일부만 보이는 결과가 오게되는 것

 

수치로 설명하자면 이렇게 된다는 뜻!

 

 

Zoom Effect  : Animation 

 

하지만 해당 프로젝트에서는 *2를 한 상태로 진행해주기 때문에 아무것도 해주지 않으면 (0,0) - (1,1) 까지만 이미지가 출력이 된다.

따라서 (1,1) 밖의 영역까지 수행될 일을 우리가 지정해줘야하는데, Extend UV Mode에서 Zero외의 옵션을 원하는대로 선택하면 된다. 

 

자, 중요한건 애니메이션이다! 

// Example Pixel Shader

 uniform float uRepeat;

out vec4 fragColor;

void main()
{
	vec2 p = vUV.st;
	p -= vec2(0.5);
	p *= uRepeat;
	p *= vec2(0.5);

	vec4 color = texture(sTD2DInputs[0], p);
	//vec4 color = vec4(vUV.st, .0, 1.);
	fragColor = TDOutputSwizzle(color);
}

 

기존  *2 연산은 코딩으로 진행하였기에 TD 에디터내에서 편집하기 위해 float 변수를 추가해주었다.

이 경우 Load 버튼을 누르면 보통 자동으로 Vector 0에 입력이 되는데, 만약 되지 않는다면 직접 변수명을 입력해주어야한다. 

그리고 기준점을 조절해주기 위해 p에 추가 작성을 해주면 우리가 만드려고 했던 결과물이 만들어진다. 

 

결과물

 

 

 

 

참고자료

https://youtu.be/CQNEQr6eUVk?si=sGGIG7ifgTBj60VB