KBO 피치트레킹 리플레이 개발기
KBO 피치트레킹 리플레이 개발기
투구 데이터 9개 값과 등가속도 운동식으로 KBO 피치트래킹 3D 리플레이를 구현했습니다.\nWebGL 궤적과 DOM 핫콜드존을 정렬해 투수의 코스 공략을 시각화했습니다.
#React#Three.js
300

투구 데이터 9개 값과 등가속도 운동식으로 KBO 피치트래킹 3D 리플레이를 구현했습니다.\nWebGL 궤적과 DOM 핫콜드존을 정렬해 투수의 코스 공략을 시각화했습니다.

캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.

Canvas ImageData의 색상 수집 작업을 다중 웹 워커로 분할해 처리 시간을 줄였습니다. 메인 스레드 블로킹을 완화해 UI 갱신과 다른 스크립트 지연을 줄였습니다.

Canvas 이미지의 RGBA 배열에서 고유 색상을 추출하는 작업을 웹 워커로 분리했습니다. 다중 워커로 작업을 나눠 메인 스레드 블로킹과 UI 대기시간을 줄였습니다.


기가픽셀 병리 슬라이드의 AI 예측 결과를 Canvas 기반으로 시각화한 방식을 소개했습니다. Tissue 사전 렌더링과 Structure·Cell 공간 인덱싱으로 렌더링 성능을 확보했습니다.