three.js의 보다 사실적인 유리 재질을 위한 dispersion 속성

어떤 유리를 보면 유리의 내부에서 마치 프리즘처럼 빛이 산란되어 보이는 경우가 있습니다. 유리를 마냥 투명하게만 표현하면 간혹 있는지 없는지스러운 느낌없는 느낌으로 표현되고 마는데요. 이때를 위해 재질의 속성 중 dispersion을 활용할 수 있습니다. 이 속성은 오직 MeshPhysicalMaterial에서만 제공된다는 안타까운 점은 있지만 유리와 같은 재질은 한두개만 만들어두고 재활용하는 경우가 대부분이므로 충분히 활용할만합니다.

아래 이미지는 dispersion에 대한 값 변화에 따른 표현입니다. (이미지 출처: three.js examples)

번외로 흔히 손쉽지만 매우 효과적인 광원으로 HDRi를 사용하는데요. 이는 정적인 데이터 파일을 이용하는 경우고 데이터 없이 이와 유사한 광원을 만들어 내는 방법이 있습니다. 바로 RoomEnvironment 확장 기능인데요. 이 클래스는 Scene을 상속받는 것으로 Scene으로 구성된 내용으로 PMREM 데이터(환경맵 데이터의 한 종류)를 생성할 수 있습니다. 이에 대해 관련된 코드는 다음과 같습니다. 즉, 아래의 코드가 있다면 별도의 광원이 필요하지 않습니다. 단, 그림자 표현을 위해서는 별도의 광원이 필요합니다.

const environment = new RoomEnvironment(this._renderer);
const pmremGenerator = new THREE.PMREMGenerator(this._renderer);
const env = pmremGenerator.fromScene(environment).texture;
this._scene.background = env;
this._scene.environment = env;
this._scene.backgroundBlurriness = 0.5;
environment.dispose();

AO 효과

Ambient Occlusion은 물체를 보다 다 입체적으로 보이는데 매우 중요한 요소입니다. 아래는 AO 뿐만 아니라 다양한 곳에 응용될 수 있는 블렌더 쉐이더 노드 구성입니다.

적용된 매시의 렌더링 결과를 보면 다음과 같습니다.

위의 노드 구성 중 Bevel은 오직 Cycles 렌더링에서만 작동하며 Bump 맵핑처럼 매시의 가장자리를 렌더링하기 위해 사용됩니다. 이 노드는 실제 매시의 지오메트리를 변경하지 않고 오직 쉐이더만으로 효과를 냅니다. 덧붙여 아래는 좀더 구체적인 응용을 위해 재구성된 노드입니다.

Noise Texture는 좀더 불규칙한(자연스러운) Bevel 효과를 얻기 위함이고 Multiply는 최종 효과를 보다 두드러지게 표현되도록 하기 위함입니다.

사실 위의 노드 구성은 AO를 위한 것은 아닙니다. AO에 대한 것만을 원한다면 이에 특화된 Ambient Occlusion 노드가 있으니 이를 이용하기 바랍니다.