고도 엔진에서 특정 영역만 blur 하는 방법

고도 엔진에서 Blur 부분 흐림 처리 방법

고도 엔진에서 부분적으로 Blur 흐림 처리를 하기 위해서 Shader 을 이용해야 한다. 해당 TextureRect 가 존재하는 배경 스크린 텍스처를 가져오고, 거기서 약간 블러 처리를 한 뒤에 쉐이더 색상으로 내보내면 된다. 그러면 그 배경으로 들어오게 된 스크린 텍스처에 부분적으로 흐림 효과를 적용할 수 있고, 월드에서 부분적으로 적용할 수 있다.

2D 게임에서 창문, 창, 유리 등을 표현할 때 유용하다.

먼저 TextureRect 노드를 생성한다. 그리고 텍스처를 CanvasTexture 등 하나 추가하고, Material 을 ShaderMaterial 로 하나 추가한다.

이외 쉐이더를 하나 추가한다.

shader_type canvas_item; uniform sampler2D screen_texture : hint_screen_texture; uniform vec2 for_size = vec2(1.0,1.0); uniform vec2 standard_pixel; uniform vec3 back_color = vec3(0.0,0.0,0.0); varying vec2 varying_uv_standard_pixel; void vertex(){ varying_uv_standard_pixel = vec2((CANVAS_MATRIX * MODEL_MATRIX * vec4(standard_pixel,0.0,0.0)).xy); varying_uv_standard_pixel = vec2((SCREEN_MATRIX * vec4(varying_uv_standard_pixel,0.0,1.0)).xy); } void fragment() { vec2 standard_pixel_1 = (varying_uv_standard_pixel + 1.0)/2.0; float amount = 0.0; vec4 color = vec4(0.0); for (int x = -int(for_size.x); x <= int(for_size.x);x++) { for (int y = -int(for_size.y); y <= int(for_size.y); y++) { vec2 uv = SCREEN_UV; uv+= standard_pixel_1 * vec2(float(x),float(y)); color += texture(screen_texture,uv); amount+=1.0; } } color /= amount; color += vec4(back_color,0.0); COLOR = color; }

쉐이더 코드를 붙여넣는다. 직접 작성한 쉐이더 코드이고 MIT 라이선스로 배포한다. MIT 라이선스 전문과 이 사이트를 출처로 라이선스 페이지 어딘가에 고지해주면 된다.

위 쉐이더는 각 색상이 렌더링되는 부분으로 부터 지정된 거리만큼의 샘플 (grid)를 가져와 색상을 융합하고 평균내어 블러를 구현해주는 간단한 코드이다.

For Size 는 for문을 반복할 횟수를 의미한다. x 3인 경우 색상 지점으로부터 -3 ~ 3 거리를 샘플링한다. 즉 x 3, y3인 경우 x -3 ~ 3, y -3 ~ 3 그리드 공간을 샘플링하여 더한다.

StandardPixel 은 각 그 그리드 공간의 실제 월드 공간 픽셀 좌표이다. for을 반복할 때 이 픽쉘 좌표 거리만큼 이동하면서 샘플을 가져온다.

배경 색상이다. 약간의 거울 효과를 내기 위해서 RGB 0.02, 0.02, 0.02을 더한다.