React Three Fiber · 28 자원 공유와 프레임 정책
단계: demand 정책과 성능 검증 · 편집 가능한 예제 · 저장 ID: react-three-fiber-03
목표와 학습 후 역량
- 정지·클릭·애니메이션 종료가 demand에서 모두 정상이다.
- 같은 조건의 draw call·프레임·해제 기록으로 최종 정책을 설명한다.
선수 지식
28단위는 27단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
공유 수명
공유 geometry·material은 여러 객체가 함께 사용합니다. 마지막 소비자가 끝날 때 해제하도록 소유권과 자동 dispose 정책을 맞춥니다.
프레임 정책
정지 장면은 demand로 프레임을 줄일 수 있습니다. 직접 변경과 애니메이션에는 시작·진행·종료에 맞는 invalidate가 필요합니다.
실습 준비
별도 React Vite 프로젝트에서 JSX를 사용합니다. React와 @react-three/fiber의 호환 메이저 버전, Three.js 버전과 lockfile을 기록하세요. 이 과정은 WebGL 기반 안정 버전 API를 사용하며 alpha WebGPU API를 혼용하지 않습니다. 프레임 갱신은 useFrame과 ref로 처리합니다. 기존 react-three-fiber-03 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/StudyScene.jsx에서 공유 grid와 instanced 대조군을 같은 배치로 준비하세요.
- always·demand의 정지와 조작을 비교하고 10회 장면 전환 후 자원 추세를 기록하세요.
- notes/final.md에 선택·필기 보존·프레임 정책·자원 소유권·측정 한계를 묶어 제출하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 장면 표현 | 공유 자원 개별 mesh | instancedMesh | 자원 공유와 draw call 감소의 차이를 측정으로 구분한다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 정지·클릭·애니메이션 종료가 demand에서 모두 정상이다.
- 같은 조건의 draw call·프레임·해제 기록으로 최종 정책을 설명한다.
자가 점검
- 공유 geometry와 instancing은 무엇을 각각 줄이나요?
- demand로 바꾼 뒤 화면이 멈췄다면 어떤 변경 경로를 확인하나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.