[Godot] 2D Fog Shader 안개 셰이더

2D 안개 효과를 만들어 보자.

 

ParallaxBackground를 추가하고 Layer를 높은 숫자로 바꾼다.

 

ParallaxLayer를 추가하고 Mirroring을 뷰포트와 동일하게 설정한다.

 

ColorRect를 추가하고 Size를 뷰포트와 동일하게 설정한다.

 

ColorRect에 ShaderMaterial을 추가하고 Shader를 생성한다.

 

shader_type canvas_item;
//render_mode unshaded; // optional
 
// Noise texture
uniform sampler2D noise_texture: repeat_enable, filter_nearest;
// Fog density
uniform float density: hint_range(0.0, 1.0) = 0.25;
// Fog speed
uniform vec2 speed = vec2(0.02, 0.01);
 
// Called for every pixel the material is visible on
void fragment() {
    // Make the fog slowly move
    vec2 uv = UV + speed * TIME;
    // Sample the noise texture
    float noise = texture(noise_texture, uv).r;
    // Convert the noise from the (0.0, 1.0) range to the (-1.0, 1.0) range
    // and clamp it between 0.0 and 1.0 again
    float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);
    // Apply the fog effect
    COLOR.a *= fog * density;
}

 

셰이더는 위와 같이 작성한다.

 

Shader Parameters - Noise Texture에 Noise Texture 2D를 추가한다.

 

사이즈는 뷰포트와 동일하게, Seamless 옵션 체크, Noise - FastNoiseLite를 추가한다.

 

적당한 주인공 스프라이트를 추가한다.

 

여러가지 옵션을 변경하며 적당한 안개 효과를 찾는다.

 

float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);

필요하다면 셰이더 코드에서 2.0 이라는 수치를 적당히 변경해 보자.

 

※ 참고

2D fog overlay