KBO 피치트레킹 리플레이 개발기
프론트엔드
KBO 피치트레킹 리플레이 개발기
두줄요약
투구 데이터 9개 값과 등가속도 운동식으로 KBO 피치트래킹 3D 리플레이를 구현했습니다.\nWebGL 궤적과 DOM 핫콜드존을 정렬해 투수의 코스 공략을 시각화했습니다.
문제 상황
- 투구별 위치·속도·가속도 9개 값만으로 홈플레이트까지의 3D 궤적 복원 필요
- 타자별 ABS존과 DOM 기반 핫콜드존 위에 3D 투구 궤적의 픽셀 단위 정렬 필요
구조와 흐름
- 등가속도 운동식으로 60개 궤적 점 생성, 깊이 방향 이차방정식의 양의 최소해로 플레이트 도달 시각 산출
- 물리 좌표를 Three.js 씬 좌표로 변환하고, 끝점 3D 좌표를 캔버스 외부 DOM 마커용 픽셀 좌표로 투영
- 타자별 스트라이크존 높이에 맞춘 13칸 핫콜드존과 투구 궤적 결합
선택 이유
- 입체적인 구종 변화와 여러 투구의 전후 관계 표현을 위한 Three.js·React Three Fiber 기반 WebGL 선택
- 빠른 정보 인지를 위한 포수 시점 고정 카메라와 자유 회전 제한
- 텍스트 선명도와 상호작용 처리를 위한 결과 마커의 DOM 렌더링
성능/운영 포인트
- 고정 카메라 환경에서 3D-픽셀 투영값 사전 계산으로 프레임별 재계산 회피
- 실제 구속 기반 도달 시간을 활용한 애니메이션 속도 적용 및 2배 슬로모션 재생
- 글로우·코어 이중 튜브, 색상 보간, Canvas 2D 야구공 텍스처로 중계용 시각 효과 강화
