방송TIP 0

파티클 배포 이후 어떤 식으로들 사용하고 계신지 둘러보았는데, 파티클 하나만 사용하는 식으로 간단히 사용하고 계신 분이 많더라구요.

관련 작업을 해보신 분이 아니면 편집도 많이 생소할거고, 어떻게 조합해야하는지도 감이 안 올 수밖에 없긴 합니다.

시작하기에 앞서, 최초 배포했던 파티클 편집 창에 파티클이라는 개념을 처음 접하시는 분들을 위해 간단한 설명을 함께 띄워주도록 기능 개선이 되었다는 점 알려드려요.

파티클 사이트

http://canny.kr/

패치노트와 간단한 소개는 https://tgd.kr/tip/37491020 이곳에서 확인하실 수 있습니다.

제가 아티스트가 아니고... 공돌이인지라 전문 아티스트들의 손길을 거친 작품에 비할 건 안되겠지만, 일반인 분들이 요걸 어떻게 활용할 수 있는지 이해하기에 도움이 되지 않을까 하여 일러스트 몇개 공수해다가 값 설정 작업을 해봤습니다.

서로 다른 파티클 겹쳐 사용하기

사용된 모든 파티클은 [파티클 공유]에서 확인할 수 있습니다.

단, 일러스트와 파티클 조합에 맞춰 약간의 값 수정이 있으며, 어떤 부분이 바뀌었는지는 이미지 하단에 명시되어 있습니다.

파티클 명칭에서 괄호 속 이름은 베이스로 사용한 파티클의 사이트 내 공유된 이름입니다.

아, 그리고 이 이미지들 그대로 따다가 방송화면에서 사용하는 건 위험할 수 있어요. 일러스트 무료 여부 검증 안 했습니다.

[사용된 파티클]

1. 꽃잎 휘날리는 파티클 (꽃)

　 - 이미지 내 바람 방향에 맞춰 꽃잎 날리는 방향 수정

　 - Size over lifetime, Velocity over lifetime 조합하여 꽃잎이 먼 곳에서 오는 것처럼 묘사 (작아졌다가 커지게)

　 - 배경 일러스트에 더 잘 녹아들도록 투명도 조정

2. 공중에 떠다니는 노란 빛무리 (플레어)

　 - 일러스트의 분위기에 맞춰 색상 조정

　 - 다른 파티클에 비해 은은하게 보여질 수 있도록 스폰 갯수 조정

3. 하단에서 올라오는 하얀 파티클 (더스트)

　 - 스폰 갯수 조정

　 - 색상 조정

　 - 기존보다 더 아래에 깔리도록 속도 조정

[사용된 파티클]

1. 비  내리는 파티클 (비)

　 - 일러스트의 시선에 맞춰 속도 및 방향 조정. 이미 최고속도이므로 Velocity over lifetime의 모든 값을 조정하여 조금 더 빠르게 변경

　 - 색상 및 투명도 변경. 약간 푸른 빛이 돌게 하고, 더 투명하게 변경

　 - 더 작게 보이도록 크기 조정

2. 바닥에 맺히는 빗방울 파동 (빗방울)

　 - 일러스트의 바닥 거리, 방향에 맞춰 크기, 스폰 갯수, 색상 및 투명도 조정

3. 안개 (안개)

　 - 비에 의한 물안개로 보이도록 크기 및 색상, 속도 조정

　 - 더 넓은 지역에서 스폰되도록 속도 조정

[사용된 파티클]

1. 별 (별)

　 - 카툰풍에 어울리도록 크기 조정

　 - 은은하게 움직이도록 속도 조정

　 - 일러스트 색감에 어울리도록 색상 조정

2. 별똥별 (별똥별 (카툰풍))

　 - 일러스트의 분위기에 어울리도록 크기 및 색상 조정

같은 파티클 겹쳐 사용하기

방송 화면에는 여러 요소들이 겹쳐서 사용되죠.

동일한 파티클을 두 개 이상 사용하고, 각각의 레이어 위치를 다르게 두면 어떤 파티클은 채팅창이나 캐릭터 위로, 또 다른 건 아래로 지나가게 할 수 있습니다.

간단한 트릭이지만 방송화면에 손쉽게 볼륨감을 줄 수 있겠죠.

부록 : 3D인데... 안 무겁나요?

파티클 생성 갯수를 극단적으로 높인 상태에서의 실행 결과입니다.

i7-7700, gtx1060 기준으로 CPU 7~80%, GPU 60%정도 나오네요. (방송 off 상태)

초당 300개 스폰, 개별로 20초 지속되는 파티클 15개를 동시에 적용했습니다. 파티클 위젯당 6000개의 파티클이 존재하고, 15개의 위젯이므로 9만개의 벚꽃이 휘날리는 상황입니다. (최신버전의 XSplit에서 테스트함)

위 상황은 의도적으로 사용량을 극한으로 끌어올린 상태구요.

이 게시글에서 소개한 정도의 파티클 조합(3~5개)은 CPU와 GPU 각각 3~5% 선에서 처리가 가능합니다.

다른 방식으로 파티클을 등록하는 상황 대비 어느 정도의 성능 차이냐면...

영상으로 대체하는 경우

 - 배경까지 영상에 집어넣어 모든 파티클 조합 + 배경까지 하나의 영상으로 인코딩이 된 경우 가장 가볍습니다.

 - 개별 파티클 소스 영상을 조합해서 사용하는 방식보다 약 20%정도 빠릅니다.

프로그램으로 대체하는 경우

 - 파티클 생성하는 프로그램을 사용하는 방식보다 약 2배 가량 느리나, 게임캡쳐 vs 웹페이지 소스로 인한 성능 차이는 시험해봐야 합니다.

 - 라이브 바탕화면 프로그램을 사용하는 방식의 경우, 영상과 동일한 차이를 보입니다.

다른 웹 기반 위젯

 - Html5를 이용한 위젯의 경우, 위젯에 따라 다릅니다.

　 : 3D 최적화 정도에 따라 다릅니다. 파티클 위젯은 매시 인스턴싱을 적용한 파티클로, 이 이상의 최적화가 적용된 파티클 위젯이라면 더 가볍게 동작할 수 있습니다.

 - Html5를 이용하지 않은 위젯(2D 위젯)보다 1.5배 이상 빠릅니다. (파티클 갯수 동일한 상황이면 5배 이상 빠름)

　 : DOM 구조와 Html5의 차이로 발생하는 성능 차이이므로, 파티클 위젯에서 2D로 설정하는 것과는 무관합니다.

정리하면, 일부러 어마어마하게 파티클을 복제하여 사용하지 않는 이상 어지간해서는 마음껏 늘려 사용하셔도 방송에 무리가 없습니다!

아이디어를 받습니다

파티클 위젯을 선보인지 이제 열흘 정도 되었는데요. 지금도 많은 기능은 아니지만, 어느 정도 안정적으로 사용하시는 스트리머 분들이 늘어나는 추세고, 질적으로 여러 파티클 기능이 도입되었습니다.

현재 24종의 파티클이 기본 제공되고 있는데요. 개인이 제작하고 운영하는 상황이다보니 아이디어가 고갈된 상태입니다.

원하시는 파티클 이펙트가 있으시거나, 추가되었으면 하는 기능이 있으면 알려주세요!

검토 후 제작해드리겠습니다!

혹은, 파티클이 아닌 다른 위젯도 의견 받습니다 :D 버그 제보도 좀...