[GLSL] Mosaic Effect

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

 

---

 

오늘 공부 내용

 

모자이크 효과  : UV 조정하기 

모자이크 효과는 결국 uv의 해상도를 조절하여 만드는 것이다. 

	vec2 p = vUV.st; 
	float d = 10;
	p.x = floor(p.x * d);
	vec4 color = texture(sTD2DInputs[0], p);
	//vec4 color = vec4(1.0);
	fragColor = TDOutputSwizzle(color);

초록색 영역은 0이기에 혼자 다른 색상을 가지는 것

 

p.x에 d로 분할을 추가해주면 Topto에서 계단 현상을 보이는 것을 확인할 수 있다. 

 

p.x만 적용한 경우

p.y까지 추가해준 경우. 모자이크 효과같다

모자이크 효과  : 해상도 조정하기 

위 모자이크 효과를 만들면, 하나 신경쓰이는게 있다. 바로 빈 픽셀이 발생한다는 점. uv를 이동하는 과정에서 발생하는 것이다.

해당 모자이크 효과를 만드는데 floor() 를 사용했는데, ceil()로도 사용할 수 있다. 둘이 결과값이 조금 다르다. 

floor()

 

ceil()

 

즉, 결과적으로 주어진 화면에서 픽셀을 빠뜨리지 않기 위해서는 중간값이 필요하다.

p.x = (floor(p.x * d) /d + ceil(p.x * d) / d) / 2;

 

우리가 따로 만든 변수 d로 모자이크의 세기를 조절할 수 있기 때문에, 편하게 조정하기 위해서 파라미터로 빼주는게 편하겠다. 

파라미터 만들기 

uniform float uAmount;

out vec4 fragColor;
void main()
{
	
	vec2 p = vUV.st; 
	float d = uAmount;
    
    ....
    
 }

 

 

 

 

 

최종 결과물 

 

 

 

참고자료

https://youtu.be/QVHJxjJxfxE?si=fEobUxsUhhgdTM_w