r3f 시작하기

gltfjsx

• gltf를 선언적이고 재사용 가능한 react-three-fibeer JSX 컴포넌트로 변환시켜주는 도구

gltfjsx 장점

• 쉬운 콘텐츠 수정 및 재사용
• 효율적인 그래프 최적화
• 압축 옵션 제공

FPS 개념 & Stats 컴포넌트

Frame Per Sec 1초당 보여주는 화면의 장수
FPS는 초당 프레임 수를 나타내며, 애니메이션이나 그래픽 렌더링에서 얼마나 부드럽게 동작하는지를 나타낸다. 웹에서는 60을 넘길 필요는 X VR이나 가상현실에서는 90,120을 사용하기도 한다.

• drei 에서 State를 사용하면 프레임을 알아볼 수 있다.
• FPS : 초당 렌더링 되는 프레임 수
• Millisecond Per Frame : 한 프레임을 렌더링하는 데 걸리는 시간을 밀리초 단위로 나타낸다. 값이 작을수록 렌더링 성능이 좋다.
• Megabytes Used : 현재 웹 페이지에서 사용중인 메모리 양을 메가바이트 단위로 나타낸다. 현재 웹페이지의 메모리 소비를 모니터링 하여 메모리 누수 및 성능 이슈를 감지하는데 도움됨

프레임 드랍이 일어나는 이유

하드웨어가 처리할 수 있는 것보다 훨씬 더 큰 워크로드를 생성하는 그래픽설정 때문에.
DrawCall : CPU가 GPU에 요청 DrawCall 상한치 PC : 1000 / Mobile : 100 ~200

메시 병합

DrawCall 계산법, 메시들을 한번에 묶어서 한번만 렌더링 호출

LOD

Level Of Detail 는 3D 그래픽 작업에서 모델의 세부 수준을 나타내는 용어. LOD는 세부 수준이 높은 모델을 멀리서 볼 때 불필요한 세부 정보를 줄이는 기술로 사용된다.

모델 최적화 (glb, Draco)

Draco는 Google에서 개발한 오픈 소스 3D 그래픽 압축 라이브러리. CesiumGS / gltf-pipeline : glTF 자산을 최적화하기 위한 콘텐츠 파이프라인 도구

• glTF를 glb로 변환 (반대도 가능)
• 버퍼/텍스처를 포함 또는 별도 파일로 저장
• glTF 1.0 모델을 glTF 2.0으로 변환
• Draco 메시 압축 적용