spine-unity 아웃라인 쉐이더
February 10th, 2020
spine-unity 런타임의 모든 쉐이더에 대한 아웃라인 렌더링 지원을 알려드리게 되어 기쁘게 생각합니다! 이를 통해 캐릭터, 움직이는 Spine UI 요소 등의 주위에 선택한 컬러 아웃라인을 쉽게 표시할 수 있습니다.
spine-unity 런타임과 함께 제공되는 각 쉐이더에서 이제 Outline 섹션을 추가로 제공합니다. 머티리얼의 Outline 파라미터를 활성화하면 쉐이더는 Spine/shader_name에서 새로운 Spine/Outline/shader_name 쉐이더 변형으로 자동 전환되고, 비활성화하면 전환 전으로 다시 돌아갑니다.
별도의 아웃라인 쉐이더를 통해 아웃라인이 필요하지 않은 곳에서 렌더 패스가 낭비되지 않도록 하고 드로우 콜 배칭을 최적으로 유지합니다.
아웃라인 머티리얼로 만들기 및 전환하기
아웃라인 머티리얼을 만들려면 먼저 원본 머티리얼을 복제합니다.
참고: 이 머티리얼은 일반적인
SkeletonRenderer,SkeletonAnimation또는SkeletonMecanim을 사용할 때 스켈레톤 에셋 옆에 있는*_Material입니다.SkeletonGraphic의 경우 머티리얼은SkeletonGraphicDefault입니다.
새 머티리얼을 선택한 후 머티리얼 인스펙터를 통해 Outline 프로퍼티를 활성화합니다. 그러면 머티리얼이 해당 아웃라인 쉐이더 변형으로 자동 전환됩니다.
이제 아웃라인 머티리얼이 준비되었으므로 평소처럼 SkeletonRenderer 및 SkeletonGraphic 컴포넌트에 할당할 수 있습니다.
SkeletonRenderer의 경우,SkeletonRenderer.CustomMaterialOverride를 통해 또는 SkeletonRendererCustomMaterials 컴포넌트를 추가하여 이를 수행할 수 있습니다.SkeletonGraphic의 경우,SkeletonGraphic.material프로퍼티를 직접 설정할 수 있습니다.
스켈레톤 위에 마우스를 올려놓으면 나타나는 아웃라인의 예를 보시려면 이 블로그 게시물의 끝에 있는 Outline Shaders example scene 섹션에 설명된 새 예제 장면을 살펴보십시오.
메쉬 및 아틀라스 텍스처의 필요조건
아웃라인 쉐이더 작동 방식 - 이웃 샘플링
일반적으로 RegionAttachment 또는 MeshAttachment 내의 투명한 픽셀은 프레임 버퍼에 영향을 주지 않습니다. 아웃라인 쉐이더에서 각각의 투명한 픽셀은 이제 일정한 거리에 있는 투명한 픽셀의 이웃에 불투명한 픽셀이 있는지 테스트합니다. 불투명한 픽셀이 있는 경우 아웃라인 색이 그려집니다.
참고: 이 경우 정확한 그리기 순서를 유지하려면 영향을 받는 스켈레톤의 추가 렌더 패스가 필요합니다.
이미지 및 아틀라스 텍스처 - 안쪽 여백 또는 공백 추가
위와 같이 어태치먼트의 테두리에 아웃라인 색상이 나타나는 경우, 인접한 아틀라스 이미지 영역의 아웃라인이 메쉬로 될 가능성이 높습니다.
아틀라스 내보내기 설정을 통해 더 많은 안쪽 여백을 추가하여 근처의 아웃라인을 위한 충분한 공간을 남겨둘 수 있습니다. 안쪽 여백을 늘리는 대신 공백 제거를 사용하지 않도록 설정할 수도 있습니다.
또는 이 문제가 더 이상 발생하지 않을 때까지 아웃라인 너비를 줄일 수 있습니다.
메쉬 어태치먼트 - 아웃라인이 잘리지 않도록 공간을 남겨 두십시오
아웃라인은 메쉬 테두리 내에서만 그려집니다. 위와 같이 아웃라인의 일부가 잘 리면 메쉬 테두리는 이미지의 불투명한 픽셀에 너무 단단히 둘러싸여 있을 수 있습니다.
이 문제를 해결하려면 메쉬 정점을 더 밖으로 이동하여 충분한 공간을 확보하십시오(아래 녹색 표시). 이미지의 테두리 주위에 공백을 더 추가해야 할 수도 있습니다.
또는 이 문제가 더 이상 발생하지 않을 때까지 아웃라인 너비를 줄일 수 있습니다.
아웃라인 쉐이더 예제 장면
이제 spine-unity 런타임 패키지에는 추가 예제 장면인 Spine Examples/Other Examples/Outline Shaders가 제공됩니다. 이 장면에서는 마우스를 위에 놓았을 때 기존 머티리얼에 대해 미리 준비된 아웃라인 머티리얼 변형으로 전환할 수 있는 방법을 보여줍니다. 예제 장면에서는 Unity 이벤트 시스템의 이벤트 트리거 컴포넌트를 사용하여 마우스 포인터 입력 및 종료 이벤트에 반응합니다.
결론
spine-unity 런타임의 이러한 추가 기능을 사용하면 스켈레톤에 컬러 아웃라인을 쉽게 추가할 수 있습니다. Spine 포럼에서 여러분의 생각과 작품을 언제든 공유하십시오!