고급컴퓨터그래픽스 4. Image Processing

게시 2024/11/03 업데이트 2025/01/13

By 신희곤

26 분읽는 시간

건국대학교 고급컴퓨터그래픽스 김형석 교수님의 수업을 정리한 내용입니다.

Image Processing

Computer Graphics는, 정보를 통해 이미지를 만들어내는 과정이다. Computer Vision는, 반대로 이미지를 통해 의미있는 정보를 추출하는 과정이다. Image Processing는, 이미지를 인풋으로 넣어 아웃풋 이미지를 얻어낸다.

사진 보정, Game Post Processing 등이 대표적인 Image Processing 이다.

Post Processing은 어떻게 구현되는가가

Pipeline을 거쳐 생성한 이미지를, 다시 쉐이더로 어떻게 보낼 수 있을까?

[!error] 이미지를 다시 픽셀 단위로 쪼개서 데이터로 보내면 되려나?{title}
그렇게 하면 위와 같은 그림이 될텐데, CPU <-> GPU로 넘어가는 연산이 무지 느리기 떄문에, 넘어가는 연산을 최대한 줄여야 한다. 따라서 바람직한 방법은 아니다.

[!success] Frame Buffer 에 있는걸 바로 CPU로 아웃풋 하지말고 후처리까지 끝내서 보내면 되지 않을까? {title}

GPU에 있는 Frame Buffer 정보를 이용해서 Texture Imgage를 GPU 내에서 생성한다. 이 Texture와 같은 것을 Frame Buffer Obejct라고 부른다.

이런식으로 여러 번의 Randering 과정을 거치는 것을 Multi-pass Rendering 기법이라 부른다.

Image Processing 전용 Shader 만드는 방법

Fragment Shader에서 대부분의 과정을 처리하고,

Texture, Texture Coords (텍스쳐 좌표)를 Input으로 받아야 한다.

Input으로 Texture Coords 넘기는 방식

  
// Vertex Shader
in vec3 Position;
in vec2 TextureCoord;
out vec2 fs_TextureCoord;

void main(void)
{
    fs_TextureCoord = TextureCoord;
    gl_Position = vec4(Position, 1.0);
}

// Fragment Shader
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    out_Color = texture(u_Image, fs_TextureCoord);
}

[!question] What is Texture Coords (텍스쳐 좌표)?{title} UV Coordinate를 사용하며, 이 정점이 Texture Image가 (0,0) ~ (1,1) 크기일 때 어느 Texture Point를 참조하는지 나타낸다.

직접 계산하는 방식

  
// Vertex Shader
in vec3 Position;

void main(void)
{
    gl_Position = vec4(Position, 1.0);
}

// Fragment Shader
uniform sampler2D u_Image;
uniform vec2 u_inverseViewportDimensions;

out vec4 out_Color;

void main(void)
{
    vec2 txCoord = u_inverseViewportDimensions * gl_FragCoord.xy;
    
    out_Color = texture(u_Image, txCoord);
}

[!question] What is u_inverseViewportDimensions, gl_FragCoord?{title} u_inverseViewportDimensions: 해상도의 역수 벡터. 예를들어, \(1920 \times 1080\) 해상도면 이 벡터의 값은 \(\left( \frac{1}{1920}, \frac{1}{1080} \right)\)이 되겠다.
gl_FragCoord: 현재 Fragment의 화면 공간 좌표를 제공함. Viewport의 범위를 갖는다. 예를들어, \(1920 \times 1080\) 해상도면 gl_FragCoord는 \((0 \sim 1919, 0 \sim 1079)\) 값을 가질 수 있다.

인접한 Texel을 얻는 방법

Texture의 좌표를 texel (텍셀)이라고 부른다.

Edge Detection나 Toon Rendering 같은 거 구현하려면 텍스쳐의 주변 점까지 봐야하는데, 어떻게 주변 점을 볼 수 있을까?

