Files
GhiVideo_v4/docs/history/2026-06-23_드론궤적-연속선-부드럽게.md
T
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

33 lines
1.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 2026-06-23 — 드론 궤적 끊김 제거(연속 폴리라인)
**소요 시간**: 약 10분
**Context 사용량**: input ~165k / output ~19k tokens (추정)
---
## 요청
드론 궤적이 **끊겨(구슬처럼) 보임** → 부드럽게.
## 원인
- 기존: `segFrom`이 점 쌍마다 **조각 선분**을 만들고, RAF에서 조각마다 `moveTo`/`lineTo` → 각 조각이 별도 서브패스라 **연결부가 둥글게 안 이어짐**.
- 선이 가늘고(2px, α0.55) 노란 점(r3)이 도드라져 **점선/구슬**처럼 보였다.
## 해결 — `StationOverlay.tsx`
1. **데이터 일원화**: `RenderCache`에서 `dronePathSegs` 제거, **진행방향 순서 점 배열 `dronePathPts`** 만 유지. 빌드 루프는 카메라 앞쪽(`Zc>=CLIP_Z`) 점만 순서대로 수집(`continue`로 뒤쪽 제외, `MAX_FWD` break 유지). `STEP 5→3`(더 촘촘), `BACK 150→60`.
2. **RAF: 하나의 연속 폴리라인**으로 그림 — `moveTo(pts[0])` 후 전부 `lineTo`, `lineJoin/lineCap='round'`.
- 어두운 밑선(width5, 검정 α0.35·dpa) + 본선(width3, 하늘색 dpa) 2겹 → 배경 위에서도 끊김 없이 선명.
3. **점**: r3→**r1.8**, 4개마다 1개만 → 선 흐름 방해 없이 측정점 흔적만.
```ts
// 빌드: 앞쪽 점만 순서대로
for (let i=lo;i<=hi;i+=STEP){ const cc=...;
if((cc.fwd??0)>MAX_FWD) break;
if(cc.Zc<CLIP_Z) continue;
const p=pixelFromCamera(cc,params); dronePathPts.push([p.pxRaw,p.pyRaw]); }
// RAF: 연속선
ctx.lineJoin=ctx.lineCap='round';
ctx.beginPath(); ctx.moveTo(pts[0]); for(k=1..) ctx.lineTo(pts[k]); ctx.stroke();
```
빌드: `index-C3L5Fc0X.js`