GLSL · 22 Framebuffer와 화면 패스
단계: 상호작용·후처리·비용 평가 · 편집 가능한 예제 · 저장 ID: glsl-step-22
목표와 학습 후 역량
- 다중 pass를 구성한다.
- 읽기와 쓰기 대상을 분리한다.
선수 지식
21단위 결과물과 기록을 이어 사용합니다. Framebuffer와 화면 패스 실험에 앞서 이전 입력과 기준 출력을 보관합니다.
핵심 개념과 설명
중간 출력
framebuffer의 texture에 장면을 렌더하면 다음 pass가 그 결과를 입력으로 사용할 수 있습니다. 현재 쓰는 attachment를 동시에 sampling하는 피드백은 피합니다.
출력 크기
각 pass의 viewport는 대상 texture 크기에 맞춰야 합니다. 화면 크기와 중간 texture 크기를 다르게 사용할 때 특히 명시합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- post.js에 color texture와 framebuffer를 만들고 완전성을 검사하세요.
- 장면을 중간 framebuffer에 그린 뒤 기본 framebuffer의 전체 화면 삼각형에서 샘플링하세요.
- 중간 해상도를 절반으로 바꾸고 viewport를 각각 설정하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 중간 해상도 | 화면과 같음 | 가로세로 절반 | 후처리 입력 세부가 줄고 픽셀 처리량도 줄 것으로 예상합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- checkFramebufferStatus가 완전성을 확인한다.
- 각 pass에서 읽는 texture와 쓰는 attachment가 겹치지 않는다.
자가 점검
- 마지막 pass의 viewport를 갱신하지 않으면 무엇이 보이나요?
- 화면 복사에 사각형 대신 큰 삼각형을 쓰는 이유는 무엇인가요?
공식 참고
연결된 예제와 실행 범위
브라우저 WebGL ShaderMaterial 실행. 고정 640×360 비교이며 프레임 간격은 GPU 시간과 다릅니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Alpha와 합성 상태 · 다음: Texel 크기와 필터