GLSL · 12 미분과 가장자리 완화
단계: 좌표·질감·시간 표현 · 편집 가능한 예제 · 저장 ID: glsl-step-12
목표와 학습 후 역량
- 화면 변화율을 활용한다.
- 미분의 실행 조건을 지킨다.
선수 지식
11단위 결과물과 기록을 이어 사용합니다. 미분과 가장자리 완화 실험에 앞서 이전 입력과 기준 출력을 보관합니다.
핵심 개념과 설명
화면 변화율
dFdx·dFdy·fwidth는 fragment 주변의 변화율을 추정합니다. 같은 거리 함수라도 해상도에 따라 적절한 전이 폭을 정하는 데 도움을 줍니다.
제어 흐름
미분을 비균일 분기 안에서 사용하면 결과가 정의되지 않을 수 있습니다. 필요한 값을 일관된 흐름에서 먼저 계산합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- aa.glsl에서 원 거리 d의 fwidth를 구하세요.
- 고정 폭 마스크와 max(fwidth(d),작은 양수)를 쓰는 마스크를 나란히 출력하세요.
- 두 해상도와 이동 중의 가장자리를 비교하고 미분 계산 위치를 주석으로 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 전이 폭 | 고정 0.01 | fwidth(d) 기반 | 해상도가 바뀌어도 경계가 대략 픽셀 크기에 맞춰질 것으로 예상합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 미분 함수가 비균일 조건문 밖에 있다.
- 두 해상도의 경계 비교 이미지를 보관한다.
자가 점검
- fwidth가 정확한 기하학적 픽셀 면적인가요?
- 미분을 vertex shader에서 같은 방식으로 쓸 수 있나요?
공식 참고
연결된 예제와 실행 범위
브라우저 WebGL ShaderMaterial 실행. 고정 640×360 비교이며 프레임 간격은 GPU 시간과 다릅니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Texture sampling · 다음: 시간과 주기