threejs 성능 최적화 방법

Three.js 로고입니다.

 

안녕하세요 Jiwon입니다

 

오늘은 WebGL의 프레임워크인 Three.js에 대한 정보를 공유하겠습니다.

 

저는 Three.js로 제 소개 웹사이트를 하나 만들었었습니다.

 

그 과정에서 여러가지 난관을 맞닥뜨렸었는데요

 

많은 어려움이 있었지만 그 중 가장 힘들었고 또 나름 해결해서 뿌듯했던 점이 있었습니다.

 

바로 성능 최적화입니다

 

쉽게 말해서 그냥 렉걸려서 도저히 못돌리겠는 걸 원활하게 한다는 얘기입니다.

 

저는 아래 링크에서 힌트의 큰 틀을 얻었었는데요

 

https://discourse.threejs.org/t/how-to-optimize-objects-in-three-js-methods-of-optimization/2242

How to optimize objects in three.js? Methods of optimization

 

대충 정리하자면,

 

merge geometries, (geometry들을 하나로 합칠 수 있는 것은 합치고)
use instanced rendering,
use simple materials like MeshBasicMaterial or MeshLambertMaterial,
use LOD mechanism, (https://threejs.org/docs/#api/en/objects/LOD)
reduce the overall model complexity.

curve 가 있는 geometry 줄이기

 

위와 같은 대표적인 방법들이 있는 것을 확인했습니다.

 

저는 초보인지라 일단 simple하게 할 수 있는 것을 시도해봤는데요,

 

1. 일부 Material들을 간단한 종류(MeshBasicMaterial 등)로 바꿔보기

 

크게 성능차이는 없었고 1~2 프레임 정도 더 나오는 정도였습니다.

 

그 다음은

 

2. curve 가 있는 geometry 를 줄였습니다 (ex) textGeometry, ExtrudeGeometry 등

 

의외로 성능 개선이 꽤 많이 됐습니다. curve가 있는 것이 리소스를 많이 잡아먹는 듯 합니다.

 

개당 3~4프레임 정도 더 나오는 것 같았습니다. (정확하지는 않을 수 있으니 참고만 하세요)

 

3. Geometry들을 merge(합성)했습니다.

 

이 방법도 효과적이었습니다

 

반복되는 Geometry가 많으면 요긴하게 쓸 수 있고 또 성능 최적화를 위해 가장 대표적으로 쓰이는 것 같았습니다.

 

4. Geometry의 Segment와 face수를 줄였습니다

 

꽤나 많은 수의 Geometry에 굳이 segment가 많을 필요가 없다고 생각하여 줄였는데, 큰 성능 차이는 없었으나

 

미미하게 개선되는 것 같았습니다.

 

5. GLTF모델의 불필요하게 큰 텍스처 해상도를 낮췄습니다

 

이 방법은 효과가 컸습니다.

 

아래 링크를 클릭하셔서 따라해보시기 바랍니다

 

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

저는 윈도우 10을 사용하는데 기본 사진 편집기에서 해상도를 변경하여 새 파일로 저장할 수 있었습니다

 

6. 해상도 낮추기

 

이 방법은 뭐 너무나 당연한 것이라 따로 설명하지 않겠습니다.

 

마치며...

 

저는 위 방법들을 사용했었는데요

 

원래 PC에서조차 10~20프레임 나오던 열악한 상황이었는데,

 

위 방법들로 40~50 프레임으로 사용에 크게 지장없는 환경을 겨우 만들었었습니다.

 

더 노력하면 60프레임도 만들 수 있었겠지만, 너무 힘들었어요 ㅜㅜ

 

혹시 다른 좋은 방법이 있다면 댓글로 남겨주시면 감사하겠습니다!