분류 전체보기
-
이전 포스트 ([Image Effect] 블러(Blur) 이미지 효과- 02 Trail Renderer 모션벡터 획득 (tistory.com))에 이어 진행됩니다. 이번 포스트에선 아래와 같이 모션벡터를 담는 텍스쳐를 이미지 이펙트로 활용하는 방법에 대해 다뤄 봅니다. (모델 출처 : https://skfb.ly/6XtCV) 우선 제가 사용하는 이미지 이펙트의 혼합 같은 경우, 정석적인 방법이 아닌 그저 제가 아는 지식의 한계가 이모양이라 이렇게 사용한다는 점 양해를 먼저 구합니다. (다른 방법이 있다면 저 좀 알려주세요..ㅠ) 본론으로 들어가, 제가 이미지 이펙트를 사용할 때는 아래와 같은 코드를 이용합니다. using System; using System.Collections.Generic; usin..
[Image Effect] 유니티 블러(Blur) 이미지 효과- 03 Image Effect 적용이전 포스트 ([Image Effect] 블러(Blur) 이미지 효과- 02 Trail Renderer 모션벡터 획득 (tistory.com))에 이어 진행됩니다. 이번 포스트에선 아래와 같이 모션벡터를 담는 텍스쳐를 이미지 이펙트로 활용하는 방법에 대해 다뤄 봅니다. (모델 출처 : https://skfb.ly/6XtCV) 우선 제가 사용하는 이미지 이펙트의 혼합 같은 경우, 정석적인 방법이 아닌 그저 제가 아는 지식의 한계가 이모양이라 이렇게 사용한다는 점 양해를 먼저 구합니다. (다른 방법이 있다면 저 좀 알려주세요..ㅠ) 본론으로 들어가, 제가 이미지 이펙트를 사용할 때는 아래와 같은 코드를 이용합니다. using System; using System.Collections.Generic; usin..
2021.01.04 -
이번 포스팅은 [Blur] 블러 이미지 효과- 01 기본 셰이더 (tistory.com) [Blur] 텍스쳐 기반 블러 이미지 효과- 01 기본 셰이더 이번 포스트는 세 편으로 나뉩니다. 첫 편인 기본 셰이더에선, 블러 텍스쳐를 활용해 원본의 특정 영역에 원하는 방향으로 모션블러를 주는 방법을 설명하며 두 번째 편에서는, 이 셰이더를 Trail develop-4-art.tistory.com 이전 포스팅에서 제작한 셰이더를 활용해 트레일 렌더러의 모션벡터 값을 RenderTexture에 저장하는 과정을 다룹니다. 먼저 트레일 렌더러에서 Vertex를 추가하는 특성에 대해 알아볼 필요가 있습니다. 트레일 렌더러는 min vertex distance보다 큰 변화값이 존재하면 새로운 버텍스를 배열의 앞에 추가합..
[Image Effect] 유니티 블러(Blur) 이미지 효과- 02 Trail Renderer 모션벡터 획득이번 포스팅은 [Blur] 블러 이미지 효과- 01 기본 셰이더 (tistory.com) [Blur] 텍스쳐 기반 블러 이미지 효과- 01 기본 셰이더 이번 포스트는 세 편으로 나뉩니다. 첫 편인 기본 셰이더에선, 블러 텍스쳐를 활용해 원본의 특정 영역에 원하는 방향으로 모션블러를 주는 방법을 설명하며 두 번째 편에서는, 이 셰이더를 Trail develop-4-art.tistory.com 이전 포스팅에서 제작한 셰이더를 활용해 트레일 렌더러의 모션벡터 값을 RenderTexture에 저장하는 과정을 다룹니다. 먼저 트레일 렌더러에서 Vertex를 추가하는 특성에 대해 알아볼 필요가 있습니다. 트레일 렌더러는 min vertex distance보다 큰 변화값이 존재하면 새로운 버텍스를 배열의 앞에 추가합..
2021.01.04 -
이번 시리즈는 아래와 같은 결과물을 만들기 위해 세 편으로 나뉩니다. 와! 공이 지나가는 궤적에 블러가 생깁니다! (2편 : [Image Effect] 블러(Blur) 이미지 효과- 02 Trail Renderer 모션벡터 획득 (tistory.com)) (3편 : [Image Effect] 블러(Blur) 이미지 효과- 03 Image Effect 적용 (tistory.com)) 첫 편인 기본 셰이더에선, 블러 텍스쳐를 활용해 원본의 특정 영역에 원하는 방향으로 모션블러를 주는 방법을 설명하며 두 번째 편에서는, 이 셰이더를 Trail Renderer에 응용하기 위한 Trail Renderer의 모션 벡터값을 버텍스에 추가하는 방법 세 번재 편에서는, 이 두 가지를 종합해 Trail Renderer가 ..
[Image Effect] 유니티 블러(Blur) 이미지 효과- 01 기본 셰이더이번 시리즈는 아래와 같은 결과물을 만들기 위해 세 편으로 나뉩니다. 와! 공이 지나가는 궤적에 블러가 생깁니다! (2편 : [Image Effect] 블러(Blur) 이미지 효과- 02 Trail Renderer 모션벡터 획득 (tistory.com)) (3편 : [Image Effect] 블러(Blur) 이미지 효과- 03 Image Effect 적용 (tistory.com)) 첫 편인 기본 셰이더에선, 블러 텍스쳐를 활용해 원본의 특정 영역에 원하는 방향으로 모션블러를 주는 방법을 설명하며 두 번째 편에서는, 이 셰이더를 Trail Renderer에 응용하기 위한 Trail Renderer의 모션 벡터값을 버텍스에 추가하는 방법 세 번재 편에서는, 이 두 가지를 종합해 Trail Renderer가 ..
2021.01.03 -
NodeJS를 이용해 WebRTC를 구현하기 위해, peers/peerjs: Simple peer-to-peer with WebRTC (github.com) peers/peerjs Simple peer-to-peer with WebRTC. Contribute to peers/peerjs development by creating an account on GitHub. github.com 처음 peerjs 깃허브에 들어가면, 예제가 있긴하지만 예제만으로 동작시키기엔 어려움이 있다. 또한, 유투브에서도 은근 동작하는 예제를 찾기가 힘든데.. 이런 고생을 하는 다른 사람들을 위해 공부했던 내용을 공유한다. 공부를 위해 사용한 예제는 (5) How To Create A Video Chat App With Web..
[WebRTC] PeerJS 사용법NodeJS를 이용해 WebRTC를 구현하기 위해, peers/peerjs: Simple peer-to-peer with WebRTC (github.com) peers/peerjs Simple peer-to-peer with WebRTC. Contribute to peers/peerjs development by creating an account on GitHub. github.com 처음 peerjs 깃허브에 들어가면, 예제가 있긴하지만 예제만으로 동작시키기엔 어려움이 있다. 또한, 유투브에서도 은근 동작하는 예제를 찾기가 힘든데.. 이런 고생을 하는 다른 사람들을 위해 공부했던 내용을 공유한다. 공부를 위해 사용한 예제는 (5) How To Create A Video Chat App With Web..
2020.12.28 -
가끔 아트와 협의 없이 작업하다보면 (여기서부터 잘못이다.) 생각지도 못 한 결과가 나오곤 한다. 예를 들어, 파티클 시스템의 Texture Sheet Animation 모듈에 89개의 분리되어있는 스프라이트 이미지를 박아야 하거나, 캐릭터의 노말맵을 생각하지 않고 있다가, 디자인 기획이 바뀌어 분리 되어 제작되어 있는 캐릭터 이미지를 하나의 스프라이트 시트로 묶어야 하는 경우가 이렇다... 이런 문제를 아트에게 다시 부탁하기도 뭐하고, 내가 해결하기도 귀찮아 그냥 유틸성을 위해 에디터 확장 스크립트를 작성하기로 했다. 확장 기능의 목표 루틴은 다음과 같다. 1. 한 폴더 내에 있는 이미지를 하나로 묶어야 한다. 2. 왼쪽 상단을 0,0으로 시작해 이미지들이 나열되어야 한다. 3. 원하는 만큼의 열에서 ..
[Unity] 귀차니즘이 이끄는 유니티 Sprite Packing Editor가끔 아트와 협의 없이 작업하다보면 (여기서부터 잘못이다.) 생각지도 못 한 결과가 나오곤 한다. 예를 들어, 파티클 시스템의 Texture Sheet Animation 모듈에 89개의 분리되어있는 스프라이트 이미지를 박아야 하거나, 캐릭터의 노말맵을 생각하지 않고 있다가, 디자인 기획이 바뀌어 분리 되어 제작되어 있는 캐릭터 이미지를 하나의 스프라이트 시트로 묶어야 하는 경우가 이렇다... 이런 문제를 아트에게 다시 부탁하기도 뭐하고, 내가 해결하기도 귀찮아 그냥 유틸성을 위해 에디터 확장 스크립트를 작성하기로 했다. 확장 기능의 목표 루틴은 다음과 같다. 1. 한 폴더 내에 있는 이미지를 하나로 묶어야 한다. 2. 왼쪽 상단을 0,0으로 시작해 이미지들이 나열되어야 한다. 3. 원하는 만큼의 열에서 ..
2020.12.24 -
유니티의 타임라인은 PlayableGraph로 이뤄져있다. 이 PlayableGraph는 Update될 때, Evaluate 해줘야하는데, 타임라인의 Pause를 사용하면 Evaluate를 하지 않아 Sprite Animation이 유지되지 않고 Animator의 State가 실행된다. 이 이슈는 Current animation frame is not "hold" when Timeline is paused - Unity Forum 링크 토론에서 활발하게 이뤄져, 결국 playableGraph의 스피드 조절을 하는 Controller 스크립트를 임의로 생성해야 하는 것으로 종결 됐으나, 처음 이 문제를 접하는 사람들은 아마 적잖이 당황하지 않을까 싶다. 이에 유니티 측에서 공식적으로 애니메이션 프레임도 유..
[Unity] 유니티 타임라인(Timeline) Pause 예외 상황유니티의 타임라인은 PlayableGraph로 이뤄져있다. 이 PlayableGraph는 Update될 때, Evaluate 해줘야하는데, 타임라인의 Pause를 사용하면 Evaluate를 하지 않아 Sprite Animation이 유지되지 않고 Animator의 State가 실행된다. 이 이슈는 Current animation frame is not "hold" when Timeline is paused - Unity Forum 링크 토론에서 활발하게 이뤄져, 결국 playableGraph의 스피드 조절을 하는 Controller 스크립트를 임의로 생성해야 하는 것으로 종결 됐으나, 처음 이 문제를 접하는 사람들은 아마 적잖이 당황하지 않을까 싶다. 이에 유니티 측에서 공식적으로 애니메이션 프레임도 유..
2020.12.24