Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stage에서 브라우저가 작동을 멈추거나 느려지는 현상 해결
stage에서 브라우저가 멈춤이 잦아서 performance를 브라우저에서 확인해보았을 때 re-rendering으로 인해 scripting이 과도하게 많이 일어나는 문제를 발견.
코드를 다시 분석해봤을 때, useFrame 내부에서 setState를 실행하고 이에 따라 컴포넌트가 매 프레임마다 렌더링되고 있었습니다.
이를 방지하기 위해서 setState를 통해 state를 변경하는 대신, 값을 변경하여도 리렌더링이 일어나지 않는 useRef를 사용하여 성능 개선을 진행하였습니다
성능 개선 전
성능 개선 후
성능 비교
1번과 2번 테스트 모두 약 10초 동안의 3d 렌더링 성능을 테스트해보았습니다
1번은 10.01초 동안 script를 처리하는데 걸린 시간이 9636ms 이고, 2번 테스트는 10.38초 동안 2280ms가 걸린 것을 확인하였습니다