GLSL · 01 Vertex와 Fragment
단계: 셰이더 언어와 데이터 흐름 · 편집 가능한 예제 · 저장 ID: glsl-01
목표와 학습 후 역량
- 셰이더 단계의 책임을 설명한다.
- 버전별 문법과 오류를 구분한다.
선수 지식
벡터 연산과 WebGL 프로그램 생성
핵심 개념과 설명
단계 역할
vertex shader는 clip 위치와 다음 단계에 전달할 값을 계산합니다. fragment shader는 보간된 입력에서 픽셀 후보의 출력을 만듭니다.
버전 계약
WebGL1의 GLSL ES 1.00과 WebGL2의 3.00 문법은 구분해야 합니다. 3.00에서는 첫 줄의 #version 300 es와 in/out 및 명시적인 fragment 출력을 사용합니다.
실습 준비
기존 glsl-01 미리보기는 출발점입니다. 이후 과제 전체의 구현이나 검증을 대신하지 않습니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- main.js에서 webgl2 context를 만들고 vertex.glsl·fragment.glsl 소스를 분리하세요.
- 위치만 반환하는 vertex와 고정색 fragment를 compileShader·linkProgram으로 연결하세요.
- 한 소스의 문법 오류와 두 단계의 인터페이스 오류를 따로 넣고 로그를 비교하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| fragment 색 | 빨강 | 초록 | 정점 위치는 그대로이고 출력 색만 바뀔 것으로 예상합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 컴파일과 링크 로그를 별도로 출력한다.
- GLSL ES 3.00 소스에서 attribute·varying·gl_FragColor를 혼용하지 않는다.
자가 점검
- fragment 하나가 화면 픽셀 하나와 언제 다를 수 있나요?
- 두 shader가 각각 컴파일되어도 링크가 실패하는 이유는 무엇인가요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.