Nichi72

그래픽 API에 따라서 안드로이드 빌드시 쉐이더가 깨질 수 있습니다.

저는 Vulkan API가 기본 API로 되어 있었습니다.

기본인 VulkanAPI로 빌드 했더니 Forge에서 예제로 준 파일과 Forge로 작업 했던 쉐이더가 깨지는 현상이 생겼었습니다.

그래픽 API를 확인해 보세요.

OpenGL3로 안드로이드 빌드 했을때

Forge 예제 쉐이더는 정상적으로 작동이 되었으나 Forge로 만든 작업물은 쉐이더가 깨져서 보이지 않았습니다. 

OpenGL2로 안드로이드 빌드 했을 때  

Forge 예제 쉐이더와 Forge로 만든 작업물 쉐이더 모두 정상적으로 작동 했습니다. 

원래 이걸 보면서 홀로그렘을 만들고 있었다. 

https://sharpcoderblog.com/blog/create-a-hologram-effect-in-unity-3d 

이 쉐이더를 그냥 에셋 스토어에서 굴러다니는 좀비 모델에 테스트 해봤다.  

이렇게 만들고 있었는데 기획자분이 줄무늬 없는 그런 홀로그렘은 원하셔서 눈물을 머금고 텍스쳐 부분을 빼봤는데

세상에 

구강구조 TMI.... 

저는 당신의 구강구조를 알고싶지 않습니다 좀비 선생님.. 

내부 구조가 있는 모델은 알파로 투명하게 만들면 내부 구조가 보일 수 밖에 없다. 

예전에 알파가 대환장파티라는걸 공부해 둬서 다행이다. 

darkcatgame.tistory.com/31

이 블로그를 참고해서 고쳤다. 

결론은 간단하게 말하자면 2pass로 Zwrite On , Off 하면 되는 문제이다.

근데 원래 있던 코드를 2Pass 적용하는데 코드가 복잡해서 잘 안됐다. 쉐이더 코드를 읽을줄은 아는데 전체적으로 뜯어 고치는건 아직 어렵다..

그래서 처음 썼던 쉐이더코드 말고 해당 블로그에서 2Pass 를 통해 처리하는 코드를 토대로 정말 간단한 림 라이트를 고치는 방향으로 갔다.

darkcatgame님의 코드에서

이렇게 수정했다. 

Shader "Custom/RimLight"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _RimPower ("RimPower" , Range(1, 5) ) = 3
     
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        
        ZWrite on    //! zwrite는 기본적으로 켜져있지만 확실하게 코드를 짜줍니다.
        ColorMask 0    //! 렌더하지 않습니다.
        CGPROGRAM
 
        #pragma surface surf _NoLit nolight keepalpha noambient noforwardadd nolightmap novertexlights noshadow        //! 최적화 코드
 
        struct Input
        {
            float2 color:COLOR;
        };
 
        void surf (Input IN, inout SurfaceOutput o)
        {
        }
        float4 Lighting_NoLit(SurfaceOutput s, float3 lightDir, float atten)    //! 커스텀 라이트 함수를 만들어 아무런 연산을 하지 않습니다.
        {
            return 0.0f;
        }
        ENDCG
        
 
        ZWrite off
        CGPROGRAM
 
        #pragma surface surf Lambert alpha:blend
 
        sampler2D _MainTex;
        fixed4 _Color;
        float _RimPower;

        struct Input
        {
            float2 uv_MainTex;
            float3 viewDir;
        };
 
        
 
        void surf(Input IN, inout SurfaceOutput o)
        {
            // 여기에서 따로 림라이트를 만들어서 홀로그램을 만들자
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex );
            //o.Albedo = c.rgb;
            float rim = saturate(dot(o.Normal, IN.viewDir));
            rim = pow(1-rim,_RimPower);
            o.Emission = _Color;
            o.Alpha = rim;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

Surf 함수에서 림라이트 연산을 하는 것 뿐이다. 매우 간단. 연산도 그렇게 많지 않아서

모바일에서도 크게 문제 없을 거 같다. 

결과물은 

후~~~ 편안

그리고 RimPower 변수를 하나 더 만들어서 정도도 조절 할 수 있게 했다. 

커뮤니케이션이 잘못되어 작업하던 파이프라인은 레거시 파이프라인이지만 URP 쉐이더 그래프로 작업물을 받았다.

(명칭이 잘 생각나지 않아 URP 이전 파이프라인은 레거시 파이프라인이라 지칭하겠다)

