OffscreenCanvas · 06 프레임 시간
단계: 제어권과 첫 렌더 · 편집 가능한 예제 · 저장 ID: offscreen-canvas-step-06
목표와 학습 후 역량
- 학습 결과: Delta의 역할을 설명한다. 입력 사례: 정상 프레임과 긴 간격 입력.
- 산출물: 동일 경과 시간의 위치 표. 큰 간격 처리 근거를 코드와 연결해 설명한다.
선수 지식
5단위 「좌표 단위의 기준」의 CSS 크기 및 DPR 실습 결과를 준비한다.
핵심 개념과 설명
Delta
프레임 번호만으로 이동하면 주사율에 따라 속도가 달라진다. 시간 차이로 위치를 적분한다.
큰 간격
복귀 후 큰 delta는 점프를 만들 수 있다. 제한 또는 시뮬레이션 재설정 정책을 둔다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 기존 offscreen-canvas-01·02·03은 지원 브라우저에서 사용하는 시작 예제다. 새 단위는 별도 로컬 HTTP 프로젝트의 메인·Worker 파일에서 구현한다. API와 context 지원을 확인하고 이전 실패 시 새 Canvas의 메인 fallback을 제공한다. CSP와 격리는 유지하며 성능 수치를 직접 기록한다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 별도 실습 프로젝트의 src/day-6.js에 Worker requestAnimationFrame 지원을 확인하고 delta 기반 이동을 만든다. 기존 1·14·28단위 예제는 출발점으로만 참고한다.
- 입력 조건: 정상 프레임과 긴 간격 입력. 기준: 없음. 기준 조건에서 실행한 뒤 관찰값과 오류를 notes/day-6.md에 남긴다.
- 변경 변수: delta 제한. 변경값: 상한 적용. 같은 입력 경로로 다시 실행한다. 저장할 산출물: 동일 경과 시간의 위치 표. 확인할 가설: 큰 간격 뒤 급격한 이동이 줄어든다. 실제 결과와 비교해 일치 여부 및 차이의 원인을 기록한다.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| delta 제한 | 없음 | 상한 적용 | 큰 간격 뒤 급격한 이동이 줄어든다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 필수 산출물: 동일 경과 시간의 위치 표. 기준 및 변경 조건 각각의 결과가 있어 총 2조건을 비교할 수 있고, 입력값과 실행 환경을 함께 기록했다.
- 두 조건의 차이에 관한 설명에 다음 개념을 모두 연결했다: Delta, 큰 간격. 예상과 다른 항목은 원인 또는 미해결 이유를 1개 이상 적었다.
자가 점검
- 이번 실습에서 Delta 개념은 어느 처리 단계에 영향을 주는가? 입력 사례: 정상 프레임과 긴 간격 입력.
- 변경 변수: delta 제한. 확인할 가설: 큰 간격 뒤 급격한 이동이 줄어든다. 실제 결과가 가설과 일치했는가? 큰 간격 관점에서 근거를 설명하라.
공식 참고
연결된 예제와 실행 범위
Interactive 프레임 시간 experiment with resource cleanup.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.