Electron 윈도우 리사이즈 버그, 어떻게 잡았을까?
Electron 기반 앱에서 윈도우 리사이즈 시 이전 프레임이 보이는 버그 발생. 문제의 근본 원인을 찾기 위해 Chromium 소스 코드 분석 시작
Direct3D 11 백엔드 사용 시, ANGLE과 DirectComposition 간의 동기화 문제로 인해 버그 발생. 두 가지 버그를 찾아 해결
Chromium 패치를 Electron에 적용하여 문제 해결. DirectComposition의 viewporter 기능을 활용하여 성능 저하 없이 버그 수정
DirectComposition과 Viewporter의 동작 원리
Electron은 윈도우 리사이즈 시 DirectComposition API를 사용하여 화면을 렌더링한다. 구체적으로, supports_viewporter 기능을 통해 윈도우 크기 변경 시 새로운 표면 할당을 최소화한다. 따라서, Viewporter는 표면의 특정 영역만 표시하여 성능 저하를 방지한다.
버그 해결 과정: 동기화 문제와 패치 적용
리사이즈 시 IDXGISwapChain1::Present1과 IDCompositionDevice::Commit 간의 비동기적 실행으로 인해 버그가 발생했다. 구체적으로, 클립 영역이 갱신되기 전에 뷰포트가 렌더링되어 이전 프레임이 노출되었다. 따라서, 투명 처리를 통해 문제를 해결하고, Chromium 패치를 Electron에 적용했다.
Electron 개발 기여 및 실무 적용 가이드
Electron 개발에 기여하여 오픈소스 프로젝트에 참여할 수 있다. 구체적으로, Chromium 패치를 이해하고, Electron에 백포팅하는 과정을 통해 기여할 수 있다. 따라서, 윈도우 리사이즈 관련 문제를 겪는 Electron 앱에 패치 적용을 고려하고, DirectComposition의 동작 방식을 이해하는 것이 중요하다.
