HDRI는 조명으로써 매우 뛰어난 기능을 제공하면서 동시에 시각적인 배경으로도 사용될 수 있습니다. 그러나 HDRI가 배경으로 사용되면 3D 모델과 이질감이 느껴지는데 이런 이질감을 개선할 수 있습니다.
아래의 영상은 배경으로써의 HDRI를 모델과 함께 자연스럽게 표현하기 위해 작업한 코딩 결과입니다.
주변 환경을 비추는 객체 표현
환경맵(envmap)을 사용해서 주변 환경의 모습을 비추는 객체를 표현할 때 적용할 수 있는 코드입니다. 먼저 아무런 재질도 적용되지 않은 검정색 구체입니다.
위의 검정색 구에 주변 환경 이미지를 환경 맵 소스로 활용하는 코드는 다음과 같습니다.
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );
this._mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );
this._scene.add( this._mirrorSphereCamera );
const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );
this._sphere.material = mirrorSphereMaterial;
환경맵을 생성하는 CubeCamera 객체의 상태가 변경될 경우… 예를들어 카메라의 위치 등이 변경될 경우 다음처럼 update 매서드를 호출해줘야 합니다.
this._mirrorSphereCamera.update( this._renderer, this._scene );
이 글에 사용된 코드와 결과는 Three.js에서 제공되는 예제 코드 중 webgl_animation_skinning_ik.html에서 환경맵 적용에 대한 내용만을 정리한 것입니다.