React 3D 웹앱 - 3. 3D 모델

React 3D 웹앱 Basic 시리즈입니다.

• React 3D 웹앱 - 1. 개요
• React 3D 웹앱 - 2. Three.js
• React 3D 웹앱 - 3. 3D 모델
• React 3D 웹앱 - 4. 3D 뷰어

Github

---

지난 편에서는 three.js를 이용해서 3D 박스가 나오는 간단한 웹앱을 구현해봤습니다.

 

이제 예쁜 배경도 넣고 멋진 건물이나 사물, 3D 캐릭터 등을 넣어볼 텐데요, 그 전에, 맛있는 음식을 만드려면 좋은 식재료가 필요하듯이, 멋진 3D 웹앱을 만드려면 먼저 앱에 넣을 3D 모델이나 배경 이미지 등이 필요하겠죠. 오늘은 기초 재료 (1)배경 이미지 (2)사물들 (3)캐릭터를 얻는 방법에 대해 소개합니다.

 

배경이미지

웹 3D에서 배경이미지는 사방을 여러 각도의 이미지로 둘러싼 스카이박스를 사용하거나, 혹은 3D에 매핑된 hdri라는 파일을 씁니다. 고맙게도 무료(CC0 public domain 라이선스)로 제공해주는 사이트가 있어서 소개합니다.

HDRIs: All | HDRI Haven

HDRI 탭으로 가서 원하는 배경 사진을 골라 Download 옵션 중에 8K Tonemapped JPG를 선택합니다. 

HDRI 다운로드 옵션

웹앱에서는 용량이 로딩 속도나 성능에 관련되어 있으므로 적절한 재료를 선택해야겠죠. 이 배경을 가져오는 코드는 간단합니다.

   setBackground = (scene, renderer, filepath = hdriBackgrounds[0]) => {
        const loader = new THREE.TextureLoader();
        const texture = loader.load(
            filepath,
            () => {
                const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
                rt.fromEquirectangularTexture(renderer, texture);
                scene.background = rt.texture;
            }
        );
    }

파일은 앱의 public/ 혹은 인터넷 URL로 접근 가능한 외부 저장소에 있는 파일이면 됩니다.

실습은 다음 편에서 하고 이제 3D 사물과 캐릭터를 구해보겠습니다.

 

3D 모델(사물)

인터넷에 3D 마켓에서 유료 혹은 무료로 빌딩부터 동물, 식물, 악세사리 등 다양한 사물들을 구할 수 있는데요, 저는 Turbosquid에서 무료/유료 모델들을 종종 사용합니다. 

3D Models for Professionals :: TurboSquid

퀄리티는 유료나 무료나 복불복이지만, 간단한 무료 모델이 많아 활용하기 좋습니다. 다만, 상품마다 지원되는 옵션이 다르기 때문에, 다운로드 전에 어떤 3D 포맷으로 제공되는지 등에 대해 안내문을 참고하세요.가령, 우리 예제에서는 주로 FBX 모델들을 사용할 것이므로 다운로드 받을 때 FBX 포맷(.fbx 확장자를 가진 파일)을 사용합니다.

 

가장 중요한 문제는 라이선스인데요, 무료 모델이라도 라이선스 조건은 천차만별이라 각별히 유의해야 합니다. 단순히 commercial 라이선스만 봐서는 안되고 특히 웹앱처럼 3D 모델 파일 자체가 웹에 올라가는 경우 자칫 redistribute 조건에 위배될 수도 있으므로 라이선스를 반드시 신경써야 합니다. 심지어 3D 모델의 어디까지는 무료인데 어떤 부위에 덧입혀진 애셋이나 텍스처 등이 별개 라이선스가 되는 경우도 있으니 매우 복잡합니다.

 

3D 모델(캐릭터)

캐릭터 모델이 처음이라면 우선 Mixamo에서 받아보세요. 보다 자세한 내용은 아래 제 블로그 글을 참고해주세요.

3D 캐릭터 - 1. Mixamo

받은 캐릭터를 예제 코드와 함께 배포하면 즉시 실행 가능한 예제 코드가 되지만, 이 경우 재배포 문제로 라이선스에 위배될 수 있습니다. 따라서 예제 코드를 따라할 때는 개별로 캐릭터를 받아야 합니다(FBX 권장).

 

