처음에

Unity의 uGUI Image에 Outline 스크립트를 적용하면 이미지에 윤곽선을 붙일 수 있지만 Glow와 같은 흐릿한 윤곽선을 붙이는 것은 어렵다.
대응책으로서는 이쪽의 코가네 블로그씨에서도 소개되고 있지만, 이하의 GlowImage라고 하는 프로젝트내에 있는 C#과 Shader 코드를 사용하는 방법이 있다.
htp:///바바-s. 하테나 bぉg. 코m/엔트리/2017/12/31/211500
GlowImage의 Github
htps : // 기주 b. 코 m/Syぁrぃ/Gぉ우우마게

이번에 자신의 공부가 나라 이쪽의 코드를 해독하고 있을 때, 「Unity의 Mask 기능에 대응하고 있지 않는 것」과 「셰이더로 최적화 할 수 있을 것 같은 곳이 있는 것」을 깨달았으므로, 개량해 보았다.

원래 코드의 GlowImage에서하는 일

글머리 기호로 하면 다음과 같이 된다
· Image 컴퍼넌트를 상속한 GlowImage 클래스를 작성
・GlowImage 클래스의 파라미터로부터 기존 Image에 아웃라인용의 정점과 메쉬를 추가한다
· 셰이더로 윤곽을 그리면서 가우시안 처리로 흐리게
· 마지막으로 일반 이미지를 그려서 완료

Unity의 Mask 기능에 대응

Unity의 Mask 기능은, canvasRenderer에 등록되어 있는 머티리얼로부터 마스크 처리가 적용되고 있는 코드를 선별해 처리를 실시하고 있다.
기존 코드에서는 canvasRenderer에 등록하는 처리가 빠져 있었기 때문에, canvasRenderer를 오버라이드(override) 해, Image.material에 머티리얼을 격납하고 나서 Graphic 클래스의 materialForRendering을 불러 대응했다

        public override Material materialForRendering
        {
            get
            {
                if(m_Material == null)
                {
                    material = new Material(Shader.Find("UI/GlowImageImprovement"));
                }
                // ここでパラメーター設定行う
                material.SetFloat("_OutlineSize", m_OutlineSize);
                material.SetColor("_OutlineColor", m_OutlineColor);
                material.SetFloat("_OutlineStrength", m_OutlineStrength);
                string format = "QUALITY_{0}";
                foreach (var item in System.Enum.GetNames(typeof(ImageOutlineQuality)))
                {
                    material.DisableKeyword(string.Format(format, item.ToUpper()));
                }
                material.EnableKeyword(string.Format(format, quality.ToString().ToUpper()));

                return base.materialForRendering;
            }
        }

가우시안 처리 최적화

기존 코드의 셰이더라면 통상의 평활화 처리 때문에 무게(3x3, 7x7 등)의 수가 늘어날수록 루프수가 9, 49 등 상당히 현저하게 많아지고 있다.
화상 처리의 흐림 처리에 자주 사용되는 가우시안 블러를 사용할 때, x와 y의 요소를 분리해 처리할 수 있는 경우 루프수를 억제할 수 있다.
이번에는 다음 사이트를 참고로 코드를 짠다.

【Unity】 【셰이더】 가우스 함수를 사용하여 흐림 효과
htp // gght11. 하테나아 ry. 코m/엔트리/2018/05/20/010105
Unity에서 가우시안 블러 구현
htp : // 에디 m18. 는 bぉ. jp/엔트리/2018/12/30/171214

샘플 프로젝트

코드 전문은 아래 프로젝트를 참조하십시오.
※Windows10+Unity2018.4.0f1로 동작 확인이 끝났습니다.
※Image의 Type이 「Simple」만 대응
htps : // 기주 b. 코 m / 마도 라무 / G ぉ ぃ 마게이 mp 로즈 멘 t

실행 결과

보충

Unity의 Outline은 정점과 정점 칼라를 추가하고 있을 뿐이므로 원화상도 포함해 1pass로 렌더링 하고 있습니다만, 이번의 코드는 가우시안 처리의 관계상 2pass로 렌더링 하지 않으면 안 되므로, 처리적으로 조금 무거울지도 ...