버츄얼 모델 렌더링 품질 향상 기록

EC2 배포 환경 렌더링 속도 확인

인프라 담당 팀원분이 열심히 해주신 결과 배포 환경에서도 CSR 렌더링 모델 'JUN'을 띄울 수 있었습니다.

렌더링 시간은 5.81S 인것을 볼 수 있습니다.

 

렌더링 품질에 대해 더 높이고 싶은 욕심이 생겼습니다.

뭔가 지금 렌더링은 three.js 방식의 본연의 의미인 3d 렌더링에만 충실한 느낌이 들었습니다. 

 

 

공식 문서 확인

이를 위해 현재 fbxloader 방식이 문제가 있다고 판단하고 고품질의 2D 느낌의 렌더링 방법을 구글링 해보았습니다. 

 

FBXLoader는 VRM 특유의 toon 스타일, 쉐이더, 물리 설정을 무시하고 단순 메쉬로만 렌더링하기 때문에, 퀄리티가 낮아지고 3D 정보만 남는 것처럼 보입니다.

 

 

VRM은 glTF 기반 확장 형식으로, 애니메이션 외에도 다음과 같은 정보를 포함한다고 합니다.

• MToon 같은 toon 셰이더 설정
• BlendShape, 얼굴 표정 데이터
• SpringBone, 물리 기반 머리카락/치마 움직임
• Meta 정보 (작성자, 라이선스 등)

그러나 FBX로 변환하면 이 정보들이 손실이 된다고 합니다.

 

시도 1. 쉐이더를 Mtoon으로 바꾸는 시도도 fbx 자체 지원이 안되기 때문에 모델이 렌더링 자체가 안되는 현상이 나타났었습니다.

 

https://vrm.dev/en/vrma/

VRM Animation | VRM

 

VRM 모델에 FBX 애니메이션을 입히고 VRMA로 EXPORT하는 에디터입니다.

https://github.com/malaybaku/AnimationClipToVrmaSample

GitHub - malaybaku/AnimationClipToVrmaSample: Sample Project to Convert AnimationClip to VRM Animation (.vrma) in Unity

 

VRMA EXPORT 준비

VRM 모델을 UNITY로 IMPORT하면 prefab이라는 형식의 파일이 됩니다. 여기에 animator controller를 만듭니다.

fbx 애니메이션을 controller에 추가합니다.

 

결과

요약 : FBXLoader 방식에서 VRMLoader로 바꾸며 렌더링 시 정보 손실 없이 고품질의 렌더링을 유지할 수 있었습니다.

기존 FBXLoader 방식

 

 

VRMLoader 방식

 

흐뭇할 정도로 렌더링 품질이 향상된 것을 볼 수 있습니다 ^ㅇ^