자, 먼저 이제 섀도우 맵핑 시작하면서 투 패스 알고리즘이라고 되어 있죠. 여러분도 '투 패스'라는 단어를 종종 들어 보셨는지 모르겠어요. 우리가 이

그래픽스에서 '패스'라고 하면, 한 번의 렌더링이라고 생각하셔도 될 것 같습니다. 뭐 구체적으로 따지면 사실은 이 한 번의 렌더링이라는 게, 예를 들자면

제드(Z-buffer)나 다른 요소 때문에 거기까지 이제 들어가서 말씀을 안 드릴 거고,

무슨 얘기냐면, 우리가 이런저런 상황을 렌더링하는데 지금까지는 뭐였죠?

한 번에 렌더링으로 물체를 모두 그릴 수 있었습니다. 자, 그런데 지금 뭐죠? 투 패스 알고리즘이라고 하는 것은 우리가

한 장면을 그리기 위해서 두 번의 렌더링이 반드시 필요하게 된다는 거예요. 자, 두 번의 렌더링이 왜 필요하냐면, 사실은 앞에 처음에 힌트를

드렸습니다. 아까 말씀드렸죠. 이 데이터를 만들어내기 위해서 일단 렌더링이 한 번 필요하고요, 실제로

이 데이터를 참조해서 이 씬을 렌더링하는 두 번의 렌더링 과정이 필요하게 돼요. 그래서 이 데이터를 만들어내는 첫 번째 렌더링 과정, 그리고 실제 이미지를

만들어내는, 여기 이제 그림자가 이렇게 있겠죠, 이 실제 이미지를 만들어내는 두 번째 렌더링 과정이 필요합니다.

이런 경우에 우리가 이런 애들을 이렇게 투 패스 알고리즘이라고 이야기하고, 여기서 이야기하는 패스가 한 번에 렌더링입니다. 이렇게 생각하시면 될

것 같고요. 자, 그래서 이렇게 써 있는 거예요. 패스 1은 낮 렌더링이다. 왜 낮 렌더링이냐? 사실은 초반에 제가 설명드렸죠. 렌더링은

컴퓨터를 사용해서 이미지를 만들어내는 기술이라고 했어요. 그런데 얘는 이미지를 만들어내지 않습니다. 정확히 말하자면,  사람

결과적으로 사람 눈에 보여줄 이미지를 만들지 않는다는 거예요. 왜냐하면 데이터만 만들어내는 렌더링 과정이니까

이 데이터는 우리가 직접 눈으로 보지 않을 겁니다. 그냥 그 데이터를, 멧 노말 맵처럼, 데이터를 뽑아와서 렌더링할 때

사용을 하기만 할 것이기 때문에 여기서는 '낮 리얼 렌더링'이라고 이야기가 되어 있는 거고요. 아까 말씀드린 핵심 개념 잘 기억해 주세요.

데이터를 만들어내는 과정이다. 자, 그렇습니다. 그럼 어떤 데이터를 만들어내느냐?  예, 요놈 기본 이론을 살펴볼게요.

자, 일단은 요 아래 그림을 가지고 보죠. 지금 이 신을 보면 바닥에 이런 벽면이 있고요, 기구가 이렇게 하나 있습니다.

그리고 여기서 이제 빛이 비추고 있어요. 뭐, 디렉셔널 라이트도 있고 포인트 라이트일 수도 있죠.

여기서는 포인트 라이트로 했으니까 포인트 라이트 기준으로 설명을 드릴게요. 그러면 2P 라이트의 미치가 있을 거고, 포인트 라이트가 이렇게 지금

주황색 선으로 되어 있는 빛을 비추고 있을 겁니다. 자, 실제로 생각해 본다고 생각을 해보세요. 바닥이 있고, 물체 하나가 있고, 위쪽에서 전구가 빛을 비추고 있어요.

자, 그러면 그림자는 어디에 생기죠? 이 전구의 빛이 받지 않는 곳에 그림자가 생기겠죠. 어떤 부분? 여기 지금 초록색으로 표시되지 않은, 제가 까만색으로 그릴

요런 부분에 그림자가 생기게 될 겁니다. 그렇죠? 다시 말해서 이제 얘는 그림자, 큰 죄라고 이야기해야 되나…

