본문 바로가기
Unreal Engine/Shader

[Shader] 카툰 렌더링 #1 렌더링의 기본 원리

by HungryK 2025. 6. 9.

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

 


 

렌더링이란 무엇인가? : 빛, 표면, 카메라에 대하여 

렌더링이란 다양한 디지털 데이터를 계산하여 화면 이미지로 출력하는 작업을 이야기한다.

우리가 보는 모니터 화면은 결국 픽셀의 집합으로, FULL HD(1920x1080) 기준 총 200만개의 픽셀로 구성되어 있다.

이러한 픽셀마다 색을 지정해주는 것을 렌더링 작업이라고 말한다. 

 

렌더링 계산에는 빛, 물체 표면, 카메라(=눈) 이 필요하다.

 

빛과 색

 

 

물체는 특정 가시 광선(파장)을 반사하고 나머지는 흡수할 뿐 실제로는 색이 없다. 

예를 들어 빨간 사과는 물체 자체가 '빨강색'을 고유하게 지니고 있는 게 아니라 빨간 파장을 반사해서 빨간색으로 보이는 것. 

이렇게 물체가 빛과 반응하는 특징을 체계적으로 정리한 것을 Material이라고 한다. 

 


빛과 재질의 상호작용 방식 

 

 

  1. 물체 표면에 빛이 쏘아지고, 물체는 빛을 흡수 
  2. 빛이라는 이름의 다량의 입자(Scatter)들이 표면 아래에서 운동한다
  3. 물체에 따라 특정한 색의 파장을 가진 입자들을 거부한다. ex) 빨간 사과의 경우 빨간색 파장 입자 거부
  4. 빨간색 파장을 가진 입자들이 튕겨나가며 난반사(Diffuse) 현상이 발생된다.
  5. 관측상 '빛이 모든 각도로 골고루 퍼져나간다' 라고 인식되며 물체가 빨간색으로 보인다.

 

 

BRDF ( Bidrectional Reflectance Distribution Function ) 

 

재질 표현을 위한 함수의 일종으로 최종적으로 렌더링을 위해 픽셀이 가져야 하는 색의 정보를 입력된 빛의 정보와 표면 정보를 토대로 

어떤 색상을 만들어낼지 결정하는 함수이다. 앞서 예시를 들었던 난반사는 결국 빛과 표면에 따라 결정되기 때문이다.

 

 

BRDF 1 : Lambert

나는 이전에 'Specular 공식이 없고 단지 빛에 의한 밝고 어두움이 구현된 가벼운 라이트 구조'라고만 배웠다.  

  • Lambert는 가장 기본적이고 단순한 난반사
  • 균일하게 확산되는 재질을 의미하기에 관찰자와 무관하게 동작함
  • 물체 표면이 향하는 방향과 빛이 들어오는 방향에 따라 반사량이 정해짐
  • 빛이 비스듬히 들어올수록 반사량은 약해진다 (비스듬히 들어올수록 손실이 발생하기 때문) 

 

한계 : 주어진 두 방향으로부터 사잇각을 어떻게 구할것인가, 많은 양의 픽셀을 계산해야한다 ... etc (시대적으로 봤을 때)

벡터와 내적 

벡터?

  • 벡터는 컴퓨터 공간에서 공간의 기본 표현 방식이며 좌표와 동일하게 (x,y)로 표현한다
  • 물체가 향하는 방향을 법선(Normal)이라고 하며, 이의 방향을 Noraml Vector 라고 한다.
  • 빛이 들어오는 방향을 반대로 뒤집은 것을 Light Vector라고 한다. 
  • 컴퓨터 그래픽스는 좌표 기반으로 동작하기 때문에 두 벡터 데이터는 쉽게 계산할 수 있다. 