소통의부재의 잘못은 일단 그렇다 치고 아무튼 이 상황을 해결하기 위해 의논을 했고 상황 정리를 해봤다.

받은 작업물은 게임에서 핵심요소이다. 그리고 우리팀에는 쉐이더 코드를 짤 수 있는 사람이 없다. 따라서 쉐이더 그래프를 보고 코드를 짜는 것은 불가능. 그렇다고 진행하고 있던 프로젝트를 전부 다 URP로 업그레이드 하는건 매우 비효율적이다.

하지만 작업물 자체를 레거시 파이프라인에 맞추는것이 제일 나은 방법이였다.

URP 파이프 라인에서 쉐이더 그래프로 만든 작업물을 레거시 파이프라인으로 적용시킬 방법을 생각해봤다.

그렇게 3가지 방법을 모색했다

해결 방안 ( 최고의 방법순으로 나열함 )

1. 쉐이더 그래프를 코드로 변환하는 기능을 찾아서 레거시 파이프라인에 적용시킨다.
2. 이전 버전에 쉐이더 그래프 플러그인이 있던게 기억났다. 레거시파이프라인의 쉐이더 플러그인으로 재작업을 한다.
3. 기획을 생략해서 그냥 메테리얼을 경우의 수 만큼 준비해서 바꿔치기한다.

1번 방법 : 쉐이더 그래프를 코드로 변환하는 기능

1. 레딧글에 대충 안된다는 내용 근데 2년전 내용

https://www.reddit.com/r/Unity3D/comments/9oq7ij/can_i_convert_shader_graph_shader_into_shader/e7wrdcn/

2. 대충 된다는 글 1년전 내용   

https://forum.unity.com/threads/converting-shader-graphs-to-editable-usable-shader-code.709007/  

그대로 해봤음

생성 된 코드 표시를 통해 코드를 볼 수 있었다.

코드는 보이는데 포럼의 한 부분이 신경쓰인다.. 

안될거같긴 한데…

레거시 파이프라인으로 해봤는데 안된다.

이럴수가... 

1번 방법은 역시 무리였다. 

다음! 

2번 방법 : 이전버전에 쉐이더 그래프 적용

에셋스토어에서

키워드 검색 : Graph

에셋 1 :

https://assetstore.unity.com/packages/tools/utilities/graph-development-interface-72081#content

키워드 검색 : shader graph

기존 URP 쉐이더 그래프 확장 플러그인 밖에 없음

…....... 없다

에셋스토어 외의 곳

에셋스토어에서는 시간이 지나면서 예전 에셋들은 정리하는 경향이 있었다.

그래서 예전에 유용하게 쓰던 에셋이 스토어에서 내려갔지만 예전에 다운받아놨던 에셋을 가져와서 사용했던 기억이 있다.

따라서 에셋스토어에서 찾으면 안됨

구글링을 통해 쉐이더 그래프가 나오기 이전인 2013년~2016년을 기간 범위를 잡아 키워드를 유니티 쉐이더 그래프로 검색을 해봤다.

그러다

https://sites.google.com/site/unity3dstudy/home/test2/shader 이곳을 찾았는데

뭔지는 모르겠는데 New Graph라는걸 찾았음

즉 쉐이더그래프 플러그인거같았다.

그리고 Stumpy를 알아보다 대마왕 교수님 블로그에서

https://chulin28ho.tistory.com/210

그래프가 2개 있다는걸 알았다.

스트럼피는 굉장히 별로고

Forge가 PBR도 지원을 한다는 글이다.

그렇다면 Forge를 써야할거같아서 Forge를 찾아봤다. 

Forge로 개발이 가능한가? 

2018년에 유니티에서 공식으로 쉐이더 그래프를 지원해주면서 Forge가 무료로 오픈소스로 풀렸고

https://xysterxx.tistory.com/168

누가 2018버전에 호환되게 만든 깃허브가 있었다.

https://github.com/jackisgames/ShaderForge

2018버전을 2020 버전 프로젝트로 불러와봤는데

이런식으로 예제로 들어있던 쉐이더는 다 호환을 해서 다 잘 되는 모습을 보여줬지만

그래프를 띄우는건 불가능 했다.

따라서

이전 버전으로 만든 쉐이더 자체는 호환이 가능하나 2020 프로젝트에서는 그래프 에디터를 열 수 없다.

=> 따라서 2018 프로젝트에서쉐이더를작업해서그작업물만 2020 프로젝트로올리면되지않을까? 생각을해봤다.

그래서 2018 가장 최신을 받아봤는데

오류가 뜸

