Rasterization 과정부터 Texture mapping까지의 설명 포스트입니다.

Projection

이전까지는 objects와 eye 좌표를 3차원에서 다루는 것에 집중했다면, eye로 봤을 때의 2D image로 나타내는 과정을 알아보겠습니다. camera가 eye frame $\overrightarrow{\mathbf{e}}^{t}$의 origin에 위치해있으며, eye coordinates의 negative $z$축을 향해 카메라가 바라보고 있다고 가정하겠습니다. 또한, eye coordinates의 point를 $[x_{e},y_e,z_e,1]^t$로 표현합니다.

Pinhole Camera

가장 구현인 단순한 카메라는 pinhole camera입니다. 빛이 film plane(image plane)으로 올 때 대부분은 불투명한 표면 $z_{e}=0$에 의해 막힙니다. 하지만 surface 센터(at the point with eye coordinates $[0,0,0,1]^t$에 아주 작은 구멍을 뚫어 film plane에 light rays가 point를 지나 기록되게 합니다.

Flipping

이때 film plane이 뒤집히는 것을 방지하기 위해, pinhole 앞에 flim plane $z_{e}=-1$이 위치하도록 합니다.

Basic Mathmatical Model

pinhole camera를 수학적으로 모델링하는 과정입니다. scene 내의 point $\tilde{p}$를 eye coordinates $[x_e,y_e,z_e,1]^t$에 두겠습니다. $\tilde{p}$로부터 온 ray가 film plane $[x_n,y_n]^t$에 닿으면 $x_n=\frac{-x_e}{z_{e}}, y_n=\frac{-y_e}{z_{e}}$에 해당 포인트가 위치합니다. (두 닮은 삼각형의 삼각비로 간단하게 구해집니다. $x_n:x_e=-1:z_e$의 비율입니다. $y$축도 동일합니다.)

해당 표현을 행렬 표현으로 나타내면 다음과 같습니다:

• $-$: don't care
  위의 행렬이 projection matrix가 됩니다. 또한 행렬 곱의 raw output인 $\begin{bmatrix} x_e\\y_e \\ z_{e} \\ 1 \end{bmatrix}$은 clip coordinates가 됩니다. $w_n=w_c$는 새로운 변수가 되며, w-cooridnate로 불립니다.

normalized device coordinates

pinhole camera의 output coordinates를 normalized device coordinates라고 합니다. NDC는 image의 points를 pixels의 수와 상관 없이 표현합니다. 또한, 모든 이미지 데이터를 canonical space $-1\le x_{n}\le+1, -1\le y_{n}\le+1$에 저장한 후에, screen window에 매핑합니다.

Scales

우리는 또한, 초점 거리를 $z_{e}=n$으로 증가시킬 수 있습니다. (lens를 zoom하는 것과 동일합니다.) 이때, normalized coordinates 좌표는 $x_n=\frac{x_en}{z_{e}}, y_n=\frac{y_en}{z_{e}}$이 됩니다. ($n$은 어떤 음수 값입니다.)

위의 식을 행렬로 표현하면 다음과 같습니다. 즉, original camera의 시작점을 $-n$ scaling하는 것과 동일합니다.

scale은 vertical angular field of view로 결정될 수 있습니다. 위의 삼각비를 고려하여, $-n=\frac{1}{\tan(\frac{\theta}{2})}$로 아래와 같이 표현할 수 있습니다.

Dealing with aspect ratio

만약 window의 높이보다 넓이가 더 크다면, 우리는 수평적으로 view를 줄여야 합니다. (반대의 경우는 반대로 작용합니다.) 따라서, aspect ratio $\alpha=\frac{width}{height}$를 고려하여 matrix를 표현합니다.

따라서, window가 wide할 경우, horizontal FOV를 더 남기고, window가 tall인 경우에는 더 적은 horizontal FOV를 가집니다.

Shifts

image의 센터가 아닌, 다른 곳을 crop하는 경우입니다.

shifts를 통해 near plane이 특정됩니다.

Frustum

위의 사각형으로 window를 표현하는 경우에 matrix 표현은 아래와 같습니다.

Summary

위의 과정은 최종적으로, Camera로부터 image plane을 표현하기 위한 Projection 과정입니다. 위의 그림에서 처럼, $(c_{x},c_{y})$에 위치한 Point $\mathbf{p}$가 (u,v) 좌표계로 매핑됩니다.

• $c_{x}, c_{y}$: camera shift
• $\rightarrow$: normalization
• $w_{c}=w_{n}=-z_{e}$: w-coefficient
• $n<0$: scale coefficient
  3D -> 2D mapping 행렬입니다.

Homogeneous Coordinates

homogeneous 좌표계의 성질입니다.
1. 두 선은 하나의 unique point에서만 만납니다.
- 해당 point는 infinite일 수 있습니다.
2. 두 점은 하나의 unique line을 결정합니다.
- 해당 line은 infinity에 놓여 있을 수 있습니다.

Depth

다음은, object A가 object B보다 앞에 있을 때, object B로부터의 빛이 A에 의해 막히는 물리적 현상을 카메라에서 모델링하는 과정입니다. 이번에 살펴볼 방법은, rasterization에서 사용되는 z-buffer입니다. 해당 방법은 각 픽셀의 frame buffer에 color 뿐만 아니라 current depth 정보를 함께 저장합니다. 각 삼각형을 그릴 때 depth 정보를 비교하여 rewriting합니다.

z-testing은 fragment shading 전에 수행됩니다.

z-buffer

• $w_n=w_c=-z_e$
• $s_{x}> 0, s_{y}>0$
  z-buffer를 고려하여 3D projective transformation을 표현하면 다음과 같습니다. 이때 $z_nw_n=z_c=1$이므로, z-buffer에 사용하는 값은 $z_{n}=\frac{-1}{z_{e}}$입니다. 해당 z-buffer를 사용해도 되는 이유는 두 포인트의 각 $z_{e}$값에 대한 부등식 $z_{e}^{2}<z^{1}_{e}$이 $z_{n}$에서도 $\frac{-1}{z_{e}^{2}}<\frac{-1}{z_{e}^{1}}$와 같이 유지되기 때문입니다. 즉, projective 변환 적용 후에도 object의 depth 순서가 유지됩니다.

Projective transform

Projective transform은 지금까지 살펴본 것처럼, eye coordinates 포인트들을 normalized device coodinates로 옮기는 과정입니다. 하지만, linear하지도, affine하지도 않습니다.
위의 figure처럼, distances가 보존되지 않는 것을 확인하실 수 있습니다. 또한, film plane의 evenly spaced pixel이 geometry(3D space)에서는 evenly spaced pixel이 아니게 됩니다.
대신 Projective transform은 co-linearity와 co-planarity 성질을 가집니다. 추가적으로, NDC에서는 evenly spaces pixels이 유지됩니다. 즉, linear interpolation이 가능합니다.

Co-linearity

• three or more points가 하나의 선에 놓여있을 때, 변환된 points도 어떤 하나의 선에 놓입니다.
• $|(\mathbf{p}_{2}-\mathbf{p}_{1})\times (\mathbf{p}_{1}-\mathbf{p}_{3})|=0$ -> 세 점이 같은 선에 놓여 있으므로, 두 선의 기울기는 일치.

Co-planarity

• 3D projective transform 적용 시, planar objects in 3D를 planar objects in 3D로 mapping
• 예를 들어, 한 triangle in 3D에 projective 변환 시, 삼각형의 $z_{n}$ 값은 $(x_{n},y_{n})$의 affine function입니다.
• $z_{n}=ax_{n}+by_{n}+c$

Frustum

eye로부터 너무 멀리 있는 point $z_{e}=n$의 경우, $z_{n}=\frac{1}{-z_{e}}$의 값이 0으로 수렴해버립니다. 또한, 8bit의 값으로 $z_{e}$를 표현하는 것이 불가능한 경우도 존재합니다. 따라서, $\alpha, \beta$ 값을 지정하여, near plane과 far plane을 지정합니다.

Near and Far

$\alpha=\frac{f+n}{f-n}, \beta=- \frac{2fn}{f-n}$와 같이 두 값을 지정하여, 어떤 $z_{e}=f$의 point든지 $n<z_{e}<-1$ 사이에서 결정되게 합니다. near/far 범위에서 벗어나면 해당 포인트는 무시됩니다.

Projection Matrix in code (ver1)

static Matrix4 makeProjection(const double fovy, const double aspectRatio, const double zNear, const double zFar) {
	Matrix4 r(0);
	const double ang = fovy * 0.5 * CS380_PI/180;
	const double f = std::abs(std::sin(ang)) < CS380_EPS ? 0 : 1/std::tan(ang);
	if (std::abs(aspectRatio) > CS380_EPS)
	  r(0,0) = f/aspectRatio;  // 1st row
	
	r(1,1) = f;    // 2nd row
	
	if (std::abs(zFar - zNear) > CS380_EPS) { // 3rd row
	  r(2,2) = (zFar+zNear) / (zFar - zNear);
	  r(2,3) = -2.0 * zFar * zNear / (zFar - zNear);
	}
	
	r(3,2) = -1.0; // 4th row
	return r;
}

• use field of view with angle.
• identical with third~fourth row to ver2.

ver2

static Matrix4 makeProjection(
	const double top, const double bottom,
	const double left, const double right,
	const double nearClip, const double farClip) {
	Matrix4 r(0);
	// 1st row
	if (std::abs(right - left) > CS380_EPS) {
	  r(0,0) = -2.0 * nearClip / (right - left);
	  r(0,2) = (right+left) / (right - left);
	}
	// 2nd row
	if (std::abs(top - bottom) > CS380_EPS) {
	  r(1,1) = -2.0 * nearClip / (top - bottom);
	  r(1,2) = (top + bottom) / (top - bottom);
	}
	// 3rd row
	if (std::abs(farClip - nearClip) > CS380_EPS) {
	  r(2,2) = (farClip+nearClip) / (farClip - nearClip);
	  r(2,3) = -2.0 * farClip * nearClip / (farClip - nearClip);
	}
	r(3,2) = -1.0;
	return r;
}

• representation with Near and Far.
• use window (upper/lower) width/height-4 values.

Rasterization (From Vertex to Pixel)

triangle의 3 vertices를 구하고 나면, 해당 vertices는 모두 vertex shader로 들어가게 됩니다. 이때 Rasterization은 1️⃣ triangle이 screen 어디에 위치해야 하는지, 2️⃣ 어떤 pixels가 삼각형 안에 위치해야 하는지, 3️⃣ varing variable data의 적절한 interpolated 값을 정하는 역할을 합니다. 해당 과정을 거친 후에, fragment shader는 final color를 정하는 역할을 수행합니다.

Shaders

Vertex shader

• 모든 vertex position의 object 좌표들을 얻습니다.
• 해당 좌표들을 eye coordinates와 vertex의 normal 좌표들로 반환합니다.

vNormal = vec3(uNormalMatrix * vec4(aNormal, 0.0));

// send position (eye coordinates) to fragment shader
vec4 tPosition = uModelViewMatrix * vec4(aPosition, 1.0);
vPosition = vec3(tPosition);
gl_Position = uProjMatrix * tPosition;

• Modelview matrix $E^{-1}O$로 object position을 eye position으로 변환합니다.
• projection matrix로 eye coordinates에서 normalized coordinates로 변환합니다. $PE^{-1}Oc$

Fragment shader (pixel color)

vec3 tolight = normalize(uLight - vPosition);
vec3 tolight2 = normalize(uLight2 - vPosition);
vec3 normal = normalize(vNormal);

float diffuse = max(0.0, dot(normal, tolight));
diffuse += max(0.0, dot(normal, tolight2));
vec3 intensity = uColor * diffuse;

gl_FragColor = vec4(intensity, 1.0);

• eye coordinates의 position 정보와 normal 정보를 vertex shader로부터 받습니다.
• normal과 light가 Object로 들어오는 벡터의 내적으로 diffuse를 구합니다.
• 해당 fragment shader에서는 BRDF 중 diffuse만 구현되어 있습니다.
• uColor는 3개의 정점으로부터 보간된 color 값입니다.
• final color 값을 저장합니다.
• FragColor의 네 번째 값은 opacity입니다.

Clipping

만약 vertex가 우리 뒤-eye 뒤에 위치-에 있을 경우, 해당 vertex를 사영하면 잘못된 지역이 window에 그려집니다. 이때 우리는 image의 bottom(figure에서 오렌지색 부분)의 값으로 interpolation해야 합니다. 즉, clipping은 viewing frustum 밖에 있는 triangle을 다루는 부분입니다. viewing frustum의 six faces를 통해 geometry를 slice up하여 문제를 해결합니다. six faces는 다음과 같습니다: near plane, far plane, image boundaries(left, right, top and bottom).

Clip coordinates

clip coordinates를 eye space로 설정하면, camera parameters를 필요로 하게 되고(비효율적) normalized device cooridnates로 설정하게 되면 $w_c$로 나눌 때 해당 값이 0인 경우 문제가 발생합니다.

따라서, clip coodinates의 조건은 위와 같이 설정되고, Eye coordinates(projected) -> clip coordinates -> normalized device coordinates (NDCs)의 과정으로 픽셀이 표현됩니다.즉, clipping 이후에 $w_c=-z_e$로 나누어 NDC 값을 얻습니다.

Backface Culling

solid 물체를 그릴 때, 우리는 각 triangle의 앞면만 보게 됩니다. 따라서 삼각형의 세 정점을 그릴 때 피사체의 앞면을 보는 경우에 counterclockwise로 신호를 얻어 backface culling을 실행할 수 있습니다.

Math of Backface Culling

• $\overrightarrow{a}=\tilde{p}_3-\tilde{p}_2$
• $\overrightarrow{b}=\tilde{p}_1-\tilde{p}_2$
• $\overrightarrow{c}=\ \overrightarrow{a} \times \overrightarrow{b}$

두 벡터의 외적인 $\overrightarrow{c}$의 방향으로 피사체가 정면을 바라보는지 확인할 수 있습니다. 만약 세 정점이 counterclockwise인 경우 해당 벡터가 $+z_n$방향에 놓이게 됩니다. (frontface)

Viewport

해당 단계에서는 vertices를 window 안에 위치시키는 것입니다. [-1, -1] ~ [1, 1] 범위에 존재하는 NDC 값을 [-0.5, -0.5] ~ [W-0.5, H-0.5]에 위치시키는 것입니다. 따라서 viewport의 범위가 (0,0,W,H)가 됩니다.
세 번째 행 값은 near/far field를 고려하여 설정됩니다. NDC에서 -1(far)<z<1(near)인 점을 고려하여, window에서의 z는 0과 1 사이 값을 갖게 합니다.

Math of rasterization

위의 window coordinates에서의 세 정점으로부터 rasterizer는 어떤 픽셀 centers가 triangle 안에 있는지 찾아야 합니다. (per primitive) 삼각형의 각 변을 edge functions $e=ax_w+by_w+c$로 두어, 세 edge function이 모두 positive일 때 pixel이 triangle 안에 있는 것으로 파악할 수 있습니다.

또한, rasterization의 Input으로 각 vertex는 임의의 데이터를 가집니다. 해당 데이터는 $z_w$ 값을 포함합니다. (varing variables과는 다릅니다.) vertex의 값을 삼각형 내에서 선형적으로 보간하는 것도 rasterizer의 역할입니다.

Varing Variables

varing variables는 vertex shader와 fragment shader 간의 interface를 제공합니다. primitives(triangles)가 모이고 fragments가 연산될 때, 각 fragment는 variables의 집합을 갖게 됩니다-해당 variables는 보간된 후에 fragment shader에 제공됩니다.
예를 들어, fragment에 제공되는 color 값은 3 vertices의 colors 값의 보간된 값입니다.

Barycentric Interpolation

triangle에서 point $p$를 보간하는 방법은 다음과 같습니다:

• 기존 보간법과 동일하지만, 넓이의 비율을 고려해야 합니다.
• percent red = are of red / total area
• 다른 색상도 동일

따라서, $p$의 수식은 다음과 같이 정의됩니다-$p=(A_1x_1+A_2x_2+A_3x_3)/A$.
하지만 위의 보간 방법을 우리는 window coordinates에 바로 적용할 수 없습니다. projective 과정을 거친 좌표들은 (w로 나누어졌기 때문에) 비선형성 값을 갖기 때문입니다. 즉, 보간을 직접적으로 적용했을 때, 피사체를 왜곡하여 표현하게 됩니다.

3D Affine

하지만 우리는 $(x_o,y_o,z_o)$의 3D 좌표를 갖는 triangle에 대해 보간해야 하며-보간 시 affine 특성을 유지해야 합니다.-texture coordinates $[x_t,y_t]$가 unique interpolant functions를 갖도록 해야 합니다.
이때 $v(x,y,z)=ax+by+cz+d$의 3D affine 함수를 flat triangle에서 사용하기 위해 $z$를 $(x,y)$에 대한 affine function으로 표현합니다.

• $M$: modelview matrix: object coord -> eye coord
• $P$: projective matrix: eye coord -> NDC
  위의 변환 과정을 떠올려보면, w division 과정에 의해 NDC나 window coord에서는 varing variables가 affine하지 않는다는 것을 확인할 수 있습니다.

이때 $v$ 함수가 $(x,y,z)$에서 affine하도록 homogenous에서 보간이 이뤄지도록 합니다. 위의 과정을 적용하여, 적절한 값들 $e$~$l$을 통하여 affine 변환이 이뤄지게 합니다.

최종적으로 $\frac{v}{w_{n}}$과 $\frac{1}{w_{n}}$이 normalized device coordinates의 affine functions이 되는 것을 확인하실 수 있습니다.

Overviews of Rasterization

• each vertex에 대해 vertex shader가 clip coordinates를 계산하고, varying variables를 계산합니다.
• clipping을 각 triangle에 적용합니다-새로운 정점들이 생성될 수 있습니다. linear interpolation이 clip coordinates에 적용됩니다.
• 각 vertex와 varying variable $v$에 대해 internal variable $\frac{v}{w_{n}}$과 $\frac{1}{w_{n}}$을 생성합니다.
• $x_n=\frac{x_c}{w_{c}},y_n=\frac{y_c}{w_{c}},z_n=\frac{z_c}{w_{c}}$와 같이 division이 계산됩니다. 즉, normalized device coordinates로 vertex를 옮깁니다.
• 각 vertex에 대해, NDC를 window coordinates로 변환합니다.
• $[x_w,y_W]$좌표들을 triangle을 screen에 나타내는 데에 사용합니다.
• triangle 안에 있는 픽셀들에 대해 (edge functions의 positive pixels) linear interpolation을 적용합니다. 해당 보간으로 $z_w,\frac{v}{w_{n}},\frac{1}{w_{n}}$의 보간된 값을 얻습니다.
• 각 픽셀에 대해 보간된 $z_w$ 값을 z-buffering에 사용합니다.
• 각 픽셀과 모든 varying variables에 대해 division을 수행하여 varying variable $v=(\frac{v}{w_{n}})/(\frac{1}{w_{n}})$를 얻습니다.
• varying variable $v$를 fragment shader에 전송합니다.

Materials

다양한 물체들에 의해 빛이 반사되며, 이를 fragment shader에서 최대한 처리하는 것이 목표입니다. Uniform variabels를 통하여 light sources의 위치 값을 표현하여 fragment shader의 input으로 넣어주게 됩니다. 또한, Varing variables로 eye frame의 point와 normal 정보를 input으로 넣어줍니다. 두 material parameters로 fragment shader가 어떻게 빛이 물체에서 반사되는지 고려하여 image의 color를 정합니다.

실제로는 반사되는 여러 빛들도 고려해야 하지만, 해당 파트에서는 single point light source만 고려하겠습니다.

PVC blob

plastic에서의 light scattering을 고려하는 파트입니다. plastic에서는 빛이 bounce되는 부분에서 더 밝아지는 현상을 띕니다. (Figure에서 빨간 부분일 수록 밝은 부분입니다.)
mirror reflection과 동일하게 고려하여, bounce vector $B(\overrightarrow{w})=2(\overrightarrow{w} \cdot \overrightarrow{n})\overrightarrow{n} - \overrightarrow{w}$로 구할 수 있습니다.
1. 임의의 벡터 $\overrightarrow{w}$를 unit normal vector $\overrightarrow{n}$에 정사영합니다: $(\overrightarrow{w} \cdot \overrightarrow{n})\overrightarrow{n}$
2. 해당 벡터를 두 배로 늘려줍니다.
3. $-\overrightarrow{w}$만큼을 더하여 bounce vector를 구해줍니다.

Diffuse

diffuse 물체는 위에서 빛과 닿으면 더 밝고, grazing angle에서 빛이 닿으면 더 어둡습니다. 해당 특징을 고려하여 surface normal과 light vector 간의 $\cos\theta=\overrightarrow{n}\cdot \overrightarrow{l}$을 diffuse 계수로 사용합니다.

Specularity

diffuse하지 않은 물체들도 존재합니다. 이때는 light의 bounce vector $B(\overrightarrow{l})$을 계산한 후에 $\overrightarrow{v}$와의 각도를 계산하는 방법으로 color 값을 계산합니다.

Halfway vector

이를 간단하게 구현하기 위해 halfway vector를 도입합니다. halfway vector와 normal과의 각도 $\cos\phi(\overrightarrow{h}\cdot \overrightarrow{n})$을 계산하는 방법으로 계산됩니다.

uniform vec3 uLight;
in vec3 vColor;
in vec3 vNormal;
in vec4 vPosition;
out fragColor;
void main() {
	vec3 toLight = uLight - vec3(vPosition);
	vec3 toV= -normalize(vec3(vPosition));
	toLight = normalize(toLight);
	vec3 h = normalize(toV + toLight);
	vec3 normal = normalize(vNormal);
	float specular = pow(max(0.0, dot(h, normal)), 64.0); 
	float diffuse = max(0.0, dot(normal, toLight));
	vec3 intensity = vec3(0.1,0.1,0.1) + vColor * diffuse
	+ vec3(0.6,0.6,0.6) * specular;
	fragColor = vec4(intensity.x, intensity.y,
	intensity.z, 1.0); 
}

Texture Mapping

Texture Mapping은 pixel의 color가 임의의 의미지 texture로부터 어떻게 형성되는지와 관련된 과정입니다. fragment shader를 통해 $(x_{t}, y_{t})$의 texture coordinates로부터 각 triangle의 vertex와 연결시킵니다.

그림에서 볼 수 있듯이, triangle의 각 vertex가 $x, y$ texture 좌표계에서 주어집니다. 해당 좌표값들이 varying variables로 interpolate되고, fragment shader에서 color를 가져오게 됩니다.

Bump Mapping

geometry 자체를 변환하는 대신에, surface normal을 변형하여 bumps를 구현하는 매핑 방법입니다. 직접 bumps를 폴리곤으로 그리는 것은 매우 어렵기 때문입니다.

Normal map을 tangent frame을 고려하여 다음과 같이 표현합니다.

• $T = [\text{tangent}, \text{binormal}, \text{normal}]$: Tangent matrix
• $\overrightarrow{\mathbf{b}}^{t}=\overrightarrow{\mathbf{e}}^{t}M$: Object frame
• $\overrightarrow{\mathbf{t}}^{t}=\overrightarrow{\mathbf{b}}^{t}T$: Tangent frame
• $\mathbf{n}=[n_r,n_g,n_b,0]^t$: Normal in tangent frame
• $normalize(M^{-t}T\mathbf{n}) \cdot normalize(\mathbf{v})$: Shading computation

Results

Reference

[1] https://mhsung.github.io/kaist-cs380-spring-2023/
[2] Steven J. Gortler, Foundations of 3D Computer Graphics