개요
이전 글에선 빛의 정보를 활용하여 그림자에 가려진 물체를 투명하게 만들었습니다.
빛의 정보를 활용할 수 있게 됐단 건 3D 환경에서 만들 수 있었던 셰이더 또한 어느 정도 구현이 가능하다는 뜻입니다.
셰이더 그래프로 구현
결과물
결과물부터 보여드리자면 이렇습니다. 맨 위 가운데에 있는 것은 비교를 위해 배치해둔 평범한 Sprite-Lit-Default입니다. 밑의 왼쪽은 툰 조명 셰이더, 오른쪽은 픽셀 조명 셰이더입니다.
Posterize
출처 : 두 셰이더에서 공통적으로 사용할 노드가 존재합니다. Posterize입니다.
출처 : https://www.adobe.com/kr/creativecloud/photography/discover/posterize-photo.html
Posterize는 부드러운 값을 포스터처럼 단계를 나누어서 반환해 줍니다.
출처 : Posterize 노드를 사용하지 않고 계산식으로도 같은 효과를 내줄 수 있습니다.
식을 이해하기 위해 예를 들자면 0~1의 연속된 값이 존재한다면 10을 곱하면 0~10의 연속된 값을 가지게 됩니다. floor(내림)을 사용하면 소수점 밑의 값이 사라지기에 0, 1, ..., 8, 9, 10의 정수가 됩니다. 그 후 다시 10을 나눈다면 0부터 1의 범위이지만 단계가 나누어지게 됩니다.
요약하자면 Posterize는 부드러운 값을 단순화시켜준다고 이해하시면 됩니다.
더욱 세밀하게 설정하시고 싶으시다면 Sample Gradient를 활용하는 방법도 존재합니다.
툰 조명 셰이더
툰 조명 셰이더입니다. 빛이 단계를 나누어서 적용됩니다.
전체 셰이더 그래프입니다.
어느 블렌딩 스타일 사용할 것인지 설정해 줍니다.
들어온 값의 명도를 5단계로 나눕니다. (단계의 값이나 구현 방법은 개인 취향이라고 생각합니다)
이후 적용해 주면 됩니다.
픽셀 조명 셰이더
픽셀 조명입니다. 빛이 픽셀처럼 적용됩니다.
전체 셰이더 그래프입니다.
화면의 가로, 세로 길이를 가져와서 정규화한 뒤 100을 곱해줍니다. (단계의 값이나 구현 방법은 툰 조명과 마찬가지로 개인 취향이라고 생각합니다)
굳이 화면의 가로, 세로 길이를 가져와서 곱해주는 이유는 Screen Position와 관련이 있습니다. Default 모드의 Screen Position는 가로, 세로 모두 공평하게 0~1의 값을 가지고 있습니다. 즉 한쪽의 길이가 길다는 것을 고려해 주지 못합니다. 그렇기에 가로의 화면이 길거나 세로의 화면이 길면 1:1이 아니게 됩니다.
예를 들자면 화면의 가로가 1000 세로가 600이라 할 때 모두 100단계로 쪼개는 것이 아니라 가로는 100단계, 세로는 60단계로 나누어야 가로, 세로가 같은 길이로 쪼개진다는 것입니다.
이후 적용해 주면 됩니다.
주의해야 할 점
이전 글과 마찬가지로 1개의 블렌딩 스타일에 대해서만 작성했기에 나머지 3개의 블렌딩 스타일은 무시된다는 점입니다. 마찬가지로 다른 블렌딩 스타일을 쓰실 거면 셰이더 그래프에 추가적인 작업을 해주셔야 합니다.
다른 요인은 고려 안 하고 작성한 간단한 형태의 셰이더 그래프이기에 실제 적용을 하실 때는 더 수정하셔야 할 요소들이 존재하실 수 있습니다.
후기
툰 세이딩, 툰 조명 셰이딩, 셀 셰이딩, 셀 조명, 툰 조명, 툰 조명 셰이더, 툰 셰이더 등등 이름을 뭘로 작성할까 고민했습니다. 항상 느끼지만 이름 짓기는 까다로운 것 같습니다.
이번 글은 지난 글에서 알게 된 2D Light Texture를 간단하게 응용해 서 만든 셰이더입니다. 처음에는 3D 셰이더를 배울 때 많이 접하는 툰 셰이더만 고려하고 글을 작성하려 했습니다. 하지만 '픽셀도 가능하지 않을까?'라는 생각이 들었고 시도해 보니 괜찮게 나와서 이번 글에서는 2가지 셰이더를 다루게 됐습니다.
또 좋은 아이디어가 생기면 새로운 글로 찾아뵙겠습니다.
