Cartoon rendering

카툰렌더링은
첫째, 3~4단계의 급격한 명암 변화
둘째, 실루엣 엣지
상기한 두 가지를 기반으로 렌더링된다.

첫째의 급격한 명암변화는 아주 쉽게 구현할 수 있다.
렌더링될 버텍스의 법선과 방향성 광원을 내적 하여 나온 값을 이용하면 된다.

vertexNormal(버텍스의 법선, 3차원 벡터)
lightingDirection(방향성 광원의 방향, 3차원 벡터)
라고 하고,
finalColor(최종 색상 계산 결과, rgb컴포넌트)
라고 할 때,

픽셀 쉐이더에서,

float dotResult=   dotProduct(vertexNormal, lightingDirection);

if( dotResult > 0.7f )        finalColor= float4(0.7f, 0.7f, 0.7f);
else if( dotResult > 0.5f ) finalColor= float4(0.5f, 0.5f, 0.5f);
else if( dotResult > 0.3f ) finalColor= float4(0.2f, 0.2f, 0.2f);

return finalColor;

로 급격한 명암의 변화가 표현된다.

상기한 의사 코드는 3단계의 명암 변화를 보여주고 있다.

http://jrr.kr/103에 GLSL로 구현된 예제가 있다.

위는 가장 간단하게 구현할 수 있는 툰쉐이딩이고, 일반적으로는 '쉐이딩텍스쳐'
를 이용하여 구현하게 된다.

쉐이딩 텍스쳐

원리는 비슷하다.

첫 번째 방법은 내적을 이용하여 색상을 직접 결정하는 방식이고,
두 번째 방법은 내적을 이용하여 텍스쳐 좌표를 결정하는 방식이다.

아래 그림은 DirectX를 기반으로 쉐이딩 텍스쳐를 이용하여 구현한 툰쉐이딩이다.

3단계의 급격한 명암변화를 갖는 것을 볼 수 있다.


다음은 실루엣 엣지 표현이다.

우선 결과를 보면 다음과 같다.


엣지 렌더링에 여러가지 방법이 있으나 위의 프로그램은
'뷰 벡터를 기준으로, 인접한 두 face(통상 삼각형)의 법선을 비교하여, 법선의 방향이 다르다면,
그 두 face가 공유하는 Edge를 외곽선으로 간주한다' 는 원리를 이용하였다.

위의 방법으로 엣지를 렌더링하기 위해서는 버텍스가 다음과 같은 형태를 가져야한다.
struct testVertex{
    float3 position;
    float3 normal;
    float3 faceNormal1;
    float3 faceNormal2;
};

위치와 법선을 갖는다는 것은 여느 메쉬와 다를 바 없으나, 인접정보를 바탕으로 faceNormal1, 2를 추가하여,
메쉬의 버텍스를 재구성 해 주어야 한다.
더욱이 엣지의 검은 선이 Line처럼 보이지만, 사실은 Quad를 이용하여 표현된 것이다.
즉, 하나의 직선을 표현하기 위해 1개의 쿼드(2개의 트라이앵글)가 사용되었음을 뜻한다.

<소스>