ThreeJS | FPS drop 방지를 위한 성능최적화

FPS drop 방지를 위한 성능최적화

그래픽사양이 좋지않은 컴터에서 버벅임 현상이 심했다

아래는 이를 해결했던 방식들이다

 

1. 클래스화

코드의 중복을 막기위해 클래스화 하였다.

 

App에서 ThreeJS 구동을위한 기본적인 코드를 작성했고

간단한 모델링은 직접 클래스로 구현하여

App안에서 인스턴스를 생성하는 방식으로 작성했다

App클래스에는 여러 인스턴스 변수들과 메소드들이 존재하는데

당연한거지만  constructor 내에서 메소드를 초기화할때

메소드내에서 사용되는 변수들은 메소드코드 윗쪽에 다 선언해주어야한다.

안그러면 undefined 뜬다.

복잡한 모델링은 블렌더에서 제작해 import 했다

 

2. 모델링 압축

모델링은 블렌더에서 진행했다.

 

공들여 작업하고 용량을 보니 한파일에 100mb, 400mb  어마무시하게 컸다.

그럴땐 압축을 하면된다

 

1) 머티리얼 최소화

불필요한 머티리얼은 최소한으로 한다

 

2) Decimate추가

 

모델링에 Decimate를 Modifier에서 추가한 후

Ratio 값을 0.5아래로 줄여준다.

모델링이 망가지지 않을정도로만 줄여준다

 

3) 매핑 사진 파일 축소

형식은 gltf

Mesh - Apply Modifiers 체크

Material 에 Images JPEG Format(.jpg)로 변경

image quality 0 으로 변경

Shape Keys 체크해제

Skinnig 체크해제

Animation 체크해제(애니메이션 없는경우)

이렇게 옵션을 지정하고 export 해주면

매핑에 사용한 이미지들이 나온다

이 이미지의 사이즈와 퀄리티를 조절해야한다

https://squoosh.app/

Squoosh

 

사이즈랑 퀄리티만 변경해도 98% 정도 용량을 줄일수 있다

원본 사진파일 용량

 

4) glb draco compression

용량을 다줄이고 나면

새로운 블렌더 프로젝트에서 이 gltf 파일을 import 한다

그리고 바로 다시 export 를 눌러준다

이번엔 glb 로 변경한다

아까와 동일하게 설정해주는데

이번엔 Apply Modifiers를 헤제해준다

그리고 Compression을 체크해준다

그리고 compression... 을 10으로 변경해준다

그리고 export 를 한다

최종적으로 kb 단위로 줄어들게 된다

 

draco 압축기술을 사용한 모델링파일이라 그냥 GLTFLoader로 열면 에러가난다

loader를 dracoloader 로 사용하기위해 작업을 해줘야한다

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '..threejs/examples/jsm/libs/draco/' );
loader.setDRACOLoader( dracoLoader );
loader.load( '../dt/1_M-203B.glb', ( gltf ) => {
    const model = gltf.scene;
    this._scene.add(model);
}, undefined, ( error ) => {
    console.error( error );
})