[작성자:] 김 형준

작성일자

Ray-Sphere 계산

수식

코드

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

// v = a -> 0
// v = b -> 1 
// v = (a+b)/2 -> 0.5
float remap01(float a, float b, float v) {
  return (v - a) / (b - a);
}

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

  vec3 col = vec3(0);
  vec3 Ro = vec3(0);
  vec3 Rd = normalize(vec3(uv.x, uv.y, 1.));
  vec3 S = vec3(0, 0, 3);
  float R = 1.;

  float tp = dot(S - Ro, Rd);
  vec3 Ptp = Ro + Rd * tp;
  float y = length(S - Ptp);
  
  if(y < R) {
    float x = sqrt(R*R - y*y);
    float t1 = tp - x;
    float t2 = tp + x;

    float c = remap01(S.z, S.z - R, t1);
    col = vec3(c);
  }
  
  gl_FragColor = vec4(col, 1.0);
}

결과

작성일자

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);
}

끝.

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