[ Three.js ] PerspectiveCamera near, far 값은 왜 중요할까? z-fighting 원인까지 쉽게 설명!

Three.js를 공부하다 보면 아래와 같은 코드를 자주 보게 됩니다.

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

여기서 많은 사람들이 궁금해하는 부분이 바로 이것입니다.

near, far 값은 왜 필요한 걸까?

그리고 Three.js 관련 글을 보다 보면 이런 문장도 자주 보게 됩니다.

Do not use extreme values like 0.001 and 999999 to prevent z-fighting

처음 보면 굉장히 어렵게 느껴질 수 있습니다.
이번 글에서는:

• PerspectiveCamera near/far 의미
• 왜 극단적인 값을 쓰면 안 되는지
• z-fighting 현상이 무엇인지

쉽게 정리해보겠습니다!

 

PerspectiveCamera의 near와 far란?

---

PerspectiveCamera는 카메라가 볼 수 있는 범위를 설정합니다.

const camera = new THREE.PerspectiveCamera(
  fov,
  aspect,
  near,
  far
)

여기서:

값의미

near	카메라가 보기 시작하는 최소 거리
far	카메라가 볼 수 있는 최대 거리

입니다.

예를 들어:

new THREE.PerspectiveCamera(
  75,
  aspect,
  0.1,
  100
)

이면:

• 카메라에서 0.1보다 가까운 물체는 안 보이고
• 100보다 먼 물체도 안 보이게 됩니다.

왜 near와 far가 중요한 걸까?

---

많은 초보자들이:

0.001,
999999

처럼 엄청 크게 설정하는 경우가 있습니다.

왜냐하면:

"그냥 많이 보이게 하면 좋은 거 아닌가?"

라고 생각하기 때문입니다.

하지만 실제로는 이렇게 하면 렌더링 문제가 발생할 수 있습니다.

대표적인 문제가 바로:

Z-Fighting

입니다.

Z-Fighting이란?

---

Z-Fighting은 두 개의 면이 서로 깜빡이거나 겹쳐 보이는 현상입니다.

예를 들어:

• 바닥 위에 Plane 하나를 거의 붙여서 올렸을 때
• 건물 벽이 겹칠 때
• 그림자처럼 깨져 보일 때

발생할 수 있습니다.

화면에서는:

• 줄무늬처럼 보이거나
• 깜빡거리거나
• 면이 서로 번갈아 보이는 현상

으로 나타납니다.

 

왜 이런 현상이 발생할까?

---

GPU는 물체의 깊이(depth)를 저장해서:

"어떤 물체가 앞에 있는가?"

를 계산합니다.

이때 사용하는 것이:

Depth Buffer

입니다.

문제는 이 Depth Buffer의 저장 공간이 무한하지 않다는 것입니다.

 

쉽게 비유하면?

---

서랍이 100칸밖에 없다고 생각해 보겠습니다.

만약:

0 ~ 10 거리

만 저장한다면 꽤 정확하게 깊이를 구분할 수 있습니다.

하지만:

0 ~ 999999 거리

를 같은 100칸으로 저장하려고 하면?

깊이 구분이 굉장히 부정확해집니다.

즉 GPU 입장에서는:

"둘이 거의 같은 위치 같은데?"

라고 판단하게 되는 것입니다.

그래서 Z-Fighting 현상이 발생합니다.

 

특히 near 값이 중요하다

---

많은 사람들이 far만 중요하다고 생각하지만 실제로는:

near 값이 더 중요합니다.

예를 들어:

near = 0.0001

처럼 너무 작은 값을 사용하면 depth precision(깊이 정밀도)이 크게 떨어집니다.

보통은:

near = 0.1

정도를 많이 사용합니다.

---

좋은 예시 vs 안 좋은 예시

---

좋은 예시:

new THREE.PerspectiveCamera(
  75,
  aspect,
  0.1,
  100
)

안 좋은 예시:

new THREE.PerspectiveCamera(
  75,
  aspect,
  0.0001,
  999999
)

 

 

near와 far는 어떻게 설정하는 게 좋을까?

---

보통은:

상황 추천 값

일반적인 웹사이트	0.1 ~ 100
게임	0.1 ~ 1000
거대한 월드	상황에 따라 최적화 필요

정도가 많이 사용됩니다.

핵심은:

필요한 범위만 렌더링하기

입니다.

 

마치며

---

PerspectiveCamera의 near/far는 단순 숫자가 아니라:

• 렌더링 품질
• 깊이 정밀도
• 성능
• Z-Fighting 여부

에 직접적인 영향을 주는 중요한 설정입니다.

특히 Three.js를 처음 공부할 때는:

"많이 보이게 하려고 극단적으로 설정하지 않기"

를 기억하면 좋습니다 😊

긴 글 읽어주셔서 감사합니다!

 

참고

• Three.js PerspectiveCamera Docs
• Three.js Manual Cameras Guide