Mozilla의 WebRender, 게임 엔진식 렌더링으로 15 FPS의 끊김 심한 페이지를 60 FPS로 끌어올리다

브라우저들은 수년간 더 적게 함으로써 더 부드러워지려 했다. 변경된 사각형만 무효화하고, 조각들을 레이어로 캐시하고, 그것들을 합성하고, 마침내 두 작업 모두를 GPU로 옮겼다. 2017년 10월 Mozilla Hacks에서 Lin Clark은 페이지가 여전히 끊기는 이유를 설명했다. 레이어는 메모리와 전송 시간을 잡아먹고, 브라우저는 페이지에 레이어가 얼마나 필요한지 추측해야 한다. 레이어가 너무 많으면 메모리가 차고 컴포지터가 지연되며, 너무 적으면 다시 그려진 레이어가 아무것도 바뀌지 않았는데도 합성되어 모든 픽셀을 두 번 건드린다. 배경색을 애니메이션하면 무슨 수를 써도 레이어 전체의 다시 그리기가 강제된다.

Firefox에 Quantum Render로 도입되는 Servo 기술인 WebRender는 다른 선례를 따랐다. 3D 게임 엔진은 매 프레임의 모든 픽셀을 다시 그리고, 픽셀을 병렬로 셰이딩하는 수백 또는 수천 개의 코어를 가진 GPU에서 브라우저보다 더 안정적으로 60 FPS를 유지한다. 그래서 WebRender는 페인트/합성 경계를 없앴다. 레이아웃 출력은 어떤 그래픽 API에도 묶이지 않은 고수준 그리기 명령의 디스플레이 리스트가 되었다. WebRender의 RenderBackend는 그 리스트를 배치된 GPU 드로우 콜로 변환했고, GPU는 레이어 추측 없이 매 프레임 페이지의 보이는 장면 전체를 다시 그렸다.

프레임 전체 다시 그리기를 감당할 수 있게 만드는 데는 작업 제거가 필요했다. 화면 밖 항목은 GPU에 도달하기 전에 컬링되었다. 렌더 태스크 트리는 필터와 스태킹 컨텍스트를 위한 비싼 오프스크린 텍스처의 최소 개수를 계획했다. 드로우 콜은 GPU의 병렬 코어를 바쁘게 유지하도록 배치되었다. 렌더링은 가려진 픽셀을 건너뛰는 불투명 앞에서 뒤로의 패스와 뒤에서 앞으로의 반투명 패스로 나뉘었다. 기사는 이를 z-컬링이라고 불렀으며 일반적인 페이지에서 큰 이득이라고 했다. 텍스트 글리프는 CPU 작업으로 남았지만 프레임에서 프레임으로 유지되는 텍스처에 캐시되었다.

목표는 단지 속도가 아니라 일관성이었다. 성능 절벽이 없고, 디스플레이가 아무리 크거나 페이지가 아무리 많이 바뀌어도 부드러운 60 FPS를 유지하는 것이다. 기사는 Chrome이나 당시의 Firefox에서 15 FPS로 겨우 돌아가던 페이지가 WebRender에서는 60 FPS로 실행되었다고 보도했고, 이 작업을 4K 디스플레이와 각 눈마다 90 FPS로 프레임을 렌더링하는 WebVR을 위한 준비라고 규정했다.

레이어 추측을 멈추고 GPU에 고수준 디스플레이 리스트를 넘겨 매 프레임 게임 엔진 방식으로 페이지 전체를 다시 그린다

GPU는 픽셀을 병렬로 셰이딩하는 수백에서 수천 개의 코어를 갖고 있어, 매 프레임 보이는 페이지 전체를 다시 그리는 것은 CPU 규모의 작업이 아니라 GPU가 만들어진 바로 그 작업량이다.

유지되는 디스플레이 리스트는 장면에 대한 작고 API에 구애받지 않는 기술이므로, CPU는 명령을 한 번 만들고 RenderBackend는 픽셀 작업이 일어나기 전에 그것들을 컬링하고 정렬하고 배치할 수 있다.

장면 전체 다시 그리기는 레이어 추측과 그 실패 모드를 제거한다. 잘못 판단한 레이어 개수도, 픽셀의 이중 처리도 없으므로 프레임 시간이 성능 절벽에서 떨어지지 않는다.

작업 제거는 다시 그리기를 저렴하게 유지한다. 컬링, 더 적은 오프스크린 타깃, 배치, z-컬링이 GPU가 셰이딩하는 양을 줄이고, CPU로 렌더링된 글리프는 프레임별 경로가 아니라 텍스처 캐시에 산다.

점진적 휴리스틱이 계속 최악의 절벽에 부딪힌다면 모델을 바꿔라. 장면 전체를 한 번 기술하고 대규모 병렬 하드웨어가 매 프레임 다시 그리게 하라

WebRender는 뒤이은 Firefox Quantum 릴리스에 포함되지 않았다. Lin Clark은 기사 댓글에서 Firefox 57 이후까지 출시되지 않을 것이라고 썼고, 글은 Quantum Render 프로젝트 아래 2018년까지 통합을 계획했으며 초기 버전은 이미 플래그 뒤에서 사용 가능했다. 글이 링크한 데모는 Chrome이나 당시의 Firefox에서 15 FPS로 실행되던 페이지가 WebRender에서는 60 FPS로 실행되는 것을 보여주었고, 이 해설 글은 2017년 10월 10일 Hacker News에서 853점과 207개의 댓글을 받았다.