Cocos creator

Cocos Creator 반투명 3D 오브젝트 만들기

나폴나폴 2022. 10. 6. 18:31
728x90

오늘은 위와 같은 반투명 3D 오브젝트를 만들어보자.

 

 

 

우측 마우스 클릭 > Create > Surface Shader를 클릭해 셰이더 하나를 만든다.

만든 셰이더를 더블클릭하면 내부 기능이 무엇이 있는지 살펴볼 수 있는데

우선 해당 내용은 나중에 다른 포스팅에서 다루도록 하겠다.

 

우측 마우스 클릭 > Create > Material을 클릭해 셰이더를 적용할 Material 파일을 하나 생성한다.

해당 Material 파일을 클릭하면 mtl 파일 맨 첫부분에 Effect를 설정할 수 있는데,

해당 Effect로 아까 만든 surface Effect 를 적용한다.

이후 해당 material 파일 정보의 Pass 0 부분에서 'USE ALPHA TEST'를 체크하고,

Albedo 를 클릭하여 alpha 값을 조절해주면 위의 미리보기의 오브젝트가 반투명해지는 것을 확인할 수 있다.

 

어두워진게 아니고 투명해진 것이다.

 

이때, 반투명하게 해야하므로 Techinque를 '1 - transparent'로 바꿔준다.

('0 - Albedo'로 되어 있으면 3D 모델에 실제 적용시 투명하게 보이지 않는다.)

 

'USE ALPHA TEST' 밑에 뜨는 Alpha Threshold는 전체 알파값 중 알파값의 설정 기준을 잡는 역할로 보인다.

 

- alpha-test의 Alpha Threshold 값이 0.5일 경우, 255 * 0.5 = 약 127이므로
alpha값이 127~255 사이 값으로 설정 가능. 127보다 작으면 아예 투명상태가 됨.

- alpha-test의 Alpha Threshold 값이 0.3일 경우, 255 * 0.3 = 약 77이므로
alpha값이 77~255 사이 값으로 설정 가능. 77보다 작으면 아예 투명상태.

 

그리고, 본인이 쓸 3D 오브젝트를 하나 생성한다.

나는 큐브를 만들어주었다.

해당 큐브 정보 중 cc.MeshRenderer의 Materials를 펼쳐 [0] 자리에

내가 방금 생성한 surface Effect로 만든 Material 파일을 드래그앤드랍해서 적용해준다.

 

투명한 큐브다!

그리고 씬을 실행해주면 투명해진 큐브를 확인할 수 있다.

(배경은 하얀색이면 투명한지 잘 안보여서 직접 Camera 컴포넌트에서 수정

 

 

더 확실한 비교를 위해, 내가 가진 삼각기둥 FBX에 해당 mtl 파일을 적용한 것과,

기본 mtl을 적용한 상태로 씬을 실행해주면 둘이 대비되는 것을 확인할 수 있다.

반응형