Udemy STARTERS (유데미 스타터스) Unity 취업 부트캠프 22주차 - 카메라와 가까운 물체 fade out (3D URP Shader Graph), Azure PlayFab 활용

입먼주는 오랜만에 Shader Graph를 활용해 물체 Fade Out을 연습해보고 얼음 Shader도 만들어보았다. 또한 Azure PlayFab으로 회원가입 기능 구현을 연습해보았다.

 

Shader Graph

Rendering Pipeline

Shader Graph를 생성해 처음 들어가면 Vertex Shader와 Fragment Shader가 기본으로 들어가있다. 이는 Shader Graph가 렌더링 파이프라인 중 2개의 단계에 영향을 주어 효과를 만들어낸다는 것을 보여준다.

Unity가 사용하는 OpenGL의 Rendering Pipeline은 여러 단계로 구성되는데 내가 이해한 바로는 다음과 같다.

1. Vertex Shader - Vertex를 이어 삼각형을 만듦
2. Tessellation - 삼각형을 더 작은 삼각형으로 쪼갬
3. Rasterization - 삼각형을 실제 화면에 표시될 픽셀로 근사화함
4. Fragment Shader - 각 픽셀을 색칠하고 텍스처를 입힘. 이후 실제 화면에 픽셀로 보여줌

즉, 우리가 유니티에서 만드는 Shader Graph는 Vertex Shader부분과 Fragment Shader 부분을 건드리고 있는 것!

Rendering Pipeline Overview - OpenGL Wiki

 

그래픽스 파이프라인이란? (Graphics Pipeline)

 

OpenGL Rendering Pipeline

 

 

 

카메라와 가까이 있는 물체 Fade out

Shader Graph 만든다.

 

 

기초

Allow Material Override 체크 → Inspector에서 뜨게끔

Alpha Clipping 체크 → 알파값이 0.5보다 작으면 안 보이게 할 것

2개 체크체크

 

Color, Texture 2D 만들어 색 넣고 Save Asset

color는 원하는 색으로 설정… 해도 어차피 Inspector에서 안 들어감. Material에서 따로 설정해줘야 함.

 

Material 만들고 Shader Graph 드래그해서 Shader 설정해준 뒤 Color, Texture 2D 설정.

Tiling option 보이려면 Shader Graph에서 Use Tiling and Offset 체크 후 Save Asset.

 

 

 

 

카메라-물체 거리에 따라 물체 알파값 조절

 

1. Camera, Object 노드 생성 후 Distance에 연결
2. Dither 노드 생성 후 x 1로 설정, Alpha Clip Threshold에 연결
3. Distance 노드의 Out을 Alpha에 연결
4. Material의 Alpha Clipping에 체크

   

5. Camera의 Clipping Planes Near 값을 0으로 만들고 카메라가 물체에 가까이 갔을 때 반투명해지는지 확인

 

결과

가까이 다가가면 반투명해진다. Dither(디더링)이 뭔지 잘 몰라서 찾아봤는데 반투명하게 만드는 기술 같다…? 픽셀 중에 반만 렌더링 되고 절반은 렌더링이 안 되어서 반투명하게 보이는 것 같다…?

Dither의 값보다 작은 alpha 값은 렌더링 되지 않는다. 정말 threshold로 작동하는 것.

 

Dither

1. Float 2개 - MinDistance 0.2 / MaxDistance 3
2. Vector2 노드 만든 뒤 연결해서 Vector 2값 만들어줌
3. Remap 노드 생성
   • Distance를 Remap In에 연결.
   • In Min Max : 출력값을 Min Max 사이로 보정한다는 뜻. 여기에 Vector2 연결.
   • Remap Out을 Alpha Clip Threshold에 연결.

결과

카메라가 물체와 가까워지면 반투명해지다 사라진다.

 

Dither Size 조절

방법

1. 블랙보드에 DitherSize라는 Float 값 생성 후 드래그
2. Screen Position 노드 생성
3. Divide 노드에 연결해 Screen Position을 DitherSize로 나눔
4. Divide 노드의 Out 값을 Dither 노드의 Screen Position에 연결 후 Save Asset

 

결과

Dither Size 값이 커질수록 더 픽셀처럼 반투명화되는 것을 알 수 있음. Dither에 들어가는 Screen Position이 작을수록 각 Dither가 더 큰 영역의 화면을 커버해야 해서 알맹이가 커지는 것.

Dither Size 2

Dither Size 5

Dither Size 10

 

 

여러 속성 추가

