- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2.3 KiB
2.3 KiB
POI/측점 라벨 이동 부드럽게 — 라인처럼 매 프레임 연속 포즈로 직접 투영
날짜: 2026-06-24
수정 파일: client/src/components/overlay/StationOverlay.tsx
증상
재생 중 드론 카메라가 움직일 때 POI/측점 라벨 이동이 부드럽지 않음(라인은 부드러움).
원인
- 라인(중심선·궤적): RAF 가 매 프레임
poseAt(estFrame)(연속 보간 포즈)로 직접 투영 → 부드러움. - 라벨: precompute 가 정수 프레임별 화면좌표를 저장하고, RAF 는 baseFrame↔baseFrame+1 사이를 선형 보간 + EMA. 프레임키가 estFrame 과 안 맞으면(밀도/오프셋) 폴백(frac=0, 보간 없음) → 동기 프레임 단위(거친 timeupdate)로 점프 → 덜 부드러움.
조치 — 라벨도 라인과 동일하게 연속 포즈로 직접 투영
precompute 의 역할을 '가시성/겹침 결정'만 으로 한정하고, 좌표는 RAF 가 매 프레임 재투영.
LabelCache저장 형식: 화면좌표(sx,sy)/(x,y) → 월드좌표. · 측점:{title, lat, lon, z}(선로 스냅 좌표). · POI:{title, category, lat, lon, gz}(gz=지면고도; override/최근접 선로표고).- precompute: 기존대로 거리·겹침·클립 판정(화면좌표는 판정용 임시), 통과분만 월드좌표로 저장.
- RAF:
dronePose = poseAt(estFrame)한 번 구해 라인·라벨 공통 사용. · 측점:toCameraCoords(dronePose, lat, lon, z)→pixelFromCamera→ 화면좌표. · POI:pz = 드론높이모드 ? dronePose.alt−지오이드−이격 : gz→ 동일 투영. · 기존smoothStep(이상치 거부+EMA) 유지 → emaAlpha 슬라이더로 추가 평활 가능(기본 1.0=통과). - 정수프레임 보간/labelsB/title 짝짓기/프레임키 의존 제거.
효과
- 라벨이 라인과 동일한 연속 포즈로 움직여 부드럽게 이동(드론 밀도/프레임키 무관).
- 성능: RAF 는 가시집합(소수)만 투영(겹침/최근접은 precompute) → 가벼움.
- 가시집합 멤버십만 baseFrame 기준(최대 ~1프레임 지연)·위치는 연속 → 체감 영향 없음.
검증
npm run build -w client(node20) tsc + vite build 통과.
소요 시간: 약 18분 Context 사용량: input ~580k / output ~9k tokens