방송TIP 0

파티클 웹사이트 바로가기

관련 게시글

(기능소개) 방송화면에 파티클 뿌려주는 위젯

(활용법 안내) [데이터주의] 파티클 조합 - 방송화면을 더 예쁘게 꾸며보자

기존에는 범위 단위로 파티클을 생성할지 말지를 선택하는 형태만 존재했습니다.

이 방법은 간편하고 직관적으로 범위를 지정할 수 있지만, 정밀한 파티클을 생성하기에는 어려움이 있었죠.

기존 방식에 대한 하위호환을 지원하는 동시에, 3가지 생성 방식이 추가로 도입되었습니다.

파티클 생성 지점을 직접 선택할 수 있는 옵션으로 점, 사각형, 원형 생성 유형이 추가되었습니다.

세 유형 모두 생성 위치 항목의 네모 영역이 화면 영역에 대응되며, 이 영역을 마우스로 드래그하여 쉽게, 그리고 기존보다 훨씬 정밀하게 파티클 생성 위치를 정의할 수 있습니다.

이를 이용해 캐릭터가 내뱉는 입김이나, 공연장의 불꽃과 같이 화면 상의 특정 영역에서 스폰되어야하는 파티클의 처리가 가능해졌습니다.

포토샵을 기준으로, 기존의 투명도 처리 방식은 [표준] 블랜딩 모드였습니다.

표준 블랜딩 모드는 이름 그대로, 투명도를 처리하는 가장 표준적인 방법이며, obs와 xsplit을 포함한 절대다수의 프로그램이 투명도를 처리할 때 사용하는 로직이기에, 서드파티인 파티클에서 지원할 수 있는 유일한 블랜딩 모드기도 합니다.

하지만 표준 블랜딩 모드로는 표현의 한계가 극명합니다. 특히 빛과 같은 표현에서 굉장히 취약합니다.

영상소스로 빛 형태 파티클을 만들어서 방송화면에 적용해보려 하신 분들은 영상 자체에 배경화면을 깔지 않는 한 굉장히 이질감이 드는 걸 체험하셨을거에요. 이미 만들어진 영상 소스는 방송 송출 프로그램에서 크로마키를 따 적용해봤자 표준 블랜딩 모드로밖에 블랜딩되지 않기 때문입니다. 뒤에 깔리는 배경 레이어와 원하는 형태로 블랜딩되지 못하는 거죠.

이를 타개하기 위해, 파티클에 사용할 배경화면을 추가함으로써 최종적으로 표준 블랜딩 모드로 블랜딩되더라도 다른 블랜딩 모드가 적용된 것처럼 보이는 기능을 도입했습니다.

지원하는 블랜딩 모드는 위와 같으며, 포토샵의 블랜딩 모드와 동일합니다. 다만, 선명한 라이트의 경우 포토샵의 결과와 약간의 시각적 차이가 존재합니다.

표준 블랜딩 모드를 제외한 모든 블랜딩 모드는 배경화면을 설정해주셔야 작동합니다.

배경화면은 1Mb의 제한이 있으므로 jpg 사용을 권장합니다.

일반적인 이미지의 경우, 1920x1080 사이즈 수준으로 처리가 가능하고, 배경의 일부분에만 영향을 주게 되므로 가로 사이즈 5~800px 정도까지는 떨어져도 크게 티가 나지 않습니다.

블랜딩 모드의 비교는 눈으로 직접 보면서 식별하면 확 와닿기에, 비교군을 가져와봤어요.

위 파티클은 기존 파티클 프리셋으로 등록되어있는 플레어인데, 투명도를 2배 가량 높인 파티클입니다.

빛 주변에 검은 테두리가 보이죠?

표준 방식 블랜딩 모드는 이처럼 표준 방식이 아닌 방식으로 블랜딩해야 더 예쁜 상황에서, 우리가 자연스럽게 받아들이는 형태와 다른 모습을 띠게 됩니다.

파티클에서 기존 제공하고 있던 플레어는 이 현상이 덜 보이도록 투명도를 눌러서 제공하고 있었습니다.

이건 동일한 파티클을 선형 닷지(추가) 블랜드 모드로 블랜딩한 결과입니다.

기존 결과보다 일러스트에 훨씬 자연스레 묻어들어가는 걸 확인할 수 있습니다.

단순히 배경화면을 입력하고, 블랜딩 모드를 변경하는 것으로 기존보다 훨씬 자연스러운 파티클을 얻을 수 있으며, 배경화면과 파티클을 모두 포함한 영상을 직접 만들지 않는 이상 현재 국내 트위치에 잘 알려진 방법들로는 대체가 불가능한 방식입니다.

