GLSL · 24 포인터 좌표와 입력 완화
단계: 상호작용·후처리·비용 평가 · 편집 가능한 예제 · 저장 ID: glsl-step-24
목표와 학습 후 역량
- 입력을 shader 좌표로 변환한다.
- 시간 기반으로 반응을 조절한다.
선수 지식
23단위 결과물과 기록을 이어 사용합니다. 포인터 좌표와 입력 완화 실험에 앞서 이전 입력과 기준 출력을 보관합니다.
핵심 개념과 설명
좌표 변환
pointer의 client 좌표는 canvas 로컬 UV와 다릅니다. bounding rect와 Y 방향을 반영해 shader 입력으로 변환합니다.
시간 기반 완화
입력을 부드럽게 따라가는 보간은 delta time을 고려해야 합니다. 고정 비율 보간은 프레임 속도에 따라 반응 속도가 달라질 수 있습니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- input.js에서 pointer 좌표를 rect 기준 0..1 UV로 변환하세요.
- 현재 값과 목표 값을 분리하고 1-exp(-lambda*dt) 비율로 완화하세요.
- uPointer 주변 파동을 표시하고 resize·DPR 변경·키보드 대체 입력을 확인하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 완화 계수 | lambda=4 | lambda=16 | 최종 위치는 같고 목표에 도달하는 반응이 빨라질 것으로 예상합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- canvas 네 모서리 입력이 예상 UV에 대응한다.
- DPR 변경 뒤 같은 CSS 지점의 중심 효과 위치가 유지된다.
자가 점검
- 스크롤된 페이지에서 client 좌표를 그대로 쓰면 왜 어긋나나요?
- reduced-motion 설정에는 어떤 대체 반응을 제공하나요?
공식 참고
연결된 예제와 실행 범위
브라우저 WebGL ShaderMaterial 실행. 고정 640×360 비교이며 프레임 간격은 GPU 시간과 다릅니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Texel 크기와 필터 · 다음: 분기와 반복의 비용