3D 공간에 안개 효과 적용하는 방법 – Three.js 강좌

안녕하세요. 이번에는 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);