다시 얘기하자면 이제 요 부분이 되겠죠. 아, 요 부분에 늘 그림자라고 생각하는 게 맞을 겁니다. 그렇죠?

이 빛은 나아가는데, 물체에 의해서 가려진 부분에 그림자가 생길 거예요. 작은데, 우리가 컴퓨터 그래픽스 기술을 사용해서 그림자를 그리려고 합니다.

그러면은 뭘 계산해야 되냐면, 어떤 부분이 2구에 의해서 빛이 가려진 영역을 계산해야 되죠.

그건 당연히 필요한 정보에요. 그것을 어떻게 만들어내냐면, 참 똑똑하게 이렇게 만들어냅니다.

물론 두 번째 패스까지 다 봐야 이해가 될 텐데, 일단 첫 번째로는 뭘 하냐면, 요 자, 빨간색으로 표시해 놓았죠.

라이트 소스, 즉 빛(광원)의 광선을 뷰포인트로 해서 렌더링을 수행합니다. 자, 무슨 얘기냐면, 우리가 씬을 이렇게 만들어 왔잖아요. 평면이 하나 있고,

구가 하나 있고, 여기에 포인트 라이트가 있어요. 자, 그러면은 마치 여기에 지금 포인트 라이트가 있지만, 마치 여기에

카메라가 있는 것처럼, 이 안에, 여기에 카메라를 두고 씬을 렌더링한다는 겁니다.  '있는 것처럼'이라고 하는 게 더 맞을 수도 있겠네요.

자, 무슨 얘기냐면, 우리가 이 장면을 렌더링하려면 뭘 해야 되죠? 첫 번째로 뭘 해요? 버텍스 셰이더에서

어, 이제 버텍스 변환을 수행하잖아요. 그러면 이 광원, 전구가 있는 위치를 뷰 변환 행렬로 만들게

되면 이제 여기에 카메라가 있는 것처럼 이 장면을 렌더링할 수 있을 겁니다. 그렇죠? 자, 나중에, 요 다음 장에도 나오지만, 나중에 결과적으로 이미지를 만들 때

카메라는 여기에 있어요. 실제 카메라는 여기에 있는데, 이 첫 번째 패스에서는 카메라를 여기에 놓고 렌더링을 수행한다는 겁니다.

자, 그러면 어떻게 보일까요? 지금 여기에 카메라가 있는 거니까, 여기서 봤을 때 이렇게 구가 있겠죠? 뭐, 받침 평면이 이렇게 있구요,

이렇게 보일 거예요. 자, 그런데 이때 우리가 당연히 그냥 일반적인 렌더링을 수행하면 이런 이미지가 나오겠지만,

이 이미지 전체가 필요한 게 아니라 우리는 뭘 필요로 하냐면, 어떤 데이터를 이 첫 번째 패스에서 만들어낼 거냐면

깊이 정보를 저장한 맵을 만들어낼 겁니다. 그걸 우리가 섀도우 맵이라고 부를 거예요. 자, 깊이 정보라는 건 뭘까요?

자, 보면은 예, 그래서 있죠. 자, 어떤 한 점 P가 있습니다. 6, 9 위의 한 점 P예요. 이 점과 이 카메라, 또는 여기서 지금 얘기하는 카메라는 이 광원,

전구라고 같은 위치를 이야기하는 거예요. 위치가 얼마나 떨어져 있냐 하는 값을, 깊이 값 자체를 이미지로 만들어 버린 겁니다.

그렇죠. 노멀(normal)은 Nx, Ny, Nz를 이미지로 만든 것처럼 이번에는 깊이 값을 이미지로 만들 거라는 거예요.

그걸 우리가 섀도우 맵이라고 하고, 얘는 뭐, 라이트 소스 기준의 깊이 맵이다라고 이야기하는 거거든요.

라이트 소스 기준의 뎁스 맵이라는 건 뭐냐면, 사실은 우리가 이미 배웠죠. G-버퍼링 할 때 깊이 버퍼에 뭐가 저장이 되어 있죠? 뎁스 값들이 저장이 되죠.

자, 그래서 여기에 카메라를 두고 렌더링을 해 버리면 깊이 버퍼의 이 깊이 값들이 저장이 된다는 겁니다. 각 프래그먼트에 깊이 값들이 저장이 된다는 거예요.

