[WIP] 아웃라인 섀도우 고려하기

이 보도에 관하여

여기서 우리는 Unity를 사용하여 이 대강의 음영의 구조와 주요 기법과 문제점을 고려할 것이다.

개요 그림자란?

윤곽선은 쉽게 말하면 모델(대상) 주위의 선을 기준으로 하여 윤곽선이라고도 부른다.
이 대강을 유닛으로 표현할 때는 주로 면도기로 표현하기 때문에 실루엣 면도기라고 불린다.
윤곽 음영을 사용하여 다음과 같은 표현을 할 수 있다.

장면 선택 개요(주황색)

Unity 얼굴 윤곽선(왼쪽: OFF, 오른쪽: ON)

단순 증폭 생성 방법의 기본

가장 간단하게 윤곽을 표시하는 방법은 모델을 한 바퀴 크게 그리고 그 위에 모델을 그리는 방법이다.
그러나 이 방법은 문제가 많아 간단한 모형만 쓸 수 있다.
여기서 그림을 간단하게 확대하는 방법을 확인해 봅시다.

단순 확대를 통한 아웃라인 생성
첫 번째 단락의 사각형은 대강을 문제없이 표현했고 두 번째 단락의 이미지는 오른쪽의 대강을 표시하지 않았다.또한 레이어 3 이미지는 내부 컨투어가 없는 것처럼 표시됩니다.
이 방법은 원점에서부터 확대되기 때문에 원점과의 거리가 다르기 때문에 대강의 폭이 변화하거나 원점으로 향하는 가장자리에서 대강이 모델 안쪽으로 들어가는 문제가 존재한다.

대책으로 각 변에서 바깥쪽으로 윤곽을 만드는 방법이 있다면 해결할 수 있을 것이다.
그렇다면 이 방법을 실현하기 위해 나는 면도기로 윤곽을 만들어 보았다.

면도기로 법선 방향으로 확대하는 방법

기본적으로 방금 전의 이미지의 확대와 생각은 같다.
차이점은'원점부터 확대'가 아니라'법선 쪽으로 확대'라는 점이다.
이것은 이번 차폐 코드다.

코드

4

Shader "Unlit/NormalOutLine"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _BaseColor("BaseColor", Color) = (1, 1, 1, 1)
        _OutlineColor("Color", Color) = (1, 1, 1, 1)
        _OutlineWidth("Width", float) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass // 1
        {
            cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
            };

            half _OutlineWidth;
            half4 _OutlineColor;
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex +  v.normal * _OutlineWidth / 100);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return _OutlineColor;
            }
            ENDCG
        }
        
        Pass // 2
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            half4 _BaseColor;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return _BaseColor;
            }
            ENDCG
        }
    }
}

그럼 이 면도기에 적응해 보세요.
즉시 거리측정기에서 [3D Object] 큐브를 선택하고 [3D Object] Sphere]를 선택하여 구형을 만들고 이 두 모델에서 상기 정규 Outline을 선택한다.적응shader.

입방체와 구체의 대강을 생성하다
구체에는 문제가 없지만 입방체의 윤곽은 이미 끊어졌다.
이것은 정점이 가지고 있는 법선 데이터가 다르기 때문이다.
유니티가 법선 데이터를 쉽게 확인할 수 없으니 블렌더로 모델의 법선 데이터를 확인해보자.

입방체와 정점의 평면의 법선(분홍색의 선)
각 정점에서 얼굴과의 법선을 표시해 보았다.확실히 법선은 표면에서 수직으로 뻗어 있기 때문에 법선 방향으로 뻗으면 각과 변 부근에 윤곽이 생기지 않는다.
이것은 Blender 상판의 융합이 실제 법선이 수직인 상황을 시뮬레이션한 결과이다.

수직 법선 시뮬레이션
확실히 Unity에서 볼 수 있는 상태가 됐어요.
다음은 정점의 법선 데이터를 블렌더로 편집하고 유닛을 가져와 구상된 대강이 있는지 확인한다.
간소화하기 위해 임시 입방체의 표면만 고려하고 주황색 판으로 예상한 윤곽을 표현했다.

수직이 평면에 수직인 상태
이제 평면에 수직인 법선이기 때문에 프로파일은 각도로 덮어쓸 수 없습니다.

법방향 관련면의 평균 벡터 상태
따라서 위에서 말한 바와 같이 우리는 각법선 관련 면의 평균 벡터를 편집했다.

법선 수정 후 얼굴과의 법선(분홍색 선)
평균 벡터의 법선이라면 이 시뮬레이션과 같을 것이다.

평균 벡터 법선 시뮬레이션
그럼 유닛으로 확인해 보세요.

모델 수정 전(왼쪽) 및 모델 수정 후(오른쪽)
입방체의 윤곽을 순조롭게 만들었다.
법선 데이터는 표면에서 수직이기 때문에 각과 변의 부분에 윤곽이 생기지 않는다는 것이다.
왜 sphere가 아름다운 윤곽을 만들 수 있는지 말하자면 법선이 원래 반죽과 수직으로 있지 않고 평균 벡터이기 때문이다.

문제점

그럼 이 면도기로 완벽한 실루엣을 표현할 수 있을까요?
그렇게 순조롭지 못해서 유감입니다.

겹치면 안 돼요.

중첩 시 프로파일 포함

복잡한 모델에 대응할 수 없다

무너진 유니티를 나타내는 손의 윤곽

사이트 축소판 그림

https://light11.hatenadiary.com/entry/2018/05/13/183314

라이센스 태그

© Unity Technologies Japan/UCL