직접 구현

  
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    vec2 delta = 1.0 / textureSize(u_Image);
    
    vec4 c0 = texture(u_Image, fs_TextureCoord);
    vec4 c1 = texture(u_Image, (delta * vec2(-1.0, 0.0)));
    vec4 c2 = texture(u_Image, (delta * vec2( 1.0, 0.0)));
    vec4 c3 = texture(u_Image, (delta * vec2( 0.0, -1.0)));
    vec4 c4 = texture(u_Image, (delta * vec2( 0.0, 1.0)));

    out_Color = (c0 + c1 + c2 + c3 + c4) * 0.2;
}

[!question]- Why?{title} UV Coordinate는 (0,0) ~ (1,1)로 되어있더라도, 실제 텍스쳐 사이즈는 \(1024 \times 512\)일지 \(256 \times 256\)일지 모르는 일이다.
따라서, Texture Size를 통해 다음을 계산하면 된다. 바로 위 아래 텍스쳐 픽셀의 위치
\[\text{uv} \pm \frac{1}{\text{textureWidth}}\]
바로 좌우 텍스쳐 픽셀의 위치
\[\text{uv} \pm \frac{1}{\text{textureHeight}}\]

textureOffset 함수 사용

  
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    vec4 c0 = texture(u_Image, fs_TextureCoord);
    vec4 c1 = textureOffset(u_Image, fs_TextureCoord, ivec2(-1, 0));
    vec4 c2 = textureOffset(u_Image, fs_TextureCoord, ivec2(1, 0));
    vec4 c3 = textureOffset(u_Image, fs_TextureCoord, ivec2(0, -1));
    vec4 c4 = textureOffset(u_Image, fs_TextureCoord, ivec2(0, 1));

    out_Color = (c0 + c1 + c2 + c3 + c4) * 0.2;
}

프레임 버퍼에 적힌 이미지를 가져오는 함수

처리를 마치면, 이미지 정보가 프레임 버퍼에 남아있고, 이를 가져오는 방법은 다음과 같다.

  
glUseProgram(/* ... */); 
glDraw*(/* ... */); 

unsigned char rgb = new unsigned char[width * height * 3]; 
glReadPixels(0, 0, width, height, GL_RGB, GL_UNSIGNED_BYTE, rgb);

// ... 

delete [] rgb;

glReadPixels 함수를 사용하면 정말 느린 Bus 커맨드가 실행되고, 그게 끝날때까지 GPU는 아무것도 안하고 기다린다.

따라서 최소한으로 사용해야 한다.

[!question] 왜 가져오는가?{title} 이미지를 CPU로 가져와서 저장해야 할 때 사용하면 된다.
게임과 같이 가져올 필요 없이 바로 이미지를 출력하면 되는 상황은 필요 없는 함수이다.

Image Processing Example

Negative Color

색깔을 반전한다.

  
// Vertex Shader
in vec3 Position;
in vec2 TextureCoord;
out vec2 fs_TextureCoord;

void main(void)
{
    fs_TextureCoord = TextureCoord;
    gl_Position = vec4(Position, 1.0);
}

// Fragment Shader
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    out_Color = texture(u_Image, fs_TextureCoord);
    out_Color.xyz = vec3(1) - color.xyz;
}

Edge Detection

주변 점들과 색깔 차이가 많이 나면 Line을 남기고, 색깔 차이가 적게 나면 색을 없앤다.

Toon Rendering

색 범위가 연속적인 분포로 0 ~ 255 이렇게 있다고 치면,

1~10 범위엔 특정 값 10~20 범위엔 특정 값 …

이런식으로 색깔 분포를 디지털화 하면 카툰 효과를 낼 수 있다.

Average Blur

주변 점의 텍스쳐 색깔을 다 더해서 평균을 낸다.

  
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    vec4 c0 = texture(u_Image, fs_TextureCoord);
    vec4 c1 = textureOffset(u_Image, fs_TextureCoord, ivec2(-1, 0));
    vec4 c2 = textureOffset(u_Image, fs_TextureCoord, ivec2(1, 0));
    vec4 c3 = textureOffset(u_Image, fs_TextureCoord, ivec2(0, -1));
    vec4 c4 = textureOffset(u_Image, fs_TextureCoord, ivec2(0, 1));

    out_Color = (c0 + c1 + c2 + c3 + c4) * 0.2;
}

