[React] Blender 모델링, Bake Texture + R3F 적용

 

0. R3F 프로젝트에 모델 적용 과정

1. 모델링 작업 - Blender

2. 모델링 배치, 조명 설정 - Blender

3. Texture (모델의 표면 속성 예-광택, 재질 색상등 외관을 표현하기 위한 부분)  작업 - Blender

4. glb를 jsx 컴포넌트로 변환하여 화면에 로드 - R3F

5. 모델에 Bake한 Texture 적용하기 - R3F

 

Texture를 Bake 한다는 의미 : 모델의 Texture를 미리 렌더링해서 입혀 놓은 상태를 만들어 놓는다는 것

( 단 렌더링된 상태이기에 그림자가 있는경우 R3F 상의 조명으로 그림자가 변경 되지 않음)

 

Texture를 Bake하는 이유 : 미리 Texture 이미지를 구워놓지 않으면 .glb 모델링 사이즈가 엄청 커진다

예시로 처음 모델링하고 그대로 export 했을경우 glb 파일 크기가 대략 100MB 넘었는데 texture를 빼고 export를 한경우는 9.6MB에 줄어 들었다.

이 경우 모델에서 Texture 뺏기 때문에  Texture 파일을 별도로 이미지 파일로 변환해서 R3F 코드로 입혀주어야 정상적으로 재질이 보인다.

glb 파일만 100MB가 넘어서 React 프로젝트를 띄워서 로컬에서 확인시 network에 waterfall 끝없이 올라가며 에러가 발생한다.

 

기본 오브젝트 형태

1. 모델링 작업 주요기능

1. 모드

- 오브젝트 모드 : 물체 이동, Modifier로 Array, Mirror, Solidify 등 형상 관련 사항 작업후 apply

- 에디트 모드 : 물체 extrude, loop cut, inset faces, fill 등 형상 수정 (늘이기, 줄이기, 자르기, 면적 좁히기, 채우기 등)

- 스컬프트 모드 : 곡선 형태의 표면을 만들때 사용 ( 사람의 얼굴, 쿠션 등)

 

2. 모델 선택, 재질 옵션

버튼을 클릭했을때 오브젝트 외각 선이 주황색으로 표시되는 옵션 on/off

오브젝트를 투명하게하는 X-Ray 기능

보는 화면에서 오브젝트에 재질을 입혀서 보일지 단순히 회색으로 보일지 조명을 입혀서 보일지 등을 결정하는 viewport 옵션 기능

 

3. 렌더링, 오브젝트 옵션, 재질, 불빛 세기 등

render : 렌더링시 옵션 주는 버튼 

modifier : 오브젝트를 특정 축으로 mirror, array 혹은 겉면을 부드럽게하는 solidify 등의 기능 제공

material : 오브젝트의 재질 선택하여 입히는 기능

data : 불빛 강도, 형태를 제공하는 기능

 

4. 우측 상단에 collection

오브젝트에 이름을 지정하고 collection별로 구조를 정리할 수 있다.

우측에 눈모양을 통해 현재 화면에서 보이거나 안보이도록 할 수 있다.

우측에 카메라 버튼을 통해 렌더링시 보이거나 안보이도록 할 수 있다.

 

5. 기본 이동 기능

마우스 휠 : 오브젝트를 보는 현재 위치에서 360도로 방향 이동

Shift + 마우스 휠 : 보는 방향 이동

마우스 휠 위,아래로 스크롤 : 확대, 축소

 

위 5가지 기본 모델링 방법을 통해서 모델링을 진행한다.

2. Texture Bake 방법

1번째로 UV Mapping을 진행.

 

UV mapping이란 전개도와 같다.

3차원의 물체를 쭉 펼쳐서 2차원 적으로 보이게하여 Texture를 쉽게 입히게하기 위한 작업이다.

( 처음에 보면 이게 뭔지 알 수 가 없는데 잘 보면 3차원 모델을 2차원 도면으로 보여주기 위해서 펼친 것 이라고 확인 할 수 있다.)

 

새로운 Texture 이미지 생성

 

상단 중앙 UV Editting으로 이동 -> 좌측에 Image -> new Image 생성 -> 크기 설정 후 Alpha(투명 오브젝트 유무)설정 -> OK

이미지 위치는 잘 정해두고 저장한다.

 

오브젝트 클릭 후 Unwrap 또는 LightMap 또는 Smart UV

 

UV mapping할 오브젝트를 선택하고 edit모드로 이동하여 u를 누르고 Unwrap, Lightmap, Smart uv 등으로 전개도를 펼칠 수 있다.

단순한 Unwrap시 도면이 이상하게 보이고 겹쳐보일 수 있는데 그런경우는 seam이라는 걸 사용하거나 Smart UV나 LightMap으로 간편하게 한다.

 

Shading에서 ImageTexture 설정

이후 전체화면 상단에 UV Editing 옆에 Shading을 누른다.

Bake하고자 하는 오브젝트를 누르고 우측 material 부분에 재질을 하나 선택한다.

가운데 하단에 검은색 빈공간에 우측 마우스 클릭 후 Texture -> Image Texture를 눌러서 아까 생성한 이미지를 클릭한다.

재질이 여러개면 모두 ImageTexture를 동일하게 넣어준다.

 

Render Bake Image

Viewport Max Sample은 화면이동시 느려지기 때문에 성능을 개선하기위해서 maxSample을 1로한다.

Render는 Max Sample을 높여서 렌더했고 Denoise는 껐다. (Denoise는 아래 이미지 처럼 지직거리는 형태로 보이는 여부)

Denoise를 켜면 속도가 느린 대신 지직 거림이 보이지 않는다.

전개도가 이상하게 펼쳐 보이지 않으면 그대로 render -> bake를 한다. ( Bake는 오브젝트 개별로 하거나 전체 한번에 선택해서 Bake 할 수 있다)

Bake 후에는 UV Editing에 이동해서 image를 save해줘야 bake한 파일이 날아가지 않는다.

 

viewport 렌더링 + 조명 설정

최종적으로 전체 모델을 잡고 한번에 Bake하면 된다.

 

우측 : 모델링을 최종 완료하고 조명을 넣은 형태로 viewport(현재 보는 화면)에서 확인한 장면

좌측 : UV를 통해서 모델의 Texture를 Bake한 이미지 파일이다.

3. 모델 glb로 Export

 

File -> export -> glTF 2.0 선택

최종 모델링 export 작업시 Materials No export로 바꾼다.

 

glb파일 jsx로 컴포넌트로 변환하기 위한 라이브러리 전역 설치

npm install -g gltfjsx

 

react 프로젝트로 이동하여 glb 파일 아래 명령어로 변환

npx gltfjsx [glb파일 위치]

 

변환된 컴포넌트 재사용하여 실제 사용 컴포넌트에 Bake한 Texutre 이미지를 가져와서 입혀준다.

 

 

기본적으로 모델링을 하기 위해 참고한 유튜브

https://www.youtube.com/watch?v=y1UQoCRtYpA

 

모델의 Texture를 굽기위한 방법 유튜브 (이해하는데 시간 꽤 소요됬다)

https://www.youtube.com/watch?v=YkHqpqJgLKw&list=LL&index=5

 

 

최종 배포 사이트
https://toryvic.site/