유니티(Unity) 스케치 효과 쉐이더 / Unity Sketch (pencil) shader

* 유니티 버전: 2021.3.16f

  프로젝트 타입: 3D (HDRP에서는 적용되지 않았다. / URP는 안해봤지만 안될 것 같다.)

 

Shader를 만들어 유니티의 3D 오브젝트들을 마치 스케치를 한 것같은 쉐이더를 입혀줄 수 있다. 

 

대략 이런 결과물이다

 

직접 그려도 상관없지만 이렇게 만들어두면 오브젝트에 애니메이션을 추가할 경우,

한편의 스케치 애니메이션과 같은 결과물을 만들 수 있다.

 

 

 

우선 스케치 쉐이더의 제작 과정은 이런 과정을 거친다.

Shader 제작 (쉐이더 스크립트 작성) => Material에 Shader적용 => 카메라에 들어갈 C# 스크립트 작성 => 카메라에 적용

복잡해보이지만 쉐이더 스크립트를 직접 작성할 필요가 전혀 없기 때문에 의외로 간단하다.

 

 

 

 

1) Shader 제작

 

아주아주 감사하게도 *상업적 이용이 아닌 결과물에 한해서 사용할 수 있도록 공유되었다.

 

Source: Pencil, Daniel Taylor

http://www.shaderslab.com/demo-99---pencil-effect-1.html

 

 

- 우선 프로젝트 파일에서 오른쪽 마우스를 누른 뒤, Create - Shader - Sstadard Surface Shader를 눌러준다.

Shader 파일이 만들어지면 더블클릭해서, 스크립트를 작성할 수 있도록 한다.

 

 

 

 

 

 

 

- 위에 링크에 들어가면 보이는 코드를 쭉 복사해서 그대로 쭉 갖다 붙여 준다. 

* 물론 Shader "Custom..." 이 부분은 바꾸지 않는다.

다 작성했으면 저장을 꼭꼭 해주고 다시 유니티 화면으로 돌아온다.

 

 

 

 

 

 

 

 

 

 

2) Material에 Shader 적용

 

 

 

- 우리가 작성해준 쉐이더를 적용할 머테리얼을 하나 만들어준다. (프로젝트 창 - 오른쪽마우스 - Create - Material)

그리고 인스펙터 창에서 Shader 옆에 탭을 눌러주고 Custom을 눌러준다.

 

 

 

 

 

 

 

 

- 그러면 우리가 만든 쉐이더의 파일 이름이 뜬다. (파일을 만들 당시 지어줬던 이름으로)

눌러서 적용시켜 준다.

 

 

 

 

 

 

 

3) 카메라에 들어갈 C# 스크립트 작성

 

이 부분 역시 다른 분이 공유해주신 스크립트가 있다.

 

Source: Shaders Laboratory

https://pastebin.com/MkaniGUa

 

 

C#스크립트를 새로 만든 후 (프로젝트 창 - 오른쪽마우스 - Create - C# Script), 링크 속 코드를 복사해서 붙여넣자.

(작성하고 나면 빨간 줄들이 막 생겨날 수 있는데 이유는 모르겠지만 실행에는 전혀 지장이 없었다.)

 

 

 

 

 

 

 

4) 카메라에 적용

 

- 마지막으로 지금 완성한 C# 스크립트를 현재 사용하고 있는 카메라에 적용하는 일만 남았다.

스크립트를 끌어다가 카메라의 인스펙터창 안에 놓는다.

 

 

 

 

체크 박스가 잘켜져 있는지 확인하고, Mat에는 우리가 아까 만들어두었던 Material을 추가한다.

이렇게 마무리하면 스케치 효과를 내는 쉐이더가 완성된다.

 

 

 

 

 

* 머테리얼에서 Gradiant threshold와 Color Threshold를 조절하여 더욱 실사에 가깝게 할 것인지,

아니면 더 그림 같이 보여줄건지, 색은 어느정도 진하게 나타내줄지 등을 취향에 맞게 결정할 수 있다.

 

 

 

 

 

 

 

 

그러면 이런 모습이 나온다.

나는 여기서 테두리 부분에 좀 더 연필선의 느낌을 내고,

뒷 부분에도 벽과 선느낌을 추가하고 싶어서 별도의 Plane을 앞에 깔아주었다.

 

 

 

 

 

 

 

- 포토샵에서 유니티 속 선 색깔과 최대한 비슷한 색으로 테두리에 연필선들을 그려준다.

유니티로 옮기면 선이 굵고 진해지는 경향이 있어서 생각보다 더 얇게 연한 색으로 그렸다.

벽도 그려주고.. 선도 느낌을 내본다.

 

 

 

 

 

- 다 그리고 난 다음에는 반드시 배경을 끄고 투명 배경 png 파일로 내보내준다.

이유는 모르겠지만 내보내기 - 웹용으로 저장 하니까 유니티로 옮겼을때 선주변에 뭔가 픽셀들이 지저분하게 붙어있었다.

내보내기 - 내보내기 형식으로 png파일을 내보내자, 유니티로 옮겼을때 색은 좀 진해졌지만 꽤 만족스럽게 보였다.

 

 

 

 

 

 

- 유니티로 돌아와 Plane을 앞에 깔아주고, png이미지를 덮어준다. (plane은 카메라 비율과 이미지 크기에 맞게 잘 조정한다.)

* plane을 투명 머테리얼로 만들어주어야 한다.

 

 

 

 

 

 

 

- Plane머테리얼의 설정이다. Albedo에 그린 png이미지를 넣어주면 된다. 

 

 

 

 

 

 

- Albedo의 색상을 눌러서 A(Alpha)의 값을 바꿔주면 png 이미지의 투명도를 조절할 수 있다.

 

 

 

 

 

더욱 스케치 느낌이 나는 쉐이더가 완성되었다.

 

 

 

 

 

 

 

 

 

 

전체적으로 쉐이더 스크립트를 소개해주고 적용한 영상을 보여준, 고마운  유튜브 자료.

Source: Shaders Laboratory, Unity Shader : Pencil effect

https://youtu.be/kIfRyj6Zc0c