- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
34 lines
1.7 KiB
Markdown
34 lines
1.7 KiB
Markdown
# 1배속에서 POI 라벨·팝업 떨림 제거 — 속도 적응형 평활(One Euro 방식)
|
||
|
||
**날짜**: 2026-06-24
|
||
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`
|
||
|
||
## 증상
|
||
빠른 배속에선 POI 라벨/팝업이 부드러운데, **1배속(느린 이동)에선 흔들려 보임**.
|
||
|
||
## 원인
|
||
라벨 화면좌표에 **일정 진폭의 떨림(GPS/투영 잔여 노이즈)**이 있음. 빠른 배속은 프레임당 이동량이
|
||
커서 떨림이 묻히고, 1배속은 이동이 작아 떨림이 도드라짐. 화면 EMA(`emaAlpha`)가 1.0(평활 거의 없음)
|
||
이라 그대로 노출됨.
|
||
|
||
## 조치 — `smoothStep` 을 속도 적응형으로(One Euro 필터 방식)
|
||
고정 alpha → **속도에 따라 가변**:
|
||
- 속도 벡터를 평활(`vx,vy` EMA, β=0.25). 떨림은 매 프레임 방향이 번갈아 → 평활속도≈0,
|
||
실제 이동은 방향 일관 → 평활속도 큼. (떨림과 실제 이동을 속도로 구분)
|
||
- `alpha = min(maxAlpha, MIN(0.12) + (maxAlpha−0.12)·min(1, speed/SPEED_REF(0.01)))`
|
||
- 정지/떨림(speed≈0) → alpha≈0.12 → **강한 평활(1배속 안정)**.
|
||
- 빠른 이동(speed≥0.01) → alpha→maxAlpha(패널 EMA α=1.0) → **즉시 추종(빠른 배속 지연 없음)**.
|
||
- 이상치 거부(REJECT_DIST)·연속한계는 유지. `DispPos` 에 vx/vy 추가.
|
||
|
||
## 효과
|
||
- 1배속·먼 POI(떨림 잘 보임) → 강하게 평활돼 안정.
|
||
- 가까운/빠른 이동 POI → 즉시 추종(지연 없음).
|
||
- 팝업도 라벨 displayed 좌표를 따라가므로 함께 안정.
|
||
- 패널 **EMA α** 슬라이더 = 빠를 때의 추종 상한(기본 1.0).
|
||
|
||
## 검증
|
||
- `npm run build -w client` (node20) tsc + vite build 통과.
|
||
|
||
**소요 시간**: 약 10분
|
||
**Context 사용량**: input ~960k / output ~4k tokens
|