Fragment Shader에서 3D 카메라

시작은 다음과 같다.

uniform vec3 uResolution;
uniform float uTime;
uniform vec4 uMouse;

void main() {
   ?
}

프레그먼트의 uv 좌표는 좌측하단이 원점인데, 원점을 화면 중심으로 잡기 위해 다음 코드가 필요하다.

void main() {
  vec2 uv = gl_FragCoord.xy / uResolution.xy;
  uv -= .5;
  uv.x *= uResolution.x / uResolution.y;

  float t = uTime; // 그냥 흘러가는 시간값
}

프레그먼트에서 무언가를 의미있게 표현하기 위해서는 그 무언가가 픽셀에서 얼마나 떨어져있는지의 거리값을 매우 의미있게 사용한다. 이를 위해 Ray가 필요한데, Ray는 시작점(ro)과 방향(rd)이 중요하다.

void main() {
  ..

  float t = uTime; // 그냥 흘러가는 시간값

  // Left-Hand (Z축은 모니터에서 사람을 향하는 방향이 마이너스임)
  vec3 ro = vec3(3. * sin(t), 1., -3. * cos(t)); // Ray의 시작점(카메라의 위치), 일단 시간에 따라 Y축으로 회전시켜본다.
}

Ray의 시작점인 ro는 보이는데, 방향인 rd는 아직 보이지 않는다. rd를 정하기 위해 카메라 개념을 이용한다.

void main() {
  ...

  vec3 ro = vec3(3. * sin(t), 1., -3. * cos(t)); // Ray의 시작점(카메라의 위치), 일단 시간에 따라 Y축으로 회전시켜본다.

  vec3 lookAt = vec3(.0); // 카메라가 바라보는 지점
  vec3 f = normalize(lookAt - ro); // 카메라가 바라보는 방향 벡터
  vec3 u = vec3(0,1,0); // 카메라의 Up 벡터 
  vec3 r = normalize(cross(u, f)); // 카메라의 Right 벡터 

  float zoom = 1.; // 확대 배율
  vec3 c = ro + f * zoom;
  vec3 i = c + uv.x * r + uv.y * u; // 교차하는 지점

  vec3 rd = normalize(i - ro); // Ray의 방향 벡터

이제 정육면체의 구성 정점 8개를 프레그먼트에 시각화하기만 하면 된다.

void main() {
  ...

  vec3 rd = normalize(i - ro); // Ray의 방향 벡터

  float d = 0.;  
  float off = .5;
  d += drawPoint(ro, rd, vec3(0.-off, 0.-off, 0.-off));
  d += drawPoint(ro, rd, vec3(0.-off, 0.-off, 1.-off));
  d += drawPoint(ro, rd, vec3(0.-off, 1.-off, 0.-off));
  d += drawPoint(ro, rd, vec3(0.-off, 1.-off, 1.-off));
  d += drawPoint(ro, rd, vec3(1.-off, 0.-off, 0.-off));
  d += drawPoint(ro, rd, vec3(1.-off, 0.-off, 1.-off));
  d += drawPoint(ro, rd, vec3(1.-off, 1.-off, 0.-off));
  d += drawPoint(ro, rd, vec3(1.-off, 1.-off, 1.-off));

  gl_FragColor = vec4(d);
}

drawPoint는 포인트를 그리는 함수이고 다음과 같다.

float drawPoint(vec3 ro, vec3 rd, vec3 p) {
  float d = distLine(ro, rd, p);
  d = smoothstep(.04, .03, d);
  return d;
}

distLine은 ro와 rd로 정의되는 Ray에서 프로그먼트 좌표 간의 거리를 얻는 함수인데 다음과 같다.

float distLine(vec3 ro, vec3 rd, vec3 p) {
  return length(cross(p - ro, rd)) / length(rd);
}

끝.

위의 코드 작성을 위해 학습한 내용