자, 여기서 주의하셔야 될 게, '깊이'라고 하면은 이렇게 깊이, 길이라고 생각하기가 쉬운데, 사실은 정확히 얘기하자면, 요게 좀 뒤쪽에 있긴

하지만 보세요. 우리가 요렇게 여기다가 카메라를 두고 렌더링을 했습니다. 자, 그러면은 이 카메라가 예를 들어서

뷰포트, 뷰포트 아니죠. 어, 뷰 프러스텀이 이렇게 생겼다고 해 보세요. 자, 그러면은 우리가 뭐 프로젝션 트랜스폼을 하게 되면은 이렇게 그 깊이

값이 NDC 좌표 상에 좌표로 변환될 거고, 얘를 뷰포트 트랜스폼 하게 되면은 지금 위에서 본 것처럼 되어 있지만 요 너비가

이제 뷰, x 뭐 예를 들어 860. 그리고 지금 이렇게 가려져 있는 높이가… 높이가 어떻게 해야 잘 될지 모르겠는데, 뭐 위에서 보고 있다고 그러면

생각을 해보세요. 높이가 뭐 600이고, 깊이가 1인 상황에서의 유클리드 값을 저장해 두는 겁니다. 그렇죠? 정확하게 이후 점하고, 처음에 유클리드 아이언 디스턴스 같은 게

아니고 유클리드 값을 저장해 둔다는 거예요. 자, 이게 이해가 안 된다고 하면은 다시 돌아가서 아웃풋, 뭐 저희 있는 지

버퍼링 부분을 보셔야 여러분들이 정확하게 이해를 할 수가 있습니다. 그렇죠? G버퍼링에서 제가 거기 강의 자료에서 0.5, 0.8을 가지고

설명을 했죠. 9 깍두기 저장이 된다는 거예요. 왜냐면 z가 0이고, 팩스가 1이니까 뭐 이런 보트…

좋습니다. 그 길게 설명을 했는데, 요약해서 얘기하자면 이 광원 위치에 카메라를 두고 렌더링을 해서 z값을 저장해 놓고, 그거를 이미지로 만든

다는 거예요. 자, 여기에 첫 번째 패스에서 하는 역할입니다. 자, 얘랑 아까 얘기했던, 여기에 그림자가 지능과 무슨 상관이냐

어, 궁금하시죠? 여기에 이제 두 번째 패스에서 우리가 할 계산이에요. 자, 이렇게 해서 어찌 됐건 요런 텐서 값을 가지고 있는 이미지를 만들어냈다

고칠게요. 자, 뭐 여러분들 조금 헷갈릴 수 있을 것 같아서 제가 먼저 예시로 하나를 보여드릴게요. 여러분들께 구글의 텐서맵을

보여주면 어떻게 생긴 이미지들인지 이렇게 볼 수가 있습니다. 자, 일단 흑백 이미지 외에 흑백 이미지

여러분들 한번 생각을 해 보시고요. 그래서 자, 요런 거 보면, 요 지금 뭐 이렇게 바닥에, 바닥에 요런 복잡하게

생긴 로케이션 데이터가 놓여 있습니다. 자, 그러면은 여기 이 점은 지금 카메라에서 가까운 점이고, 뭐 요런 점은 카메라에서 먼 점이겠죠.

그래서 먼 곳을 검은색, 가까운 곳을 흰색으로 표시해요. 이런 데이터가 맵에 저장된 거예요.

그래서 이 각각의 픽셀들은 집값이 얼마인지를 색깔로 인코딩해서 보여주는 거죠.

아, 지금 다른 예제들도 다 마찬가지에요. 어떤 신이 아니라, 어떤 오브젝트의 버텍스 또는 프래그먼트가

카메라로부터 얼마나 떨어져 있는지를 저장해 놓은 데이터가 이런 텍스처 맵입니다. 가까운 걸 낮은 값으로 하면 이런 형태가 될 거고, 높은 값을 넣으면 이런 형태가 되겠죠.

좋아요. 이 데이터를 첫 번째 패스에서 만들어 놓은 거구요, 이제 이 데이터를 참조해서 실제로 그림자를 만들어낼 거예요.

자, 어떻게 만들어내냐면, 여러분들이 알아두셔야 할 것은 두 번째 패스에서는 리얼 랜더링입니다.

