Files
GhiVideo_v4/docs/history/2026-06-23_선궤적-60fps보간-부드럽게.md
b23042andClaude Fable 5 d38b842e8d GhiVideo 소스 복제 — v4 작업 시작 기준
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제.
(node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 14:32:51 +09:00

2.1 KiB

2026-06-23 — 선형/드론궤적 화면갱신 부드럽게 (RAF 60fps 보간 투영)

소요 시간: 약 25분 Context 사용량: input ~210k / output ~26k tokens (추정)

문제

드론 궤적·선형(중심선)이 재생 중 "드드득" 끊김.

원인

  • 라벨(측점/POI): RAF에서 timeRef(60fps 부드러운 시간) 기반 estFrame으로 두 프레임 사이를 매 프레임 보간 → 부드러움.
  • 선/궤적: renderCacheRefcurrentTime(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 제거.
// 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