3D 공간에 안개 효과 적용하는 방법

안녕하세요. 이번에는 Three.js로 만든 3D 공간에 안개를 추가해볼게요.
3D 엔진의 안개는 일반적으로 카메라로부터의 거리에 따라 특정 색상으로 페이드 하는 방식입니다. 별거 아니지만, 막상 적용하면 깊이감을 표현할 수 있습니다.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

Three.js에서 안개 사용 방법

배경색과 안개색을 동일하게 하면, 공간으로 페이드 아웃되는 효과를 줄 수 있고, 반대로 배경색과 안개색을 보색으로 설정하면, 좀 더 도드라지게 표현할 수도 있습니다.

const FogColor = 0x004fff;
const objColor = 0xffffff;
const FloorColor = 0xff0000;

Fog는 안개를 적용할 위치를 선택할 수 있는 장점이 있어 일반적으로 더 많이 사용됩니다. 표현 의도에 따라 특정 거리까지 명확한 장면을 표시한 다음 해당 거리를 지나서 어떤 색상으로 페이드 아웃하도록 조절하는 것이 FogExp2보다 좋은 점이죠.

// Fog 
scene.fog = new THREE.Fog(FogColor, 2, 8);
scene.fog = new THREE.Fog(color, near, far);

FogExp2는 카메라와의 거리에 따라 기하급수적으로 증가하는 방식으로, Fog보다 현실에 더 가깝게 표현이 가능합니다.아래 코드를 보면 속성값이 다름을 알 수 있습니다.

//FogExp2
scene.fog = new THREE.FogExp2(color, density);
scene.fog = new THREE.FogExp2(FogColor, 0.2);