1. 블랙보드에 Texture 2D인 NormalMap, MetalicMap과 Float인 Metalic, Smoothness, Color Emission 추가 후 순서 조정해 Inspector에서 보일 순서 조정

   

   1

2. Metalic, Smoothness Mode Slide / Emission Mode HDR로 설정

   

   2

3. Fragment의 Smoothness, Emission에 각각 연결
4. Sample Texture 2D 노드 생성 후 Metalic Map 노드 블랙보드에서 끌어다 Texture에 연결
5. 블랙보드에서 끌어다놓은 Metalic과 Sample Texture 2D의 Out을 Multiply 노드에 연결해 곱한 뒤 Out을 Metallic에 연결
6. 블랙보드의 NomalMap 노드도 끌어다가 Sample Texture 2D에 연결, Out을 Fragment의 Normal에 연결
7. Save Assets 후 Material의 Inspector에서 적당한 Normal map, Metalic map 추가

 

결과

Metalic 1, Smoothness 0.5, Emission 적용하지 않았을 때

 

보라색 Emission 추가

 

Emission Intensity +6

 

 

다른 방식

이 사람 블로그에 Shader 자료 많음

유니티 셰이더 그래프 ( Unity Shadergraph): 카메라가 가까이 왔을때 부드럽게 사라지기

 

 

Azure PlayFab을 활용한 회원가입 구현

Microsoft의 PlayFab을 이용해 회원의 아이디와 비밀번호를 서버에 저장할 수 있다. 클라이언트의 접속 횟수, 접속 시간 등을 PlayFab 관리 페이지에서 확인할 수 있다.

 

Azure PlayFab 회원가입, 로그인

 

---

자습

굴절 Refraction

굴절/왜곡 효과를 만들어보고 싶어서 자료를 찾은 뒤 따라 만들었다. 그리 어렵지 않다.

유니티 셰이더 그래프(Unity shadergraph) HDRP에서 굴절(Refraction) 만들기

 

1. Shader Graph - Unlit으로 생성. Allow Material Override 체크, Surface Type : Transparent 설정.
2. Scene Position - Scene Color - Base Color 순으로 연결 후 Material만들고 오브젝트에 붙여 투명하게 잘 나오는지 확인
3. Gradient noise - Multiply - Add(Scene Position, Multiply Out) - Scene Color - Base Color 순으로 연결

 

결과

Scene Color를 사용하기 때문에 Surface Type이 Transparent 아닌 오브젝트에 대해서만 적용된다~

구를 기준으로 굴절되어 보이며 뒤에 있는 얼음은 Transparent type이라 아예 보이지 않는다.

왜곡 흐르게

1. Time, Float 값을 곱해 Tiling And Offset의 Offset 값에 집어넣는다.
2. Offset 값의 Out을 Gradient Noise의 UV에 넣어 UV가 흐르게 한다.

 

 

학부/대학원생 vs. 교수 게임

이번주는 카카오 로그인을 구현하느라 유니티는 크게 진전이 없었는데 대신 학부생용 미니게임 하나(버튼을 누르면 대학원 가지마 문장이 완성되는 미니게임)를 추가로 완성했다. 또한 학부생이 교수에게 납치되어 대학원생이 된 자리를 학부생이 리포트할 때 1명만 보고되는 것을 고치는 중이다. 거의 다 고쳤는데 RPC로 다른 클라이언트에서도 같은 함수를 실행하게 해야 하는데 그 부분이 아직 미완이다. 아무 생각 없이 List<PhotonView>를 동기화하려 했다가 에러가 떠서 다시 한 번 Photon에서 직렬화 가능한 데이터 타입을 생각하는 계기가 되었다.

 

[Unity] Photon RPC 에러 Exception: Write Failed. Custom type not found

 

 

---

 

후기

12월부터는 지금까지 못 배웠던 보다 효율적인 / 바람직한 코드 작성법을 배울 것 같다. 디자인 패턴도 배울 수 있을 것 같아서 기대가 된다 후후후.

대학원생 vs. 교수 게임에 동기화하는 부분과 미션만 조금 더 추가하면 이제 친구들끼리 돌려서 게임할 수 있을 정도는 될 것 같다. 얼른 완성해야지.

12월까지 진행 중인 팀 프로젝트가 있어서 균형 있게 개인 프로젝트와 병행해야 할 것 같다.

 

 

유데미코리아 바로가기 : https://bit.ly/3b8JGeD

본 포스팅은 유데미-웅진씽크빅 취업 부트캠프 유니티 1기 과정 후기로 작성되었습니다.

새로운 가능성의 시작, 유데미 x 웅진씽크빅