[Web] Three.js 웹 프로젝트 최적화 표준화 -모델링

 

 

---

 

 

개요

Web에서 3D 오브젝트를 원활하게 구동시키기 위해서는 당연하게도 프로젝트에 대한 전반적인 최적화가 필요하다. Web 프로젝트 최적화 표준 방안에 대해서 정리한다.

 

 

---

 

 

항목 별 최적화 방안

메테리얼

최대한 적은 수의 메테리얼을 사용하는 것이 최적화에 유리하다. 예를 들어 캐릭터가 있다고 생각하면 하나의 메테리얼에 옷과 피부가 포함된 텍스쳐를 사용하여 전체 오브젝트에 1 메테리얼 1 텍스쳐를 사용하는 방식.

 

 

메테리얼 셰이더도 가벼운 것을 사용하는 것이 유리하다.

Three.js에서 사용되는 메테리얼 셰이더는 여러가지가 있다.

 

 

이 중에서 렌더링이 가장 빠른 순서로 BASIC → LAMBERT → PHONG → STANDARD → PHYSICAL이 된다.

따라서 Physical로 설정되어 있는 셰이더로 들어온다면 Standard로 바꾸는 것이 유리하다.

 

 

Standard 메테리얼로 Three.js에 적용되기 위해서는,

• Anisotropic 값이 포함되면 안된다.
• Attenuation 값이 포함되면 안된다.
• Clearcoat 값이 포함되면 안된다.
• IOR 값이 포함되면 안된다.
• Sheen 값이 포함되면 안된다.
• PBR Specular 값이 포함되면 안된다.
• Transmission 값이 포함되면 안된다.

위에 나열한 값 중 하나라도 포함되거나 Defualt 값과 조금이라도 다르게 되면 Physical 메테리얼로 적용되기 때문에, 블렌더 작업 시에 이 부분을 유의하여 모델링과 메테리얼 작업을 하면 된다.

 

 

*블렌더 BSDF의 Default 값은 아래와 같다.

 

 

---

 

 

오브젝트/메쉬

한 덩어리의 오브젝트라면, 최대한 Merge 또는 Join을 시키는 것이 유리하다. 예를 들어 캐릭터가 있다면 얼굴, 몸통, 다리를 따로 두지 않고 하나의 오브젝트로 합친 후 애니메이션 리깅을 이용하는 방식.

그 이유는 나눠져 있는 각각의 오브젝트가 드로우콜을 가져가기 때문에 렌더링에 결코 좋지 않기 때문.

 

 

절대 보이지 않을 불필요한 메쉬가 있다면 지우는 것이 좋다.

예를 들어 캐릭터가 앞으로 달려나가기만 한다면 캐릭터의 전면부는 필요 없기 때문에 메쉬가 삭제되어도 무방하다. (메쉬 자체를 지우는 것이기 때문에 신중하게 진행되어야 한다.)

 

 

---

 

 

텍스쳐

모델링에서 텍스쳐를 최적화 하는 것도 중요하다. 가장 기본적인 부분은 최대한 적은 수의 텍스쳐를 사용하는 것과 낮은 해상도의 텍스쳐를 사용하는 것.

 

 

GLBTextureTools를 사용하여 텍스쳐 압축하는 방법도 매우 효율적이므로 사용하면 좋다.

GitHub - LorenzWieseke/GLBTextureTools

 

 

각각의 텍스쳐를 선택한 후 JPEG로 Scale Image 버튼만 눌러줘도 파일 자체의 용량이 많이 줄어든다.

	원본	텍스쳐 최적화	감소치
Size	952KB	551KB	42.1%

 

 

*주의 할 점은, PNG를 JPG로 바꾸면서 텍스쳐의 품질이 떨어질 수 있고, 투명이 있는 PNG 텍스쳐는 JPG에서 불투명으로 바뀌기 때문에 잘 사용해야 한다. 투명이 쓰이지 않는 일반 텍스쳐에서는 큰 최적화를 이룰 수 있다.

 

 

*모델러의 입장에서는 JPG 텍스쳐로 변경함으로써 최적화를 적용할 수 있지만 개발자가 KTX 포맷으로 텍스쳐를 변환하면 메모리 최적화를 이룰 수 있다.

 

 

---

 

 

인스턴싱

반복해서 사용되는 오브젝트는 인스턴싱을 통해서 최적화를 이룰 수 있다.

아래 두 가지 방법을 통해서 인스턴싱이 되는 것을 확인했다.

• Alt + D (Linked Duplicate)
• Collection Instance

[Blender] Collection Instancing을 통한 최적화

 

 

---

 

 

Draco Compression

블렌더에서 glb 포맷 export 설정 중 [Compression]을 체크하면 최종 파일 용량이 줄어든다.

 

 

---

 

 

LOD(Level of Detail) 사용

LOD란, 오브젝트와 카메라의 거리에 따라서 오브젝트의 디테일을 동적으로 조절하는 기능. 가까이 있을 때는 폴리곤 수가 많은 모델을, 멀리 있을 때는 폴리곤 수가 적은 모델을 보여줌으로써 렌더링 성능을 최적화 한다.

 

 

멀리 있는 오브젝트의 모델 단순화로 GPU, CPU 부하를 줄일 수 있지만 모델링의 입장에서는 하나의 오브젝트를 여러 버전으로 만들어야 하는 단점이 있다.

 

 

가장 디테일이 높은 오브젝트를 만든 후 [Decimate] 기능을 이용하여 단계를 나누어 작업하면 된다.

Suzanne_LOD0은 원본

Suzanne_LOD1은 Decimate Ratio 0.5 적용

Suzanne_LOD2은 Decimate Ratio 0.2 적용

총 3단계의 LOD를 만드는 예시이다.

 

 

 

---