해당 오류를 찾아보니 유니티에서 제공하는 시스템이 바뀌어서 레퍼런스를 못잡는거같다.

아마 같은 2018이였지만 처음에 버전 업그레이드를 하겠냐는 창이 떠서 2018에서 더 세부적인 버전을 찾아야 되는거같다.

그래서 깃허브에 올라온 Forge 2018 프로젝트의 버전을 알아내서 진행했다. 

2018.1.02f 였고

해당 프로젝트에서는 열렸다.

그럼 Forge로 만든 쉐이더가 2018에서 현재 버전인 2020에 호환이 되는가?

예제 쉐이더 하나를 간단하게 익스포트 해봤다.

그리고 패키지를 가져와봤는데

2020프로젝트 에서도 잘 임포트 되었다!

그리고 그래픽 개발자님께 Forge로 개발이 가능하냐고 여쭤봤고 가능하다고 하셔서 해당 이슈는 일단락 되었다.

쉐이더를 대충이라도 공부해서 해당 이슈가 무엇때문에 문제였고 해결방안을 찾을 수 있어서 정말 다행이다.

프로젝트중 TTS 음성을 통해 게임 진행을 안내하는 부분이 있었다. 게임에서 이 부분은 꽤나 큰 비중을 차지했고 그만큼 파일의 수 또한 많았다. 이 파일들을 효율적으로 설정하고 관리하는 방법을 이 포스팅에서 다룰 생각이다.

전체 목차

0. 프로젝트 상황 <-

1. TTS 음원 파일의 문제점 <-

2. 음원 파일을 자동으로 수정하고 관리 문서(Json)를 만드는 툴 만들기

3. 해당 음원과 관리 문서 Json 파일을 유니티에서 읽어들이기

4. 읽어들인 데이터를 활용하기

0. 프로젝트 상황

기획자분께 대사가 적힌 엑셀파일을 가져와서 작업한다.

작업 했던 엑세파일 그대로 예시로 들 수 없어서 예시로 나무위키에 있던 페이커 소개글로 채워 넣었다. 

형식은 똑같다. 이 글을 쓰는 동안 담원이 우승했다 담원으로 쓸껄 담원! 담원! 담원!

해당 엑셀파일에서 대사를 긁어서 타입캐스트에 넣어줍니다.  

그리고 해당 대사를 아래 처럼 받습니다.  

그럼 아래와 같은 형식으로 파일을들 받게 됩니다. 

이때 문제점들이 있었습니다. 

1. TTS 음원 파일의 문제점

문제점은 크게 3가지가 있습니다.

1. 파일 이름이 한글이다.
2. 해당 파일이 어떤 대사를 가지고 있는지 알아야 한다.
3. 순서가 int취급이 아닌 String취급을 받아 0다음에 10으로 된다.

1. 파일 이름이 한글이다.

문제점 :

파일 이름이 한글이기 때문에 분명 이름이 꺠질 가능성이 있다. 파일을 이름명으로 가져 왔을 때 파일 이름이 깨졌기 때문에 불러오지 못하는 현상이 생길 수 있다. 따라서 한글이름을 제거해줘야 한다.

해결방안 :

유니티에서 가져오고 나서 한글은 모두 지우긴 하지만 파일 자체 이름을 바꾸는건 아니다. 따라서 위험성은 여전하다.

따라서 새로운 툴을 만들어 한글을 없애는 툴을 만들어야 한다..

2. 해당 파일이 어떤 대사를 가지고 있는지 알아야 한다.

문제점 :

1번의 문제를 해결하면 해당 파일이 어떤 대사였는지 파악하기 힘들다.

다른 외부 문서로 관리...를 하면 좋겠지만 대사 스크립트가 생각보다 많고 시간도 많이 없다.

해결방안 :

그럼 자동으로 문서를 만들자.

해당 파일 이름을 txt 파일로 index 번호와 스크립트를 추출한다.

그리고 파일의 이름은 인덱스값만 가지고 있는다.

그리고 유니티에서 해당 txt 파일을 읽어온다.

그리고 (AudioClip clip , int index , string Script ) 클래스를 만들어 관리한다.

(clip , 22 , "아이템을 획득했구나") 이런식으로 될것이다.

이러면 직관적으로 관리가 가능할것이다.

3. 순서가 0 다음에 10으로 된다.

아래 이미지 처럼 숫자가 String으로 취급되서 정렬이 괴상해집니다. 

하지만 2번 문제를 통해 파일이름이 인덱스만 된다면 해당 문제는 자연스럽게 해결될것입니다. 