4 얼 렌더링이라는 건 어떤 의미냐면, 실제로 사람이 화면에 보여줄, 사람(혹은 유저)에게 화면에 보여주어야 할 이미지를 만들어낸다는 거예요. 그러니까

여기서는 7 제로, 우리가 정의해 놓은 이 카메라의 위치를 기준으로 렌더링을 수행해야 되겠죠.

자, 렌더링을 수행하는데, 여기서 뭘 하냐면, 이 카메라의 위치에서 지금 신이 이렇게 보이잖아요. 이렇게 보이는, 예를 들어서 Q2 점,

Q2점이 카메라에 보일 겁니다. 자, 그러면 이 Q2점이 그림자가 지는지, 안 지는 점인지를 아까 그 데이터를 활용해서 판정할 거라는

거예요. 어떻게 판정하냐? 개선을 하는데, 뭘 비교하냐면, 2 프래그먼트의 거리 d와

라이트 소스와의 거리, 즉 깊이 값 z를 비교해서 d 값보다 크면 그림자가 있고, 그렇지 않으면

그림자 지지 않는다. 이렇게 계산을 하는 거거든요. 무슨 일인지 한번 볼게요. 자, 여기를 봅시다. 우리가 트랜스폼을 다 했더니

지금 요점이 이제 요 카메라의 보이게 됐어요. 상황이. 자, 그러면은 이 점은 마치 아까 우리가 이 라이트 소스 기준으로 여기서 렌더링을

테스트 이미지에서 뭐 이렇게 풀어볼게요. 유점인데, 요점이 지금 이 라이트 소스에서 보이는 거리하고 그걸 t라고 하고요,

아까 우리가 여기 인코딩 해놓은 요기 p값과 t값을 비교를 한다는 겁니다. 자, 비교를 해서 음… 그쪽 비교를 해서 지금 얘네가 같은 경우에는, 같은

경우에는 t값이 p값보다 크지 않죠. 그렇기 때문에 그냥 빛을 비추는 형식으로 렌더링을

그래요. 자, 그런데 지금 일단은 케이스를 밭이 봐야 자리가 되시겠죠. 자, 다른 케이스. 예를 들어서 이 q1 점을 생각을 해봅시다.

Q1 점은 지금 이 이미지에는 지금 이 요구 뒤에 가려져 있는데, 어떻게 표시해야 될까요? 이 T9 뒤에 가려져 있는 어떤 한 점이겠죠.

이 점은 카메라와 카메라의 조명(라이트 소스)과의 거리가 이렇게 긴 T1일 겁니다. 그런데 이 뎁스 맵의...

맵에 저장되어 있는 이 깊이 값, 여기에서 이 깊이 값이겠죠. 자, 유의할 점은, 아까 이후 뎁스 맵 이미지를 만들 때에는 라이트 소스와 카메라 위치를

기준으로 이제 눈에 보이는 하늘색 영역의 깊이 값들이 여기에 저장이 되어 있을 겁니다.

그렇죠. 그러니까 요 거리가 저장이 되어 있는 거예요. 자, 그런데 지금 이 두 번째 패스에서는 여기서 카메라가 여기를

보고 있죠. 보니까 여기를 이제 렌더링을 해야 돼요. 자, 이 점을, 이 점의 위치가 지금 아까 요 뎁스 맵에 대한 텍스처 맵의...

어디에 저장되어 있나 보니까 이 픽셀 위치에 저장이 되어 있죠. 그런데 이 픽셀 위치에 저장된 값은 뭐예요?

이 초록색 u 길이가 저장이 되어 있다는 겁니다. 그렇죠? 아까 첫 번째 패스에서 렌더링을 할 때 이 라이트 소스를 기준으로

눈에 보이는 점들에 대해서 값을 저장했기 때문에 이 파란색 길이가 저장되어 있고, 이게 g라는 거예요.

지금 그림을 보면 이 카메라에서 봤을 때, 이 카메라에서 봤을 때 보이는 어떤 프래그먼트와 이 카메라 사이의 거리가 d입니다.

얘는 차이가 나죠. 어때요? d가 u보다 크죠. 그 얘기는 u보다 지금 이 프래그먼트는 이 라이트 소스에서 보이지 않는 빛이라는 이야기고, 보이지 않는 위치

