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();