초기 커밋: 스테이션(측점) 기반 주행영상 플레이어
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
# 2026-06-23 — 선형/드론궤적 화면갱신 부드럽게 (RAF 60fps 보간 투영)
|
||||
|
||||
**소요 시간**: 약 25분
|
||||
**Context 사용량**: input ~210k / output ~26k tokens (추정)
|
||||
|
||||
## 문제
|
||||
드론 궤적·선형(중심선)이 재생 중 "드드득" 끊김.
|
||||
|
||||
## 원인
|
||||
- **라벨(측점/POI)**: RAF에서 `timeRef`(60fps 부드러운 시간) 기반 `estFrame`으로 두 프레임 사이를 **매 프레임 보간** → 부드러움.
|
||||
- **선/궤적**: `renderCacheRef`를 **`currentTime`(timeupdate, ~10Hz 불규칙) → `panelDroneFrame` 변경 → effect 재실행** 경로로만 재생성. 즉 **~10Hz 이산 갱신** → 끊김.
|
||||
|
||||
## 해결 — 선/궤적도 RAF에서 매 프레임 보간 포즈로 직접 투영
|
||||
`StationOverlay.tsx`:
|
||||
|
||||
1. **`buildLines(drone)`** useCallback 신설 — 투영 헬퍼(oc/segFrom) + 중심선 + 드론경로 투영을 캡슐화, refs만 읽어 stable. `{centerlineSegs, dronePathPts}` 반환.
|
||||
2. **`poseAt(estFrame)`** useCallback — 연속 프레임번호에서 앞/뒤 `smoothFrame`을 **선형보간**(yaw는 최단각)해 **서브프레임 드론 포즈** 생성.
|
||||
3. **RAF**: `estFrame`을 (라벨과 공통으로) 먼저 계산 → `buildLines(poseAt(estFrame))`로 선/궤적을 **매 프레임 재투영** → 그림. 라벨 블록은 같은 `estFrame` 재사용.
|
||||
4. **캐시 effect 축소**: `renderCacheRef`는 이제 선/궤적을 보관하지 않고 **나침반/메타데이터(effectiveYaw·hFovRad·count)만**. `RenderCache`에서 `centerlineSegs/dronePathPts` 제거.
|
||||
|
||||
```ts
|
||||
// RAF
|
||||
const estFrame = (timeRef ? timeRef.current : …) * VIDEO_FPS;
|
||||
const lines = buildLines(poseAt(estFrame) ?? smoothFrame(...));
|
||||
// draw lines.centerlineSegs / lines.dronePathPts
|
||||
```
|
||||
|
||||
## 성능
|
||||
- 중심선 = **224점**(center.csv), 드론경로 윈도 = 수백 점. 60fps 투영 ≈ 초당 1.3만~수만 회 → 무시 가능.
|
||||
- 포즈 보간은 `smoothFrame` 2회/프레임(±smoothHalf 평균) — 가벼움.
|
||||
|
||||
## 효과
|
||||
선형·드론궤적이 라벨과 **동일한 60fps 부드러운 시간축**으로 움직여 끊김 제거. 일시정지 시 `estFrame` 고정 → 정지.
|
||||
|
||||
빌드: `index-kWDkGw69.js` ✓
|
||||
Reference in New Issue
Block a user