Depth Buffer

• webGL은 렌더링할 때 그려지는 물체에 대하여 픽셀마다 depth 정보(카메라와의 z축 거리의 정규화된 값)를 저장한다.

  

  Depth Buffer 에 depth 정보를 저장한다고 표현하는데 위의 픽셀 화면 자체를 버퍼라고 생각하는게 편함

• 렌더러는 Depth Buffer 를 이용해서 먼저 그려진 물체와 나중에 그려진 물체 사이의 거리감을 판단하여 화면을 그린다.

depthTest

• true : 렌더러야. 이 물체를 그릴 때 다른 물체와의 depth 차이를 고려해.
• false: 렌더러야. 이 물체를 그릴 때 다른 물체와의 depth 차이를 고려하지마.

depthWrite

• true: 렌더러야. 이 물체를 그릴 때 내 depth 를 버퍼에 저장해놔.
• false: 렌더러야. 이 물체를 그릴 때 내 depth 를 버퍼에 저장하지마.

🚬 물체가 화면에 렌더링 되는 기준

<aside> 💡 화면에 렌더링된다는 것을 화면의 픽셀을 차지했다고 생각하자 (땅따먹기) 기본적으로 나중에 그려지는 물체가 픽셀을 차지하려고 한다. (실제로 앞에 있든 뒤에 있든 상관 없음) 그러므로 나중에 그려지는 물체를 기준으로 생각해야한다.

</aside>

• 나중에 그려진 물체가 depth 고려를 하지 않는다 ( depthTest: false ) → 나중에 그려진 물체가 픽셀 차지
• 나중에 그려진 물체가 depth 고려를 한다 ( depthTest: true )
  • 먼저 그려진 물체가 depth 정보를 가지고 있다 ( 먼저 그려진 물체의 depthWrite : true ) → depth 에 맞게 그려지는데 겹치는 부분에서 깜빡임 발생
  • 먼저 그려진 물체가 depth 정보를 가지고 있지 않다 ( 먼저 그려진 물체의 depthWrite : false ) → 나중에 그려진 물체가 픽셀을 차지한다

결론적으로 나중에 그려진 물체가 왠만하면 픽셀을 뺏고 싶어하는 건데, 인간적으로 상대방의 depth 를 고려해주는 물체면 depth 에 맞게 픽셀을 양보하고, 그런거 신경 안쓰면 그냥 픽셀 뺏어버린다.

참고

이렇게 큐브 2개 살짝 겹쳐놓고

blackCubeMaterial.renderOrder = 1;
whiteCubeMaterial.renderOrder = 2;

렌더링 순서 바꿔보면서 depthTest, depthWrite 바꿔가며 테스트 해보면 어떤 차이가 있는지 실험해 볼 수 있다.