14 · 인터랙티브 셰이더 복습
2주 차 / 원문 Day 14 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
UI 입력과 uniform을 연결한 작은 효과를 완성하고 설명한다.
선수 지식
08~13, React 입력 이벤트.
핵심 개념과 설명
UI 슬라이더의 값은 JavaScript에서 검증해 uniform으로 전달합니다. 화면의 숫자와 실제 shader 값이 일치해야 하며, UI를 만드는 것만으로 효과가 구현되었다고 보지 않습니다.
하나의 효과에 너무 많은 변수를 노출하면 원인을 추적하기 어렵습니다. 먼저 진폭·속도 두 개와 정지 기능으로 제한하고, 오류·리사이즈·cleanup을 포함해 재현 가능한 결과를 남깁니다.
학습 후 얻을 역량
- UI 입력과 uniform을 연결한 작은 효과를 완성하고 설명한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 파동에 진폭·속도 입력과 정지를 연결합니다.
- 최솟값·기본값·최댓값에서 UI 값과 실제 결과를 비교합니다.
- 짧은 시연 순서와 코드 설명, 예상과 다른 결과를 정리합니다.
관찰할 변수
진폭, 속도, viewport. 기본 geometry·카메라를 고정합니다.
완료 조건
- 입력 변경이 uniform과 화면에 반영된다.
- 리사이즈와 정리 동작을 확인했다.
- 효과의 데이터 흐름을 설명한다.
자가 점검 질문
- UI 숫자는 바뀌는데 화면이 안 바뀌면 어느 경로를 확인하나요?
- 실험 변수를 줄이면 무엇을 얻나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: ShaderMaterial 통합 · 다음: NeRF와 3DGS 비교
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 14-shader-review
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.