[Three.js] requestAnimationFrame과 cancelAnimationFrame 정리

 

Three.js에서 도형 회전이나 카메라 이동 등을 할 때, requestAnimationFrame를 호출해서 animate를 실행하고, 다음 프레임을 예약하면서 우리가 매 프레임마다 도형회전이나 카메라 이동의 기능을 볼 수 있다.

 

근데, requestAnimationFrame 이 함수를 사용하면, cancelAnimationFrame을 잘 사용해야 한다.

그 이유를 설명한다.

---

requestAnimationFrame

requestAnimationFrame는 우리가 매프레임마다 루프를 돌면서 실행이 된다. 그래서, 우리가 도형을 회전시키거나, 카메라를 이동하는 기능들을 볼 수 있는 것이다.

 

requestAnimationFrame을 호출하게 되면, 고유한 ID를 리턴하게 되는데 이 때 이 고유한 ID를 가지고 해당 애니메이션 프레임 루프를 종료시킬 수 있다.

this.animationId = requestAnimationFrame(animate);

 

 

위와 같이, animationId를 받아오게 되면, cancelAnimationFrame을 통해 해당 고유 ID를 가진 애니메이션 루프를 종료시킬 수 있다.

 

cancelAnimationFrame을 사용하는 이유는 직접적으로 체험을 해볼 수가 있는데, 내가 겪었던 상황은 A라는 화면에서 requestAnimationFrame을 통해 애니메이션 루프를 계속적으로 실행하다가 새로 리셋을 하고, 다시 requestAnimationFrame를 호출을 했었다. 근데, requestAnimationFrame을 할 때마다 도형 회전을 하는데 버벅거림이 호출 횟수에 따라 비례적으로 증가하고 있었다.

 

즉, requestAnimationFrame 의 루프가 비동기와 같이 실행되다보니, 루프가 겹쳐서 성능이 떨어져서 발생한 문제였다.

 

그렇기에, animate를 하기 전에 requestAnimationFrame를 호출했을 때 리턴되는 고유 ID를 아래와 같이 종료시켜야 한다.

cancelAnimationFrame(this.animationId);

 

이렇게 하면, 중복 실행이 없어지고 리소스 관리를 효율적으로 할 수 있게 된다.