[Three.js] Camera, Renderer

 

 

이전 포스팅에서는 Mesh를 통해 3D를 만들었는데, 3D를 만들었다고 바로 화면에 보여지지 않는다.

화면에 보이게 하려면 무대 (Scene)와 무대를 보여줄 카메라 (Camera)가 필요하다.

 

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer.render(scene, camera);

 

renderer.render 메소드에 scene, camera를 전달해주면 무대가 완성된다.

위 코드 중 camera에 전달된 값들을 조금 더 알아보자면 순서대로 fov, aspect, near, far 값을 전달해주면 되는데 

fov는 시야각, aspect는 종횡비, near는 카메라가 볼 수 있는 지점의 시작 부분, far은 카메라가 볼 수 있는 끝 부분으로 이해했다. 

 

처음에 가이드를 봤을 땐 어떤 값인지 이해가 잘 되지 않았는데, 값을 하나 하나 바꿔보고 설정해보니 어떤 건지 감이 조금 잡혔다. PerspectiveCamera는 원근법이 적용된 카메라로 사람이 보는 것과 매우 비슷한데, 원근법이 적용되지 않은 다른 카메라도 있다.

 

const camera = new THREE.OrthographicCamera(
   -(window.innerWidth / window.innerHeight), window.innerWidth / window.innerHeight, 1, -1,
   0.1, 1000
 );

 

OrthographicCamera는 직교 카메라인데, 보통 사람의 눈이라면 거리에 따라 멀리 있는 건 작게 보이고 가까이 있는 건 크게 보인다. 그게 PerspectiveCamera라면 OrthgraphicCamera는 멀리 있는 것과 가까이 있는 것의 크기 차이가 없다. 

이를 이용해서 연출도 가능하다는데 게임에서 그게 자주 사용된다고 한다. 

 

  renderer.setPixelRatio(window.devicePixelRatio);

 

또 하나 알게된 점, window에 devicePixelRatio라는 값이 있는데 픽셀의 비율을 반환한다. 보는 화면에 따라 값이 다르다.

이를 이용해 더 선명하게 보이게 설정할 수 있는데, 요즘 모니터는 대부분 Retina Display가 적용되어 있어 2배 이상의 픽셀을 압축해서 보여줄 경우 더 선명하게 보인다.

 

Three.js에서 사용되는 Canvas도 마찬가지로 고밀도 설정을 할 경우 더 선명하게 보이는데, 사용하는 화면의 devicePixelRatio를 renderer.setPixelRatio에 전달해주면 반환되는 값에 맞게 canvas의 크기를 조절한다. 

 

내가 사용하는 모니터는 2.1 정도 값이 리턴됐는데, 이를 적용하니 canvas 값이 거의 2배 이상 늘어났고 더욱 선명하게 느껴졌다. 

 

이 값은 꼭 Three.js에서만 아닌 실무에서도 유용하게 사용할 수 있을 것 같다. 예를 들면 이미지를 서버에서 Resizing해서 사용자에게 보여줄 경우, 사용자가 보고 있는 화면의 비율에 따라 이미지 픽셀을 조절하여 보여줄 수 있지 않나 싶다.