(영상에 배경화면을 직접 포함하지 않는 경우, 블랜딩 모드 효과의 경우 영상 소스로도 대체할 수 없습니다. 혹시라도 대체 가능한 방법이 있다면 공유해주시면 감사하겠습니다.)

다만, 이 방식에는 치명적인 단점이 하나 존재합니다.

이 이미지는 위의 선형 닷지(추가) 블랜딩 모드를 적용한 파티클에서 배경 일러스트를 제외한 모습입니다.

파티클이 표준 블랜딩 모드가 아닐 땐, 방송 송출 프로그램에서 레이어 단위로 렌더링될 때 표준 블랜딩 모드가 아닌 것처럼 속이는 결과를 내기 위해 파티클 인접 위치의 배경화면을 함께 렌더링합니다. 어찌됐건 실제로 렌더링되는 방식은 표준 블랜딩 모드기 때문입니다.

이로인해 서로 다른 파티클 소스의 파티클이 겹칠 경우, 배경화면 영역에 의해 뒤쪽 레이어의 파티클이 가려집니다. (같은 소스 내 파티클의 겹침은 상관없습니다.)

그러므로 표준 블랜딩 모드가 아닌, 특수한 블랜딩 모드를 사용하는 파티클은 반드시 배경화면 레이어 바로 위에 존재해야 합니다.

또, 특수 블랜딩 모드를 사용하는 파티클은 하나만 존재하거나 다른 특수 블랜딩 파티클과 겹치지 않게끔 제작되어야 합니다.

소소한 편의성 기능으로, 배경화면을 지정하면 생성 유형의 사각 박스에 배경화면 이미지가 보여집니다.

파티클 생성 시 블랜딩 모드를 사용하는 경우, 배경화면을 먼저 등록해주시면 위치 조정을 더욱 편하게 할 수 있습니다.

기존에는 초기 속도와 가속도의 방향과 크기만 설정할 수 있었습니다.

그래서 다이나믹한 파티클의 움직임을 표현하려면 노이즈의 적절한 활용이 필수였죠.

하지만, 노이즈만으로는 원하는 파티클의 움직임을 표현하기에 부족함이 있었습니다.

이제 초기 속도와 가속도에 각도 값이 추가되었습니다.

개별 파티클은 본인이 갖는 속도와 가속도에 지정된 각도만큼의 편차를 갖게되고, 이를 통해 파티클이 움직일 방향을 더 쉽게 지정할 수 있게 되었습니다.

주로 위의 이미지와 같이 부채꼴 형태로 퍼지는 파티클에서 유용하게 사용할 수 있습니다.

기존에는 파티클이 초당 몇 번 생성되는지(초당 생성량), 하나의 파티클이 얼마나 지속되는지(지속시간)에 대한 설정만 가능했습니다. 즉, 개별 파티클은 순수하게 독립적으로 생성되고 사라졌습니다.

이제 파티클은 1회 당 n초 생성되는, 묶음 단위가 되었습니다.

위의 설정은, 1.3초 동안 파티클을 생성하고, 2.9초 동안 쉬고를 반복하는 파티클입니다.

생성 간격과 1회당 생성시간을 0초로 설정하면 기존과 동일하게 독립적으로 동작하는 파티클이 됩니다.

주로 사람의 입김과 같이, 꾸준히 파티클이 생성되면 오히려 부자연스러운 파티클에서 유용하게 사용할 수 있습니다.

위의 입김 이미지에 이 기능이 적용되었습니다.

 - 기능이 늘어난 만큼, 기존의 4개 탭으로는 편집 기능을 모두 담을 수 없어 1개의 탭이 추가되었습니다.

 - 파티클 편집 화면의 편의성이 개선되었습니다.

기존에는 어떤 값이든 바꾸면 무조건 파티클을 모두 지우고 새로 그리는 방식을 사용했지만, 이제 모든 파티클을 꼭 리셋해야 하거나, 혼선이 있을 수 있는 상황이 아니라면 기존에 존재하는 파티클로 변경되는 값을 직접 확인할 수 있게 되었습니다.

 - 간단한 GPU 최적화가 있었습니다. 이제 기능을 적게 사용할수록 하나의 파티클을 그리는 데 사용하는 비용이 저렴해졌습니다.

이미지는 10만개의 파티클을 30프레임 선에서 렌더링하는 모습입니다. 싱글코어로 구현되어있으므로, 개발 컴퓨터의 8개 코어를 전부 사용하는 (10만개의 파티클을 각기의 프로세스로 실행하는) 경우 80만개의 파티클을 렌더링할 수 있습니다.