setAnimationLoop 위치가...

Question

현재 애니메이션 기본 수업부터 scale까지 봤는데, setAnimationLoop 가 draw 안에 등록되서 매번 반복으로 실행되는것 같은데, 화면갱신에 관련된 render만 반복시키고 setAnimationLoop는 바깥에서 한번만 등록하는게 옳은 방법이 아닌가 하고 의문이 드는데 어떤게 맞는건가요? 동작은 둘다 똑같이 되긴 합니다.   const draw = () => { /* 메쉬 애니메이션 처리 코드 들어갈 위치 ... */ renderer.render(scene, camera); } renderer.setAnimationLoop(draw);

communityai8509 · Answer

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

setAnimationLoop 위치가...

왜 setAnimationLoop를 draw 바깥에서 설정하나요?

왜 `setAnimationLoop`를 `draw` 바깥에서 설정하나요?