4주 학습 로드맵

React / TypeScript 경험을 바탕으로 Three.js → GLSL → Gaussian Splatting → React 통합 뷰어와 성능 순서로 공부합니다. Day 1~28 주제를 각각 작은 학습 단위로 연결했습니다. Day는 학습 순서이며 하루 2시간 같은 고정 시간이나 한 달 뒤 실무 수준을 보장하지 않습니다. 완료 조건을 확인하고 다음 단위로 이동하세요.

현재 28개 단위 모두 문서와 연결 예제를 제공합니다. GS 단위의 CPU 교육용 시각화와 모의 로딩 등 예제별 구현 범위는 실행 환경과 제한을 확인하세요. 예제가 존재하는 것과 본인이 학습을 마친 것은 다릅니다. 완료 체크는 직접 실험한 뒤 기록합니다.

시리즈 목표와 통합 결과물

Scene·Camera·Renderer의 관계를 설명하고 좌표·셰이더·GS 표현을 작은 실험으로 비교합니다. 마지막 단계에서는 UI 상태와 렌더 루프를 분리한 뷰어를 만들고, 입력·리사이즈·정리·실패 경로를 검증합니다. 기준 환경과 변경 조건을 기록해 성능 가설을 검증하고 재현 방법을 문서로 남기는 것이 목표입니다.

네 단계의 제출물은 인터랙티브 장면, 변수 조절 셰이더, 제한이 명시된 GS 뷰어, 통합 뷰어와 측정 기록입니다. 결과물의 완성 여부는 각 단위의 완료 조건으로 판단합니다. 개별 기술을 더 깊게 공부하려면 Three.js, GLSL, Gaussian Splatting의 28단위 경로로 이어가세요.

학습 순서와 원문 대응

진행 방법

1. 선수 지식을 확인하고 개념 설명을 읽습니다.
2. 과제에서 바꿀 변수 하나와 예상 결과를 필기에 먼저 적습니다.
3. 실행 후 실제 결과와 차이를 기록합니다. 실측하지 않은 수치는 쓰지 않습니다.
4. 완료 조건과 자가 점검 질문을 통해 설명 가능한지 확인합니다.
5. 필기를 Markdown으로 다운로드하고 해당 실습 문서에 직접 반영합니다.

화면의 학습 단위 선택과 문서 열람은 이 28개 문서와 연결됩니다. 원본은 docs/labs에 있으며 화면에서 별도의 축약본으로 대체하지 않습니다.

학습 화면 사용법과 저장 · 성능 기록 · 설계 · 구현 계획

GS 후보와 범위

원문 후보 GaussianSplats3D, huggingface/gsplat.js는 21번 비교 단위에 남겼습니다. Spark는 Three.js 장면과 변환·수명을 연결하여 배우기 좋은 후보로 우선 검토합니다. 실측 없이 더 빠르다고 결론 내리지 않으며 아직 설치하지 않았습니다. 도입할 때 지원 형식·SH·Three.js 호환성·라이선스·선택 API를 비교합니다.

일반 PLY가 항상 GS 데이터는 아닙니다. GS picking은 mesh 삼각형 raycasting과 다를 수 있습니다. renderer.info는 전체 GPU VRAM 측정이 아닙니다. 대형 데이터 수집, 모델 학습, 회사 데이터 사용은 이번 범위 밖입니다. Day 28의 배포는 계획 문서만 작성하며 공개 배포나 push를 실행하지 않습니다.

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

원문과 공식 출발점

• Vite
• Three.js 설치
• Spark