고도 엔진에서 Bloom 빛 효과 구현 방법 - 특정 영역만 bloom 구현하기 - Whitmem
고도 엔진에서 Bloom 빛 효과 구현 방법 - 특정 영역만 bloom 구현하기
Game Development
2025-02-24 23:46 게시 18a4a9fdd03b5fb693c5

0
0
65
이 페이지는 외부 공간에 무단 복제할 수 없으며 오직 있는 그대로 게시되며 부정확한 내용을 포함할 수 있습니다. 법률이 허용하는 한 가이드 라인에 맞춰 게시 내용을 인용하거나 출처로 표기할 수 있습니다.
This page is not to be distributed to external services; it is provided as is and may contain inaccuracies.
고도 엔진에서 특정 부분만 Bloom 효과 구현
기본적으로 고도 엔진에서는 WorldEnvironment 노드를 제공하여 월드 전반적인 Bloom 효과 처리 등을 제공한다. 하지만 월드 특정 부분만 따로 텍스처를 가져와 Bloom 효과 등을 구현하기 위해서... 별도 텍스처 구현이 필요했다.
아무튼 이러한 Bloom 효과를 구현하기 위해 다양하고 정교한 방법이 존재하지만... 나는 간단하게 Blur 필터를 사용하여 Bloom을 구현하기로 하였다.
원리는 간단하다. Blur 효과가 처리된 부분을 색상을 intensity 만큼 곱하여 원본 텍스처 색상에 더해주면 되는 것이다.
이런 원본 게임 화면 또는 텍스처가 존재할 때, blur 을 거치면 다음과 같이 된다.
애초 Blur는 주변 색상이 혼합되어 나온 결과물이기 때문에, 이 색상에 intensity를 곱하여 원본 텍스처와 더해주면 Bloom 특유인 빛이 번지는 모습을 낼 수 있다.
Blur 코드는 이전 게임 개발 카테고리에서 MIT 라이선스로 배포를 해두어 복사할 수 있다.
다만 Blur 효과는 화면 전체를 흐릿하게 만들기 때문에, 임계 값을 주어 일정 부분만이 Blur 가 적용되도록 구현해야 한다. 다만, 단순하게 if 문을 사용해서 임계값을 구현하는 경우 다음과 같은 문제가 발생한다.
blur 처리를 하더라도 단순히 if 를 통해 임계 값을 나누는 경우 결국 이진화 되는 부분이 존재하기 때문에 이렇게 경계가 생겨버린다. 따라서, 임계값에 도달할 때 blur 적용 부분이 max가 되도록 선형 부분을 남겨줘야 한다. 따라서 현재 색상의 세기에 threshold 값을 뺀 값을 blur 세기 값으로 사용한다.
float blur_percent = color_distance-threshold ;
이런 경우 이 값이 0에 가까울 수록 임계 값에 도달한 것이고, +일수록 임계를 초과한 것, -일 수록 임계에 도달하지 못한 것으로 볼 수 있다. 이 값이 0~1 값을 유지할 수 있도록 +1 해주면 된다. (사실 범위를 벗어날 수 있는데 클립핑하면 된다.) 그러면 1에 가까울 수록 임계에 도달한 것이고, 0에 가까울 수록 임계에 한참 도달하지 못한 값임을 파악할 수 있다.
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 float threshold = 0.5; uniform float intensity = 2.0; uniform bool is_block_minus_multiple=true; uniform vec3 color_mask = vec3(1.0,1.0,1.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; vec4 color = vec4(0.0); float total = 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); total+=1.0; } } color /= total; vec4 original_color = texture(screen_texture,SCREEN_UV); vec4 combine_color=vec4(0.0,0.0,0.0,0.0); float color_distance = length(vec3(color.xyz)); float blur_percent = color_distance-threshold ; // 0에 가까울수록 임계 도달, +넘어갈 수록 임계초과, -일수록 임계 아직 도달 안한 거리 blur_percent = min(1.0,blur_percent +1.0); if(is_block_minus_multiple) blur_percent = max(0.0, blur_percent); //blur 계산 결과가 마이너스가 되는 것을 방지 (색상 거리) // 0 ~ 1 임계 아직 도달 안 함 , 1 임계 도달 , 1 넘어가면 초과 combine_color = color * blur_percent * intensity * vec4(color_mask,1.0); COLOR = original_color + combine_color; }
위 코드 역시 MIT 라이선스로 배포한다. 자유로이 사용해도 되나, 라이선스 전문 및 본 사이트를 출처로 남기고 사용하면 된다.
For size 는 blur 를 위한 샘플링 횟수를 의미하고, (x가 10인 경우 -10 ~ 10 번 샘플링 한다는 것이다.)
StandardPixel은 각 샘플링 for 반복시에 이동하는 거리 크기이다.
그리고 Threshold 는 blur 임계 값, Intensity는 해당 blur을 얼마나 세기로 곱할 것인지, ColorMask 는 결과 Bloom의 색상을 조절할 수 있는 색상 마스크이다.
댓글 0개
댓글은 일회용 패스워드가 발급되며 사이트 이용 약관에 동의로 간주됩니다.
확인
Whitmemit 개인 일지 블로그는 개인이 운영하는 정보 공유 공간으로 사용자의 민감한 개인 정보를 직접 요구하거나 요청하지 않습니다. 기본적인 사이트 방문시 처리되는 처리 정보에 대해서는 '사이트 처리 방침'을 참고하십시오. 추가적인 기능의 제공을 위하여 쿠키 정보를 사용하고 있습니다. Whitmemit 에서 처리하는 정보는 식별 용도로 사용되며 기타 글꼴 및 폰트 라이브러리에서 쿠키 정보를 사용할 수 있습니다.
이 자료는 모두 필수 자료로 간주되며, 사이트 이용을 하거나, 탐색하는 경우 동의로 간주합니다.