Gaussian Blur

\[G(x,y)=\frac{1}{2\pi \sigma^2}e^{ - \frac{{x^2 + y^2}}{2\sigma^2}}\]

가우시안 분포를 사용해서 Blur를 만드는 방법이다.

저 식을 사용해서 대충 근사시킨 3x3 행렬은 다음과 같다.

\[\frac{1}{16} \cdot \begin{bmatrix}1&2&1 \\ 2&4&2 \\ 1&2&1 \end{bmatrix}\]

  
uniform sampler2D u_Image;

in vec2 fs_TextureCoord;
out vec4 out_Color;

void main(void) 
{
    vec4 up_left = textureOffset(u_Image, fs_TextureCoord, ivec2(-1, 1));
    vec4 up_mid = 2 * textureOffset(u_Image, fs_TextureCoord, ivec2(0, 1));
    vec4 up_right = textureOffset(u_Image, fs_TextureCoord, ivec2(1, 1));
    
    vec4 left = 2 * textureOffset(u_Image, fs_TextureCoord, ivec2(-1, 0));
    vec4 mid = 4 * texture(u_Image, fs_TextureCoord);
    vec4 right = 2 * textureOffset(u_Image, fs_TextureCoord, ivec2(1, 0));
    
    vec4 down_left = textureOffset(u_Image, fs_TextureCoord, ivec2(-1, -1));
    vec4 down_mid = 2 * textureOffset(u_Image, fs_TextureCoord, ivec2(0, -1));
    vec4 down_right = textureOffset(u_Image, fs_TextureCoord, ivec2(1, -1));

    out_Color = (up_left + up_mid + up_right + 
                left + mid + right + 
                down_left + down_mid + down_right) * 0.0625;
}

[!tip] UV Coordinate의 (0,0)은 왼쪽 아래에서 위, 오른쪽으로 갈수록 값이 증가한다.{title}

Image Processing Operations

Image Processing에서 유용하게 활용할 수 있는 알고리즘들을 소개한다.

사용 가능한 알고리즘의 조건

Data-parallel 해야 한다.

[!question] What is Data-parallel?{title} 주변 픽셀의 계산 결과에 의존하면 사용하기 힘든 알고리즘이다.
주변 픽셀 계산 결과를 기다리는 동안 다른 모든 쉐이더가 그 계산을 위해 잠시 저장하고, 이게 중첩되면 기하급수적으로 느려져 버린다.
각 픽셀마다 계산 결과가 딱 나와야 Data-parallel하다고 한다.

Bus를 사용하지 않는 알고리즘

The Grey level histogram

흑백 이미지라고 생각하고, 색깔별로 0인 값, 1인 값, … , 255인 값을 모아 만든 Histogram이다.

[!question]- 왜 필요한가?{title}
우리 색깔이 잘 분포되어 있는지 알 수 있다.
셋 중에서, 가장 좋은 분포는 B이다. A는 너무 어둡고, C는 너무 밝다.
영역을 구분할 수 있다.

[!example]- HDR Image : High Dynamic Ragne Image{title}
우리 눈이 볼 수 있는 범위가 검은색이면, 컴퓨터가 표현하는 색은 파란색 범위밖에 되지 않는다.
실제 색깔 분포를 옮기면 양쪽 끝에 색깔이 몰려있게 되는데, 이걸 균형있게 옮기는 기술이 HDR이다.

[!example]- Histogram Equalization{title}
한쪽으로 치우친 분포의 Histogram을 평탄하게 만들면, 색깔이 좀더 풍부해지는 효과가 있다.
이걸 쉐이더에서 바로 구현하기는 힘들다.
한번에 작업하려면, 각 픽셀마다 Histogram을 만들고, 그 분포를 보고 색상을 좀 조절하는 연산을 해야하는데
굳이 각 픽셀마다 Histogram을 계산하지 않아도 되기 때문이다.
먼저, 최초 한번 Histogram을 만들고, 다음 과정에서 Histogram을 각 픽셀마다 넣어주면 된다.

Point operations

각 점의 Color 값을 일관적으로 변환하는 연산자다.

Threshold