니까 그림자 영역이라는 거겠죠. 그래서 아, 여기는 그림자가 졌구나라고 판단을 할 수 있다는 겁니다.

이해가 되시나요? 자, 조금 어려울 수 있어요. 어려울 수 있는데 한 번 더, 다시 한번 잘 생각해 보세요. 처음에 뭐 가평 얘기를 계속 할 수밖에 없는데...

처음에 여기서 보고 있어요. 여기서 보면서 렌더링해 가지고 깊이 값들을 저장해 두었습니다. 텍스처 맵의, 그러면은 예를 들어서 여기에는

62p 값, 요 프래그먼트에는 62p 값이 저장되어 있을 겁니다. 텍스처 맵의, 아까 보여드렸던 요런 식의 데이터로 저장되어 있을 거예요.

자, 그런데 실제로 지금 쓰이는 렌더링을 할 때는 카메라가 여기서 보고 있죠. 그러면은 이 Q2 프래그먼트 같은 경우에는

지금 Q2에 앱스(알파) 값이 이미지에 저장되어 있는 값과 같을 거예요. 그러니까 빛이 닿는 영역인데,

Q1 프래그먼트 같은 경우에 지금 이 라이트 소스에서 보이지는 않죠? 그렇죠? 보이지 않아요. 여기에 의해서 막혀 있어요.

그렇기 때문에 지금 이 뎁스 맵에 저장된 저 위치에서 깊이 값은 유지 값이라는 겁니다. 즉, 연계 지원이라고 써있는 값이 적용됩니다.

그래서 2D 원과 지원이 다르고, 그림자가 길 때는 D가 G보다 크기 때문에 얘를 그림자 영역이라고 판단할 수 있다는 거예요.

요게 기본적인 섀도우 맵 기법입니다. 자, 그러면은 판단을 해서 어떻게 그림자를 이런 것들은 이제 뒤에 가서

보여드리도록 할 거고요. 지금 여기까지는 여러분들이 저 이론적인 과정만 이해하시면 돼요. 2번의 패스로, 그리고 첫 번째 패스에서 깊이 값을 저장해 뒀는데, 기준

[ComputerGraphics] Lecture 15. Shadow Mapping - 2) Basic Shadow Mapping

김형기

투 패스 섀도우 맵핑 알고리즘 소개 및 패스 개념 설명

섀도우 맵핑은 투 패스 알고리즘을 사용한다.

그래픽스에서 '패스'는 한 번의 렌더링 과정을 의미한다.

투 패스 알고리즘은 한 장면을 그리기 위해 두 번의 렌더링이 필요하다.

두 번의 렌더링은 데이터 생성과 실제 이미지 렌더링을 위해 필요하다.

첫 번째 패스는 낮 렌더링으로, 사람 눈에 보이는 이미지가 아닌 데이터를 생성한다.

섀도우 맵 생성을 위한 첫 번째 패스 과정 설명

바닥, 벽면, 물체, 포인트 라이트를 포함한 씬을 예시로 설명한다.

컴퓨터 그래픽스로 그림자를 그리려면 빛에 가려진 영역을 계산해야 한다.

첫 번째 패스는 라이트 소스의 위치를 뷰포인트로 설정하여 렌더링한다.

첫 번째 패스는 깊이 정보를 저장한 맵(섀도우 맵)을 생성한다.

깊이 정보는 각 점과 광원 사이의 거리(깊이 값)을 이미지로 만든 것이다.

섀도우 맵을 활용한 그림자 생성을 위한 두 번째 패스 과정 설명

두 번째 패스는 실제 이미지를 만들어내는 리얼 렌더링이다.

두 번째 패스에서는 카메라 위치에서 씬을 렌더링하며, 각 점이 그림자에 가려지는지 판단한다.

프래그먼트와 카메라의 거리(d)와 깊이 값(z)을 비교하여 그림자 유무를 판단한다.

첫 번째 패스에서 생성된 깊이 값을 텍스처 맵으로 저장하고, 두 번째 패스에서 이 값을 참조하여 그림자를 계산한다.

두 번의 패스를 통해 깊이 값 비교로 그림자 영역을 판단하는 것이 섀도우 맵의 기본 기법이다.