인프런 커뮤니티 질문&답변
작성한 질문수
setAnimationLoop 위치가...
작성
·
33
0
현재 애니메이션 기본 수업부터 scale까지 봤는데,
setAnimationLoop 가 draw 안에 등록되서 매번 반복으로 실행되는것 같은데,
화면갱신에 관련된 render만 반복시키고
setAnimationLoop는 바깥에서 한번만 등록하는게 옳은 방법이 아닌가 하고 의문이 드는데 어떤게 맞는건가요?
동작은 둘다 똑같이 되긴 합니다.
const draw = () => {
/*
메쉬 애니메이션 처리 코드 들어갈 위치
...
*/
renderer.render(scene, camera);
}
renderer.setAnimationLoop(draw);답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
aska120님께서 질문하신 부분에 대해 설명드리겠습니다. setAnimationLoop는 WebGL 기반 애플리케이션에서 매우 중요한 함수로, 주로 애니메이션을 매 프레임마다 업데이트하기 위해 사용됩니다.
renderer.setAnimationLoop(draw);를 사용하면, draw 함수가 매 프레임마다 호출되면서 화면 갱신과 애니메이션 처리가 일어나게 됩니다. 이 방식은 애니메이션 루프를 WebGL API가 적절히 관리하도록 해서 효율성을 높입니다. 이를 이용하면 브라우저가 최적화된 방식으로 빈도 조절(ex. 탭이 비활성화된 경우 프레임을 멈춤)할 수 있게 해주므로 보다 동적이고 부드러운 사용자 경험을 제공할 수 있습니다.
왜 setAnimationLoop를 draw 바깥에서 설정하나요?
- 최적화된 루프 관리: WebGL 자체가 제어하는 업데이트 루프를 활용합니다.
- 관리용이: 하나의 장소에서 애니메이션 루프를 시작해, 코드의 흐름을 쉽게 파악할 수 있습니다.
setAnimationLoop가 draw 함수 내부에 존재할 필요는 없습니다. setAnimationLoop는 기본적으로 한 번만 호출하여 루프를 설정하는 것이 일반적입니다. 해당 루프 내부에서 렌더링을 반복적으로 호출하여, 애니메이션이나 화면 갱신을 처리합니다.
이런 방식은 애니메이션 최적화와, 시스템 자원을 효율적으로 사용하기에 유리합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.