[Babylon.js] Blender로 Babylon.js에 필요한 모델 추출하기

https://doc.babylonjs.com/features/featuresDeepDive/Exporters/Blender

Blender to Babylon.js exporter | Babylon.js Documentation

https://doc.babylonjs.com/features/featuresDeepDive/Exporters/Mixamo_to_Babylon

Mixamo to Blender to Babylon.js | Babylon.js Documentation

 

공식 문서를 참고해 진행하였는데, 좀 헤맨 부분이 있어 기록하려고 한다.

 

먼저 블렌더라는 툴이 필요하다.

 

https://www.blender.org/download/

Download — blender.org

 

다운받아주자.

 

글을 쓰는 당일 기준, 3.4.1 버전을 다운받았다.

 

블렌더 실행 모습

 

블렌더를 성공적으로 다운받았으면, 

 

https://github.com/BabylonJS/BlenderExporter

GitHub - BabylonJS/BlenderExporter: Exports From Blender to Babylon.JS in JSON / .babylon format

 

BabylonJS 팀에서 개발한 BlenderExporter를 다운받는다.

 

소스 코드를 다운받을 필요 없이, zip 파일만 다운받으면 된다.

 

 

 

그런 다음 Blender에서 Edit -> Preference -> Add-ons에 들어간다.

 

Add-ons

 

Install 버튼을 눌러 아까 받았던 add-on을 설치한다. (다운받았던 zip 파일)

 

설치 후 체크박스에 꼭 체크해주자.

 

Babylon.js 애드온이 설치된 모습

 

그리고 Blender 프로젝트에 있는 기본 개체 3개(Camera, Cube, Light)를 제거한다.

 

기본 객체들을 제거하는 방법

 

이제 파일을 불러오면 되는데, 먼저 모델이 필요하다.

 

Babylon.js 공식 문서에선 Mixamo 라는 사이트를 추천하기에, 여기서 다운받았다.

 

다운받는 방법은 최상단에 링크 걸어둔 공식 문서에 아주 상세히 나와 있다.

 

 

https://www.mixamo.com/

Mixamo

 

File - import를 통해 불러오면 되는데

 

공식 문서에 따라 Manual Orientation 옵션과 Automatic Bone Orientation 옵션을 체크해주도록 하자.

 

3d 모델에 관해 공부해 본 적은 없기 때문에 무슨 옵션인지는 자세히 모른다.

 

체크해야 하는 옵션들

 

모델 import

 

모델을 성공적으로 불러온 모습

 

애니메이션도 모두 같은 방식으로 불러오자.

 

 

그러고 나서 Armature(애니메이션이 아닌 모델 본체)의 이름을 Character로 바꾼다.

 

 

애니메이션의 이름도 직관적으로 바꿔주자. (더블클릭으로 바꿀 수 있다)

 

Character에도 애니메이션이 있다. (아무것도 안 하는 애니메이션)

 

그것도 이름을 바꿔주자.

 

바뀐 이름들

 

그런 다음 애니메이션을 전부 삭제한다. (Delete Hierarchy)

 

스샷에선 Armature.001 ~ 005가 해당한다.

 

 

아래 스샷의 빨간 영역에 마우스를 올려보면 마우스가 십자 모양으로 변한다.

 

그 상태에서 위로 드래그를 해주면 새로운 창을 하나 열 수가 있다.

 

 

새 창을 Dope Sheet -> Action Editor로 바꿔주자.

 

열린 새 창

 

 

Action Editor에서 애니메이션이 모두 제대로 들어있는지 확인할 수 있다.

 

플레이 버튼으로 재생도 해볼 수 있다.

 

fly 애니메이션이 선택됨

 

다음 단계로 가기 전에 타임 슬라이더를 꼭 0에 맞춰주도록 하자.

 

그리고 액션은 다시 꼭 기본자세(예시에선, tPose)로 선택해주어야 한다.

 

 

이제 Object Mode에서 N 버튼(한/영 확인)을 누르면 Transform 창이 뜬다.

 

그런 다음 A 버튼을 누르면 모든 개체가 선택되는데

 

Location은 모두 0으로, Rotation도 모두 0으로, Scale은 모두 1로 수정한다.

 

Transform 창이 띄워진 모습

 

수정했다면 Ctrl+A 버튼을 눌러 All Transforms로 변경 사항을 적용해주자.

 

 

그런 다음 MAT(빨간색 모양)이라는 Meterial이 있다면, Babylon.js와 호환이 되지 않는다고 한다.

 

클릭한 다음 아래 빨간색 모양을 먼저 클릭하고 흰색 모양을 클릭한 다음,

 

Material로 바꿔주도록 하자. (하위에 빨간 모양의 Material이 있다면 다 똑같이 작업해주면 된다)

 

 

Blender에서의 모든 작업이 끝났다.

 

File -> Export -> Babylon.js 로 내보내기만 하면 된다.

 

Export(Babylon.js)

 

마지막으로 .babylon 파일을 열어

 

"autoAnimate": true,"autoAnimateFrom": 1,"autoAnimateTo": 152,"autoAnimateLoop": true

 

구문을 텍스트 제일 밑의 subMeshes, instances 사이에 넣어주자.

 

구문 오류가 나면 안 되니까 JSON 형태에 맞게 잘 적어주도록 해야 한다.

 

추가된 구문

 

이제 아래 링크로 가서, 만들어진 .babylon 파일을 드래그 앤 드랍해보자.

 

그러면 제대로 모델이 임포트됐는지, 시뮬레이션해 볼 수 있다.

https://sandbox.babylonjs.com/

Babylon.js Sandbox - View glTF, glb, obj and babylon files

 

 

샌드박스에 import된 모델

 

웹(Babylon.js 사용)에서 불러온 모습

 

점프 애니메이션을 재생

 

모델을 불러오는 코드 부분 (크기가 너무 커 조금 줄였다)

 

export const createCharacter = async (scene: Scene, engine: Engine) => {
  const character = await SceneLoader.ImportMeshAsync("", "", CHARACTER_SOURCE, scene);

  // init character
  const mesh = character.meshes[0];
  mesh.scaling = new Vector3(0.1, 0.1, 0.1);
  mesh.rotation = new Vector3(-(Math.PI / 2), 0, 0);

  return character;
};

 

- 이글은 도입부에 말했다시피, Babylon.js 공식 문서를 참고하여 쓰인 글입니다. 잘못된 부분이나 잘 안되는 부분이 있다면 언제든지 댓글 달아주시면 답변드리겠습니다~