Apes Together Strong.

https://www.youtube.com/watch?v=XyOAk4rlIUY 2D fire용 불꽃을 만드는 방법을 알아본다. idea는 간단하다. 2개의 노이즈를 섞어서 불꽃같이 만들고 적절히 마스킹해서 불꽃이 보여지는 영역에만 그려지게 한다. 마지막으로 컬러를 덧붙이고, 전체 영역에서 불꽃이 보여지는 영역만 알파를 씌여 보여지게 한다. 쉐이더 그래프는 링크의 유튜브 영상으로 대신한다. 결과.

2D sprite에 하이라이트를 넣는 쉐이더 작업을 해 본다. 너무 간단해서 레퍼런스 조차 없다. 기본 텍스쳐에 추가 라이트 쉐이딩 텍스쳐를 겹쳐 그리고 적절한 옵션으로 블렌드 한다. 그게 다다. 추가적으로 필요한 오프셋 등은 파라미터로 추려내서 코드에서 적절히 세팅하면 되겠다. 결과.

https://www.youtube.com/watch?v=MXZ578OXOog 기본 아이디어는 기본 텍스쳐에 그라데이션을 겹치는 것이다. 어떻게 그라데이션을 만드는가, 기본적으로 빛 방향과 노멀 방향을 알아서 dot product 연산을 한다. 내적 연산 특성 상, 벡터 방향이 같으면 1, 90도 벌어지면 0, 그 뒤로는 음수값을 가진다. 이 특성을 이용한다. 그리고 쉐이딩 단계를 만들어야 하므로, 강제적으로 이 표현을 얻어내는 과정이 섞여 있다. 그라데이션을 내적에 의해 얻는 부분. 이 결과를 기존 텍스쳐와 결합한다. 결과.

https://www.youtube.com/watch?v=rq6yGh-piIU 2D 게임에 아주 많이 나올 법한 쉐이더이다. 기본 아이디어는 원래 Main texture를 설정한 flash color와 섞는다. 이때, 강도, 대상 컬러 등을 외부 인자로 만든다. 상대적으로 간단 하지만, 사용도는 많을 수 있는 쉐이더. 전체 그래프. 결과.

https://www.youtube.com/watch?v=-spc1GJAtLY 기본 원리는 texture u, v 좌표를 원래 u, v 좌표에서 둥그런 모양으로 말아 올린 상태로 원이 커지도록 한다. 따라서 우선 원 모양 값이 부드럽게 만들어지도록 u, v 값을 세팅한다. center와 size값을 이용해서 차를 만들고 그 차를 부드럽게 하여 원 모양을 얻었다. 이에 원래 u, v 를 화면 위치, 비율 등을 감안하여 가공값을 찾는다. 이후 최종 그래프. 관련 material을 적용 후 최종 모습.

https://www.youtube.com/watch?v=8-E8Vp0l6wg Sprite와 배경에 대해 blur 효과를 나타내는 shader에 대해 알아본다. 우선 여기에서의 기본 idea는 sprite texture를 오프셋을 두고 여러번 겹쳐 그리는 것이다. 먼저 sprite blur에 대해 알아본다. 먼저 단순히 main texture와 오프셋을 입력받아 u,v offset을 만들고 그것으로 컬러와 알파를 출력하는 sub shader 를 만든다. 이 sub shader를 활용하여 BlurAmout 파라미터로 조절 강도를 결정하는 node flow를 만든다. 이 것을 각 위 아래 좌 우 정면 방향으로 5번 더한다. 그리고 더한 횟수만큼 나눠 출력에 각기 color와 alpha에 연결 한다. 최종 그..

Rerference : https://www.youtube.com/watch?v=OAfpDaAKVSE Beam shader에 대해 알아본다. 이 쉐이더는 외부 빛에 대한 처리가 필요없다. 따라서 Unlit shader로 제작한다. 우선 빔 같은 이미지가 필요하다. 이를 파라미터로 설정하도 하고 color에 연결한다. 흐르는 효과를 위해 time과 tiling and offset node를 연결하고 이를 빔 텍스쳐에 반영한다. 또한 빔의 시작과 끝이 날카롭게 cut out되는 것을 막고 부드럽게 처리 하기위해 부드러운 텍스처를 마스킹한다. 여기에 더 능동감 있는 빔 연출을 위해, noise 텍스쳐 맵을 섞고 time을 연결해 역시 비슷한 흐름을 만든다. 그리고 섞는다. 최종 그래프. 결과물. 관련 텍스쳐 ..

Water shader는 물 흐름에 따른 물결의 빛반사 표현 등이 중요하다. 우리가 여기서 설정할 값은 normal vector와 emission 값이 되겠다. 우선 보는 바와 같은 물 모양을 만들기 위해 Voronoi node를 사용한다. 이 노드를 Radial Shader node와 사용하면, 부분 부분 뭉쳐서 회전하는 표현을 얻을 수 있다. 원래의 voronoi node Radial Shader를 UV에 연결 한 후. 이 값의 강도 및 칼라 설정 파라미터를 넣고, 시간흐름을 적용한 후 최종적으로 emitter 에 연결한다. 그러면 이대로 물 빛이 나게 될 것이다. 또한 물결을 치도록 하기위해 normal 을 설정한다. 물결 효과를 위해 gradient noise node를 사용한다. 높낮이 표현을 ..

이 쉐이더는 texture를 원형으로(주로) 뒤섞어 회전시킨다. 이런 효과를 위해 만들어 놓은 노드를 알아 둘 필요가 있다. Twirl 노드가 이런 나선형 결과를 반환한다. 아래는 unity doc에 관련 코드다. 따라서 이 노드를 통해 휘몰아치는 유형의 2개의 float를 얻을 수 있고, 이를 주로 texture u, v coord로 사용한다. 그렇다면 자연스럽게 도는 분홍빛 texture는 어디서 가져오는가. 여러 가지 방법이 있겠지만, voronoi node를 사용하여 구현해 본다. 아래는 twril과 voronoi를 연결하기 전과 후의 image 이다. 이미 벌써 그럴싸 해 졌다. Twirl의 offset 인자를 조절하면 회전을 시킬 수 있고, 실시간 회전을 하기 위해 time node를 사용한다..

예전의 cartoon 효과를 내기 위해 많이 사용한 기본 shader 이다. 예시 이미지를 보면, 기본 material이 입혀지고, 그 위에 edge가 있는것을 알 수 있다. 따라서 해당 edge를 그리는 방법을 찾아 본다. 가장 간단한 방법은 정접을 조금 확대하고 back face방향으로 어둡게 그리는 것이다. object를 그냥 확대하면, 로컬 좌표 중심 기준으로 계속 커지게 되므로, 단지 정점의 normal 방향으로 크기를 키운다. 이 점을 유의하여 만든다. 노멀 방향으로 tickness만큼 그게 한후, 원래 위치와 더해 새로운 외곽위치를 찾는다. 그 값을 vertext위치로 output 한다. 전면 제거는 여러 방법이 있다. 아래와 같이 Is Front Face노드를 사용하여 알파채널에 연결해도 ..