배경
처음에는 3D 막대를 이용해서 메인 페이지를 구축했었는데, 생각보다 시각적으로 별로였습니다. F1을 표현하기 위해 빛과 spa-francorchamps 서킷을 이용해서 무언가 만들어 봤지만 제가 할 수 있는 영역에서는 너무 어려웠고, 시간 투자대비 결과물이 좋지 못했습니다.
그러던 중 r3f를 사용한다면 3D Model을 렌더링 하여 보여주는게 가장 이상적일 것이라고 생각했고, 가장 유명했던 인물 중 하나인 아일톤 세나의 차량, McLaren MP4/4 GLTF 모델을 Sketchfab에서 구매하여 다시 구현했습니다.
3D Model 렌더링 과정
이번 프로젝트에서 React Three Fiber와 Drei 라이브러리를 사용하여 3D 모델을 렌더링했습니다. 특히, useGLTF 훅을 통해 GLTF 파일을 로드하고, 모델을 화면에 렌더링하는 과정을 구현했습니다. 그 과정과 중요한 부분들을 정리해보겠습니다.
GLTF 모델 로드와 렌더링
React Three Fiber에서는 useGLTF라는 훅을 통해 쉽게 GLTF 파일을 불러올 수 있습니다. 불러온 GLTF 파일의 scene 객체를 통해 모델을 조작할 수 있고, 이 과정에서 metalness와 같은 PBR 속성도 적용할 수 있습니다.
주요 코드: GLTF 파일 로드 및 렌더링
function Model({ url, metalness }: ModelProps) {
const { scene } = useGLTF(url)
scene.traverse((child) => {
if (child.isMesh) {
child.material.metalness = metalness // Leva 값으로 metalness 설정
}
})
return <primitive object={scene} castShadow receiveShadow />
}
렌더링 된 모습
PBR과 Metalness 조정
Sketchfab에서 예제 이미지를 보고 구매했지만, 적용했을 때 예제와는 다소 차이가 있었습니다. 문제는 모델의 PBR(Physically Based Rendering) 설정이였습니다.
PBR 은 Physically Based Rendering의 약자로, 현실적인 재질과 조명을 표현하는 3D 렌더링 기술을 의미하며, PBR은 실제 세계의 물리적 법칙을 기반으로 해서, 물체의 표면이 어떻게 빛과 상호작용하는지를 더 정확하게 시뮬레이션 하는 기술입니다.
PBR의 핵심 요소는 크게 두 가지 인데
| 속성 | 설명 |
|---|---|
| Albedo | 표면의 색상을 정의하는 텍스처로, 물체에 떨어지는 빛의 색과 상관없이 물체 고유의 색을 표현 |
| Metalness/Roughness | 물체의 반사율과 표면의 매끄러움 정도를 정의하는 속성. Metalness는 물체가 금속인지 비금속인지를 나타내고, Roughness는 표면의 거칠기를 나타냄 |
이 외에도 PBR은 환경 맵(Environment Map)을 사용해 물체가 주변 환경으로부터 반사되는 빛을 표현함으로써 더 현실적인 렌더링을 가능하게 해줍니다.
이 중에서도 metalness라는 속성에 대해 알게 되었고, 이 값을 조정하면서 모델이 훨씬 더 사실적이고 자연스럽고 금속의 느낌을 표현할 수 있었습니다.
Leva 라이브러리를 사용하여 metalness 값을 실시간으로 조정할 수 있도록 했고, 이를 통해 더 유동적으로 모델의 외형을 조정할 수 있었습니다. 이렇게 설정한 metalness 값은 GLTF 모델의 각 메쉬(material)에 적용하여 조정하게 됩니다.
금속의 질감이 추가된 모습
결과
이러한 설정을 통해, 세나의 MP4/4 모델이 웹 페이지 상에서 사실적인 메탈 느낌을 갖고 렌더링됐습니다. 모델의 metalness 값을 조정하면서 렌더링 결과가 어떻게 달라지는지 실시간으로 확인할 수 있었습니다.
이 과정에서 가장 중요했던 점은 PBR 속성인 metalness의 역할 설정을 통한 렌더링 입니다. 이를 통해 더욱 생동감 있는 3D 모델을 구현할 수 있었습니다.
요즘 대학시험이 한달앞으로 다가와 시험공부 및 코딩테스트를 준비하느라 개발의 진척이 느리내요
틈틈히 개발하며 다음으로는 너무 밋밋한 배경과 빛을 추가하기위해 Hdri 와 백그라운드에 차고를 렌더링하는 것으로 돌아오겠습니다.
