WannaFlySomeDay 22

[Animation System] Mixamo와 RootBone.

Character Animation Testing을 위해 대중적인 리소스 사이트를 이용한다. https://www.mixamo.com/#/ Mixamo www.mixamo.com 캐릭터와 관련 animation 리소스를 쉽게 얻을 수 있다. 해당 캐릭터와 관련 animation을 다운로드하고 엔진에서 임포팅 한다. Animation BluePrint를 만들고 캐릭터를 연결한다. 그리고 AnimGraph를 열어 우선 땅 위에서의 기본 동작을 정의할 Ground Locomotion 을 만든다. 그래고 해당 로코모션에 아래와 같은 상태를 만든다. 각 상태는 speed 값에 따라서 상태 이동 된다. 여기까지는 크게 어려운 것은 없다. 다만 믹사모에서 stop run을 찾으면 아래와 같은 animation 들이 ..

Unreal Engine 개요.

Unreal Engine에 대해 학습을 하면서 필요한 내용을 블로그에 정리 해 본다. Udemy의 Unreal Engine 4 c++ The Ultimate Shooter Course를 4개월간 학습하면서 엔진에 대한 감을 잡도록 했다. 학습이 모두 마무리 된 지금, 일부 내용들이 여전히 내 것이 아님을 느낀다. ( https://www.udemy.com/course/unreal-engine-the-ultimate-shooter-course/?couponCode=KEEPLEARNING ) 따라서 관련 내용을 최대한 리뷰 하면서 내것으로 만들어 보려는 최대한의 노력을 해 보도록 한다. 최근 몇년간 언리얼 엔진을 좀 익숙하게 다루어보고자하는 많은 시도들이 사실 잘 안되었다. 돌아보면 여러 이유들이 있었겠지만..

[SG] Fire Effect

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

[SG] Toon Shader Graph

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

[SG] Shock Wave Effect SG

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

[SG] Sprite & Background Blur.

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에 연결 한다. 최종 그..

[SG] Laser Beam Shader.

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

[SG] Water Shader

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