앞선 1탄에서는, 정말 기본적인 threejs의 요소에 대해 알아보았다.
2탄에서는, 비유하자면 고급 촬영 기술에 대해 이해한대로 기술하고자 한다.
사실 이 6가지(scene, camera, renderer, mesh, geometry, material)말고도, 아직 설명하지 않은 중요한 요소가 한 개 더 있다.
Camera
지금 휴대폰의 카메라 앱을 실행해보자.
눈 앞에 있는 키보드를 사진찍는다고 했을 때, 사진 속에 예쁘게 담기게 하려면 키보드와 '적절한 거리' 를 유지해야 할 것이며, 너무 과하지 않은 '각도(시야각)'으로 촬영해야 할 것 이다. 또한, 핸드폰을 가로로 들고 찍느냐, 세로로 들고 찍느냐에 따라서도, 가로 세로 '비율'이 다르기에 결과물이 아주 다르게 나올 것이다.
- fov : field of view의 약자로, 시야각을 뜻한다. 물고기나 잠자리의 눈은 시야각이 크고, 사람은 그것보단 작다.(시야각이 클수록 어안렌즈 같은 느낌이 생긴다)
- aspect ratio : 카메라의 가로 세로 비율을 뜻한다. 일반적으로 보여질 화면의 가로 나누기 세로(width/height)로 설정한다.
- far : 카메라에 담길 최대 거리 값이다. far보다 멀리 있는 mesh는 카메라로 촬영할 수 없게 된다.(빛을 차단하는 막을 둔다고 생각하면 된다.)
- near : 카메라에 담길 최소 거리 값이다. near보다 가까이 있는 mesh는 카메라로 촬영할 수 없게 된다.
Threejs의 7번째 주인공. Light
만약 1탄에서 나무 블럭을 촬영하는 시각이 밤이라면 깜깜해서 아무것도 찍히지 않을 것이다.
이럴때는 가로등 불빛이나, 핸드폰 플래시등 다른 빛을 이용하여 촬영해야 한다. 그러나 빛은 생각보다 종류가 매우 다양하다. threejs에서는 그 종류가 아래와 같다.
- Ambient Light : Scene의 어느 지점에서든 동일한 밝기를 제공해주는 조명이다.(실제 환경에서는 존재할 수 없는 조명이다.)
- Directional Light : 태양으로부터 오는 직사광선을 생각하면 된다.
- HemiSphere Light : 반구 모양의 조명으로, 일몰 시 태양을 생각하면 된다.
- Point Light : 특정 지점에 배치하는 조명으로, 어두운 방 안의 조명을 떠올리면 된다.
- Spot Light : 연극 혹은 뮤지컬 무대 위에서 주인공을 비추는 스포트라이트를 생각하면 된다.
Material
threejs는 빛 혹은 카메라에 대해 어떤 material로 만들어진 mesh냐에 따라, 다른 재질 혹은 색상으로 보여진다.
- MeshBasicMaterial : 빛의 영향을 받지 않는 재질이다. 즉 빛이 없어도 보여지며, 빛이 있어도 더 밝게 보이거나 하지 않는다.
- MeshStandardMaterial : 빛의 영향을 받는 가장 기본적인 재질이다.
이외에도 많은 종류의 재질이 존재하나, 2탄에서는 앞선 두 개의 material만 다루겠다.
2탄에서 정리된 촬영기술(?) 및 장치들을 이용하면, 좀 더 숙달된 카메라 조작 기능과, 다양한 조명 연출을 통해 좀 더 고급진 결과물을 얻을 수 있을 것이다.
다음탄에서 계속...
코더가 아닌 프로그래머를 지향하는 개발자