내적?

 

  • 내적이란 두 벡터의 같은 위치의 데이터를 곱한 후 그 결과를 서로 더해주는 연산이다.
  • 덧셈과 곱셈 연산으로 구성되어있어 처리 속도가 빠르다.
  • 두 벡터의 내적 값은 cos θ 에 비례하며, 이 때 내적의 두 벡터 크기가 1이라면 내적 값은 바로 cos θ  된다.                                  (= 사잇각을 알 필요도, 사잇각의 cos θ 을 구할 필요도 없다!) 

이에 대한 공부는 이전에 작성해두었다. 근데 내적도 작성한 줄 알았는데 작성이 안 되어있...다는걸 깨달았다. 추후에 작성해야지.

 

[기초수학] 벡터

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 1. Vector의 개념1-1 수 직선의 한계수를 점으로 표현한다면 1차원 도형 수직선 위에 있는 것들만 표현

hungrykang.tistory.com

 

Lambert의 한계

  • Lambert는 물체에 직접 작용하는 직접광(Direct Light)에 대해서만 설명한 이론이다.
  • 따라서 간접광(Indirect  Light)의 영향도 함께 받는 현실과 비교했을 때 차이가 도드라짐 
  • 간접광의 예시 : 그림자가 파랗게 보이는 현상, 숲에 둘러싸인 공간이 초록빛으로 보이는 것 등... 

빨간 종이에서 반사된 간접광이 석상에 영향을 끼치고 있다.

 

그러나 당연히 사람들이 몰라서 표현을 하지 않은게 아니라, 각 입자가 어떻게 물체에 도달하는지 일일히 계산할 수 없었던 시대였기에

게임과 같이 실시간 계산이 필요한 분야에서는 계산 처리 문제로 인해 한계가 있었다. 

 

-> half Lambert라는 개량형 Lambert를 사용하긴 했다. 기존 Lambert는 90도부터 완전한 어둠으로 표현된 반면 half Lambert는 기존의 Lambert 모델에 * 0.5 + 0.5라는 연산이 더해져 음영이 비교적 부드럽게 보인다. 

 

카툰 렌더링의 원리 

 

일반적으로 카툰 렌더링은 Lambert와 달리 음영이 부드럽게 변하지 않고 특정 영역을 기준으로 명확하게 변화를 표현해준다.

 

Ceil() - 올림함수

 

카툰 렌더링을 수식으로 표현하기 위해서는 전체 영역을 나눈 다음 나눈 영역이 하나의 값을 가지도록 합해줘야한다.

half Lambert 함수로 만든 결과는 0~1 Range를 가지는데, 올림 함수를 사용하면 0을 제외하고 모두 1이 된다. 

당연히 o을 제외한 모든 값이 1이 되었기에 대부분의 영역이 흰색으로 렌더링된다. 

 

Half Lambert -> Cartoon Rendering 

 

half Lambert의 결과에 2를 곱해 서로 다른 값을 가지도록 설정해주고 올림함수를 쓰면 어떻게 될까?

0~ 0.5는 1, 0.5이상은 전부 2가 된다. 

 

 

올림 함수는 결국 특정 수치값 , 즉 특정 영역을 하나의 수로 묶어주는 역할을 하는 함수이다. 

그러나 1보다 큰 결과값이 나왔을 경우 0과 1사이가 되도록 곱하거나 나눠서 재정렬해줘야한다. (1이상의 수가 색으로 표현될 수 없기 때문)

 

그럼 그 결과는 ... ! 

 

어디서 많이 본 녀석들~!

 

올림 함수를 사용해 영역별로 같은 값을 가지는 BRDF 제작하기

2가 아닌 3,4,5 ... 원하는 영역 수 만큼 분리해서 일종의 밴드 셰이딩을 구현할 수도 있다. 

 

 

참고자료

 

 

 

빛을 구분해보고, 엔진에서 어떻게 표현되는지 알아보자.

일단 크게 빛(light source)을 구분하는 직접광 간접광 개념에 대해서 짚고 넘어가도록 하겠습니다. 직접광...

blog.naver.com