즉! 파일들을 관리하는 툴을 만들 필요성이 생겼다. 

WPF로 툴을 만드는 것은 nichi72.tistory.com/37 에서 계속 

저번에 알파에 대한 수업자료로 만든 PPT를 올려본다. 

ppt 링크 : https://docs.google.com/presentation/d/1BELbWk9oHqKhuauq1vIGVuWtLTRxNYyjUCtzolHhz4s/edit#slide=id.g7dcd321d58_0_0

졸업작품을 하던 도중 애니메이션 에셋이 필요해 유니티 에셋스토어를 뒤져봤다. 

하지만 마음에 드는 애니메이션이 없었다. 언리얼 스토어에 있는 애니메이션을 찾아보니 맘에 드는 애니메이션이 있었다. 그래서 언리얼 스토어에 있는 애니메이션을 익스포트 해봤는데 테스트 결과 잘 되어 포스팅 해본다.

간단하게 미리 보기

1. 콘텐츠 브라우저에서 애니메이션을 선택 

2. 애니메이션 창 => 에셋익스포트 => 애니메이션 데이터 => FBX 파일 익스포트 완료 

이 다음부턴 유니티를 자주 다루셨다면 대충 감이 오실겁니다. 

3. Project창에 파일을 드래그 드롭 & 에셋 =>임포트 => Import new Asset

추가적으로 오류가 날 수 있는 부분

- 애니메이션을 임포트 하고 휴머노이드라면 꼭 타입을 휴머노이드로 바꿔주세요. 

결과 

1. 콘텐츠 브라우저에서 애니메이션을 선택 

2. 애니메이션 창 => 에셋익스포트 => 애니메이션 데이터 => FBX 파일 익스포트

애니메이션을 선택하게 되면 이런 창이 뜨게 됩니다. 

에셋익스포트 => 애니메이션 데이터

FBX 파일 익스포트 완료! 

언리얼에서 FBX 파일을 얻었습니다! 이제부터는 늘 해왔듯이 FBX를 유니티에 임포트 시키면 됩니다. 

3. 유니티에 임포트 

유니티에서 Project창에 파일을 드래그 드롭 또는

에셋 =>임포트 => Import new Asset 해서 추가 시킵시다! 

추가적으로 오류가 날 수 있는 부분

- 애니메이션을 임포트 하고 애니메이션 타입이 휴머노이드라면 꼭 타입을 휴머노이드로 바꿔주세요. 

애니메이션을 임포트하면 Rig에 애니메이션 타입이 항상 제네릭으로 되어 있습니다.

만약 휴머노이드 애니메이션 타입이였다면 이것을 휴머노이드로 바꿔줘야 합니다.

포스트프로세싱 적용방법을 간단하게 정리해둔 곳이 없어보여서 한번 만들어봤습니다.

- 포스트프로세싱 플러그인을 설치해주세요. 

윈도우->Package Manager

(만약 Package Manager가 보이지 않는다면 에셋스토어에서 무료로 임포트 할 수 있습니다 ) 

로딩을 기다리다보면 전체 목록이 뜨게 됩니다.

Post Processing를 다운 받아주세요.

- 포스트 프로세싱 적용 방법

1. 후처리를 할 카메라에 Post-Process Layer 컴포넌트를 달아줍니다.

2. Layer 설정을 PostProcess로 바꿔줍니다. 

3. 그리고 후처리로 쓸 카메라의 레이어 또한 PostProcess로 맞춰줍니다.

4. PostProcess Volume을 추가합니다.

이것은 빈 오브젝트에 추가해도 되고 카메라에 추가해도 됩니다.

굳이 빈 오브젝트에 추가할 필요성을 못느껴 저는 카메라에 추가하겠습니다.

4.1 PostProcess Volume의 Rrofile은 어떤 후처리 효과를 낼 것인지

효과를 세팅해 놓은 파일을 넣을 곳입니다.

따라서 그 파일을 만들어줘야겠죠?

이제 그 파일을 만들어보겠습니다.

5. Project -> Create -> PostProcess Profile 생성을 해줍니다.

5.1 PostProcess Profile을 보면 이렇게 다양한 후처리 효과들이 있는것을 볼 수 있습니다.

6. profile에 아까 우리가 만든 PostProcess Profile을 넣어줍니다. 

7. 그리고 씬 전체에 적용하기 위해서 PostProcess Volime -> Is Global 체크해줍니다. 

이러면 적용이 완료됩니다.

다음 포스팅에서는 포스트프로세싱 기본 효과를 통해 구현할 수 있는 효과들을 소개해보려고 합니다