Three.js · 28 렌더링 자원과 측정
단계: 자원 수명·접근성·측정 · 편집 가능한 예제 · 저장 ID: threejs-03
목표와 학습 후 역량
- 동일 조건의 지표와 자원 정리 과정을 기록한다.
- 성능 개선과 품질·선택 기능의 유지 여부를 함께 설명한다.
선수 지식
선수 개념: 기능 계약, 재실행 검증. 27단위의 결과 파일과 관찰 기록을 준비하세요.
핵심 개념과 설명
병목 분리
draw call 감소와 픽셀 비용 감소는 서로 다른 개선입니다. 같은 장면에서 한 변수씩 바꿔야 효과를 해석할 수 있습니다.
반복 정리
종료 시 루프·컨트롤·관찰자와 소유 자원을 함께 해제합니다. renderer.info의 안정 추세는 참고 자료이며 전체 VRAM의 해제 증명은 아닙니다.
실습 준비
기존 내장 예제는 출발점만 제공합니다. 확장 요구사항 전체가 구현된 예제가 아니며 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. three와 addons를 같은 설치 버전으로 고정하고 기록하세요.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 실습 프로젝트의 day-28.js와 index.html을 준비하세요. 기존 threejs-03 출발 코드에 장면 생성·삭제와 개별 Mesh/InstancedMesh 전환을 연결하세요.
- 같은 카메라·수량·DPR로 전후 calls와 프레임 분포를 기록하고 geometry·material·texture·render target 정리 장부를 제출하세요.
- 입력 조건 개별 Mesh에서 출력을 저장한 뒤 InstancedMesh 조건으로 다시 실행하세요. 예상: 동일 geometry와 material 조건에서 호출 수를 줄일 수 있으나 전체 프레임 효과는 측정해야 합니다. 실제 화면·로그와 대조하고 day-28-notes.md에 실제 결과와 차이의 원인을 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 반복 객체 표현 | 개별 Mesh | InstancedMesh | 동일 geometry와 material 조건에서 호출 수를 줄일 수 있으나 전체 프레임 효과는 측정해야 합니다 |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 동일 조건의 지표와 자원 정리 과정을 기록한다.
- 성능 개선과 품질·선택 기능의 유지 여부를 함께 설명한다.
자가 점검
- draw call은 줄었는데 프레임이 같다면 무엇을 의심하나요?
- renderer.info로 알 수 없는 메모리 정보는 무엇인가요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.