Frontory

코드 편집 · 실습 · 필기 열기 →

GLSL · 05 좌표 공간 추적

시리즈 목차 · 전체 기술 지도

단계: 셰이더 언어와 데이터 흐름 · 편집 가능한 예제 · 저장 ID: glsl-step-05

목표와 학습 후 역량

선수 지식

4단위 결과물과 기록을 이어 사용합니다. 좌표 공간 추적 실험에 앞서 이전 입력과 기준 출력을 보관합니다.

핵심 개념과 설명

공간 구분

모델·월드·뷰·clip 좌표는 같은 점을 다른 기준에서 표현합니다. 서로 다른 공간의 벡터를 연산하면 그럴듯하지만 틀린 결과가 나올 수 있습니다.

나눗셈

gl_Position은 clip 좌표이며 원근 나눗셈은 이후 단계에서 일어납니다. shader에서 미리 나누면서 w까지 잘못 처리하지 않도록 합니다.

실습 준비

예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

실습 과제

  1. spaces.glsl에서 model·view·projection 행렬을 순서대로 적용하세요.
  2. 원점·X축 표식·카메라 앞 점의 각 공간 좌표를 CPU에서 출력하세요.
  3. 행렬 하나씩 끄며 화면 이동과 표의 값을 연결하세요.

관찰할 변수

변수기준 조건바꿀 조건예상할 변화·검증 가설
model 이동x=0x=1월드 위치와 clip 위치가 바뀌지만 원래 정점 데이터는 유지될 것으로 예상합니다.

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

완료 조건

자가 점검

  1. 방향 벡터와 위치 벡터의 w는 왜 다른가요?
  2. clip 좌표에서 w가 0에 가까우면 어떤 문제가 생기나요?

공식 참고

연결된 예제와 실행 범위

예제 원본 · 실행 환경과 제한

브라우저 WebGL ShaderMaterial 실행. 고정 640×360 비교이며 프레임 간격은 GPU 시간과 다릅니다.

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.

다음 학습

이전: Attribute와 보간 · 다음: Uniform 조회와 갱신

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

코드 편집 · 실습 · 필기 열기 →