정확한 법률 관계는 법률 자문이 필요하겠지만, 보통 게임이나 영화 제작에 Royalty Free 3D 모델을 활용하는 것은 허용되는데 반해  파일째 공유하면 문제가 될 수 있습니다. 웹앱은 기본적으로 public 폴더 안에 3D 모델 파일이 노출되므로 재배포에 해당될 수 있을 것으로 보입니다.

 

검증

지금까지 구한 3D 재료들을 웹앱에서 구현하려면, 3D 모델들이 웹앱에서 잘 불러오는지 기초 테스트를 해야겠죠. 웹앱은 보통 three.js 기반이므로, 아래 Three.js Editor로 온라인에서 불러볼 수 있습니다.

three.js editor

Mixamo에서 받은 캐릭터를 하나 열어볼까요? File -Import 하면, 잠깐 멈춘 듯 하다가 로딩이 완료됩니다. 혹시 아무것도 안 보인다면, 3D 모델 사이즈가 큰 경우일 수 있습니다. 마우스를 스크롤다운(zoom out) 해보세요.

threejs.org/editor에서 FBX 파일을 import

아하, 모델이 너무 커서 안 보였네요! 사이즈를 줄여 봅시다.

우측 메뉴에서 Scene 밑에 점을 선택하고  아래 옵션 중에 Scale을 3개 항목(x,y,z) 모두 0.01로 바꿉니다.

스케일을 0.01로 줄입니다.

좀 나으네요. 근데 왜 까맣게 보이죠? 메뉴에서 Add - DirectionalLight 을 선택해보세요. 짜잔~

Add - DirectionalLight

내친 김에 다리도 한 번 움직여 볼까요? 아까 scale을 조정한 scene 밑에 있는 오브젝트를 펼치고 펼쳐서 mixamorigRightLeg를 선택하고 하단 OBJECT 탭 중에 Rotation의 첫 번째(x좌표)값을 변경하면 아래 그림처럼 무릎이 구부려집니다.

x좌표 값 변경

자, 실험을 하나 해보죠. 그 위에 있는 무릎 뼈를 움직여보세요. 아래 그림처럼 괴물 다리가 됩니다. 

무릎 뼈를 움직였을 때 망가지는 다리

하지만 똑같은 파일을 Blender에서 같은 방식으로 움직여보면 아래와 같이 정상적으로 무릎 아래가 따라옵니다.

Blender는 무료 3D 편집 툴입니다. 보다 자세한 내용은: rubenchoi.tistory.com/7

Blender 3D에서는 정상적으로 보인다.

이러한 것을 Inverse Kinematics(IK)라고 하는데, 당장 다루기에는 난이도가 있어서 추후 캐릭터 리깅에서 다루도록 합니다. 그럼에도 궁금하신 분은 어떤 블로거님이 이해하기 쉽게 아주 잘 설명하신 글이 있어요 : 링크

---

지금까지 살펴본 것처럼 HDRI 배경 이미지는 공짜 재료가 있는데, 캐릭터는 웹앱으로 배포할 수가 없으니 튜토리얼을 이어 나가기가 여의치 않습니다. Mixamo 외에 다양한 3D 캐릭터 소프트웨어를 살펴봤지만 redistribution 문제는 계속 걸리더군요. 그래서 직접 3D 휴먼을 만들었습니다!

 

블렌더 3D 모델링

Blender로 직접 모델링하고

믹사모 오토 리깅

Mixamo 오토 리깅으로 구워서

믹사모 애니메이션

Mixamo 애니메이션이 탑재된 FBX를 받았습니다.

 

Mixamo는 애니메이션 탑재 버전은 좀 그렇지만, 블렌더로 제작한 3D 모델은 직접 만든 것이니 CC0으로 배포할 수 있습니다!

자 그럼, 이제 3D 휴먼도 있으니, 본격적으로 React 3D 웹앱을 구현해 봅시다.

---

참고로 다음 편에서 3D 뷰어 제작을 끝으로 기본 편을 마치고 이후에는 아래 비전으로 튜토리얼을 이어나갈 예정입니다.

단계	주요 특징	튜토리얼 제목	제반 기술
1	3D 휴먼이 움직인다	React 3D 캐릭터 제어	three.js
2	3D 휴먼과 인터랙션	React 3D 인공지능	tensorflow.js, 웹 AI
3	3D 휴먼과의 만남	React 3D 메타버스	virtual world, communication
4	3D 휴먼 in 로봇	React 3D 로봇 연동	ROS