드디어 three.js의 WebGPU 지원이 매우 안정화되면서 GI(Global Illumination, 전역 조명) 기능을 사용할 수 있습니다. 꽤 오래전 babylon.js에서 GI 기능을 제공하지만 three.js는 그러지 못해 늘 안타까웠는데요. 먼저 GI란 3D 장면 내에서 빛이 광원에서 나와 물체에 직접 닿는 것(직접광)뿐만 아니라, 표면에 반사되고 산란되어 주변 환경을 밝히는 간접광(Indirect Lighting)까지 모두 계산하여 사실적인 조명 효과를 만들어내는 기술이라고 정의되어 있습니다. 네, 더 나은 장면을 만들어 주는 기술이라는 것입니다. 먼저 GI가 적용되지 않은 장면입니다. 광원은 PointLight 하나만 사용되었습니다.
오직 PointLight에 대한 광원만으로 개별 메시에 대한 쉐이딩만이 고려되어 렌더링된 일반적인 three.js 렌러링 결과죠. 부족한 이런 렌더링 품질을 보완하기 위해 블렌더와 같은 3D 툴을 이용해 광원맵을 baking해서 사용하곤 했습니다. 하지만 이제 그럴 필요없이 GI를 적용하면 위의 결과가 아래처럼 바뀝니다.
품질이 훨씬 좋아졌습니다. FPS가 양호합니다. 예전에 babylon.js에서 GI를 적용했을때 FPS가 매우 나쁘게 나왔는데 three.js는 양호합니다. 물론 현재 babylon.js의 GI 기능이 개선되어 좋아졌을 수도 있지만 말입니다.
끝으로 주요 GI 기술의 종류는 3가지입니다.
- 레이 트레이싱(Ray Tracing): 빛의 경로를 역추적하여 반사, 굴절 등을 물리적으로 정확하게 계산.
- 라이트 맵(Light Map): 빛의 효과를 미리 계산해 텍스처로 물체에 입히는 방식.
- 앰비언트 오클루전(AO): 주로 구석이나 틈새 부분에 은은한 음영을 추가해 3D 모델의 입체감을 향상시키는 기술 (GI의 보조 역할).
three.js는 AO 방식응로 GI를 제공합니다.
이제 넓은 범위의 지형 지물에 대한 장면에 GI를 적용해 멋진 장면을 렌더링해 봅시다.