크롬 Headless 모드에서 GPU 가속하기

Chromium|2024. 1. 25. 03:51

크롬 브라우저의  headless 모드는 웹사이트 테스트나 웹페이지 크롤링에 주로 사용된다. 이때, 웹페이지를  png나  pdf로 저장하기도 하기도 하고, WebGL과 같은  3D 컨텐츠를 테스트할 필요도 있다. 늘 그렇지만 기본적으로 3D 가속은 되지 않는다. 때로는 가속되다가도 크롬 브라우저가 버전업하면서 안되기도 한다. 당연히 버그도 이미 올라와있고, 이 글을 쓰는 본인도 약간의 기여를 한적은 있다. :-)

최근 구글 크롬 개발자 블로그에서 헤드리스 모드에서 GPU 가속을 활성화하는 방법을 자세히 공개했다.

https://developer.chrome.com/blog/supercharge-web-ai-testing

 

웹 AI 모델 테스트 강화: WebGPU, WebGL, 헤드리스 Chrome  |  Blog  |  Chrome for Developers

브라우저 테스트를 지속적으로 자동화하고 애플리케이션 성능을 개선하는 방법에 대한 Google Cloud 솔루션을 살펴보세요.

developer.chrome.com

사실 리눅스용 크롬 브라우저에서는 GPU 가속이 꺼져있다. 리눅스는  distro도 다양하고 게다가 GPU벤더가 지원하는 공식 GPU 드라이버에서 해커들이 개발한 오픈소스 버전도 있기 때문에 구글에서 GPU 가속을 기본적으로 꺼놨다.  현재도 마찬가지로 일부  distro는 자체  GPU 가속이 되는 크롬 브라우저 패키지를 내놓고도 있거나, GPU 가속 방법을 알려주고 있다.

아래 코드를 실행하려면 먼저 GPU driver를 설치되고  잘 동작해야 한다. 아래는  우분투 22.04에서 동작하는 NVidia GPU 예이다.

$ nvidia-smi
Wed Jan 24 10:32:13 2024
+---------------------------------------------------------------------------------------+
| NVIDIA-SMI 545.29.06              Driver Version: 545.29.06    CUDA Version: 12.3     |
|-----------------------------------------+----------------------+----------------------+
| GPU  Name                 Persistence-M | Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp   Perf          Pwr:Usage/Cap |         Memory-Usage | GPU-Util  Compute M. |
|                                         |                      |               MIG M. |
|=========================================+======================+======================|
|   0  NVIDIA GeForce RTX 4090        Off | 00000000:01:00.0 Off |                  Off |
|  0%   45C    P8              13W / 450W |   1078MiB / 24564MiB |      0%      Default |
|                                         |                      |                  N/A |
+-----------------------------------------+----------------------+----------------------+

+---------------------------------------------------------------------------------------+
| Processes:                                                                            |
|  GPU   GI   CI        PID   Type   Process name                            GPU Memory |
|        ID   ID                                                             Usage      |
|=======================================================================================|
|    0   N/A  N/A      4265      G   /usr/bin/gnome-shell                          6MiB |
|    0   N/A  N/A     42318      C   /usr/local/bin/ollama                      1056MiB |
+---------------------------------------------------------------------------------------+

아래 코드는 크롬 브라우저의  GPU 환경 페이지를  pdf로 출력해주는 코드이다. 

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

크롬 브라우저를 직접 실행하여 'chrome://gpu' 페이지를 확인하고, 위 코드로 생성된 PDF 결과가 동일하다면 헤드리스 모드에서 GPU 가속이 지원되는 것으로 볼 수 있다.

댓글()

웹브라우저 성능 측정하는 사이트

WebKit|2019. 8. 19. 16:10

웹브라우저에서 GPU가속 성능 측정할 때, 자주 사용하던 웹사이트들이다. 웹브라우저를 임베디드 기기에 포팅한 후, 그래픽 성능을 측정할 때 사용할 수 있다.

Web Benchmark

WebGL Test

Canvas Test

zero-copy textur upload

4K video

댓글()

Intent to Implement: WebGPU

WebKit|2018. 6. 12. 16:40

드디어 WebGPU를 Chromium에서 구현하나 보다. (관련글)


다음은 bink-dev에 올라온 글의 일부이다. 애플이 WebKIt에 Metal을 이용해서 만든 WebGPU와 얼마나 비슷한지 궁금하다. 같은 이름인 것으로 보아 애플의 제안이 많이 받아들여진 것 같다. 


Spec:

Work-in-progress IDL: https://github.com/gpuweb/gpuweb/blob/master/design/sketch.webidl

The “GPU for the Web” community group is approaching resolution on most-high level issues, but hasn’t looked at the detail or user-experience of the API yet.


Summary

The WebGPU API is the successor to the WebGL and WebGL 2 graphics APIs for the Web. It will provide modern features such as “GPU compute” as well as lower overhead access to GPU hardware and better, more predictable performance. WebGPU is being developed by the “GPU for the Web” W3C community group.


Motivation

Applications on the Web are becoming ever more interactive, which increases the demand for programmable 3D graphics, image processing, and GPU access in general. WebGL and WebGL 2 fulfill some of this demand, but do not match the features or performance of modern native graphics APIs.


WebGPU will close the gap in terms of performance, and introduce “GPU compute” functionality to the Web. This will help porting native applications to WASM that require native features, and will unlock the performance of GPU-accelerated scientific computing on the Web (including machine learning).


In addition WebGPU will give developers more predictable performance by being in the style of “explicit GPU APIs” and by being designed to map efficiently on all modern native graphics APIs.

댓글()

WebKit Contributors meeting 2011

WebKit|2011. 5. 15. 00:06
WebKit Contributors Meeting 2011
지난 4월 24,25일 미국 Apple본사가 위치한 Cupertino에서 열린 WebKit Contributors meeting 2011에 참석했습니다. 본 행사는 WebKit Contributor가 한 자리에 모여, 당면한 문제와 앞으로 계획 등을 논의하는 자리입니다. 올해가 두번째 열렸으며, unconference형식으로 진행되는 행사입니다. 지난 1년간 함께 WebKit을 개발해온 사람들이 함께 모이는 축제라고도 할 수 있겠지요. 이번 모임에서 어떤 논의가 있었는지 간단하게 소개하도록 하겠습니다.

WebKit은 모바일 브라우저 엔진 뿐만 아니라 Mobile Platform으로도 사용되고 있기 때문에 Apple과 Google뿐만 아니라, Nokia, RIM, Samsung, Motorola, Ericsson, Sony, Igalia, Sencha 에서도 참석하였고, 저도 Collabora를 대표해서 참석하였습니다.  지난 WebKitGtk+ Hackfest 참석 멤버들도 다시 만나서 반가웠고, 제 Patch를 review해주던 Reviewer도 실제로 만나니 더 반가웠습니다. 오픈소스 프로젝트에 참여하는 맛이 이런게 아닌가 싶었습니다. 

진행된 Session과 내용은 대부분 인터넷에 공개가 되어 있어서, 어떤 논의가 오고갔는지 확인할 수 있습니다.  무엇보다도 관심은 WebKit2였습니다. 작년에 Apple이 소개한 WebKit2는 그 동안 Qt와 Gtk+ Port팀도 활발하게 작업을 진행하고 있습니다. 사실, WebKit2는 WebCore를 제외한 API영역과 Web Process와 UI Process를 새로 개발하기 때문에 그리 간단한 일은 아닙니다. 이날도 많은 Issue가 쏟아져나왔는데, 몇 가지를 소개하면 다음과 같습니다.
  • C API사용이 최선인가? 이미 Qt는 C++ API를 사용하고 있습니다.
  • plugin을 별도 process로 실행하기. 곧 Apple이 소스를 공개한다고 합니다.
  •  WebKit1과 WebKit2와 중복 code를 어떻게 줄일까요?
  • DRT를 다시 작성하는일, WebKitGtk+의 경우 WebKit1용 DRT도 아직 완벽하지 않습니다.
  • theaded model 지원하기. mobile device에서 각 page마다 web process를 실행하는 것은 다소 부담스러운 일입니다.
  • web process와 ui process과 통신하는 부분이 너무 platform 의존적으로 개발되어 있어, 뭔가 추상화 모델이 필요합니다.
  • Mac에서 구현한 접근성 기능을 다른 port에서는 따라하기가 쉽지 않다고 합니다.
그 다음 제가 관심을 가진 부분은 하드웨어 가속입니다.  하드웨어 가속은 크게 2D가속, accelerated compositing, WebGL 지원으로 나눌 수 있는데, 논의된 issue 가운데 몇가지를 소개하면, 
  • Canvas 2D 가속하기 : Canvas 2D를 GPU를 이용하여 가속하는 patch가 WebKit에 반영되어 현재 계속 보완되고 있습니다. Google에서 Skia가속을 위해 계속 작업 중에 있고, 실제 Profilng결과, 성능이 빨라지는 부분만 가속하는 방식을 사용하고 있다고 합니다.
  • WebKit2에서 GPU가속: Chromium처럼 GPU Process 실행시켜 구현. 
이외 Build System을 CMake나 GYP로 일원화 하자는 이야기가 있었지만, 결론은 쉽게 나지 않을 것 같습니다.  그리고, 작년에 HTML5 Parser가 WebKit에 추가되면서 Parser코드가 완전히 교체되었는데, 이에 대한 구현 내용을 소개해주었습니다. 기존 Parser코드를 이해하는데 3 개월(?)이 걸린 만큼 복잡한 코드였는데, HTML5 Spec을 반영하면서 새롭게 개발했다고 합니다.  마지막 Session에서는 Review-a-thon 행사가 열렸는데, 100개를 목표로 Patch룰 review하는 시간을 가졌습니다.  제가 행사 때 올린 Patch 하나도 Review가 되긴 했는데, 다른 방식으로 수정이 되었네요.

마지막 날 오후에 작년 처럼 단체 사진을 찍었는데, 운 좋게 가운데 자리에 자리를 잡아서 사진이 잘 나왔네요.

(C) torarnv
비록 각 contributor가 속해있는 회사는 서로 치열하게 경쟁하지만, WebKit 개발 커뮤니티는 더 나은 브라우저 엔진을 개발하기 위해 서로 협력하고 참여를 독려하고 있습니다. 혼자 개발하는 것 보다, 함께 개발하는 것이 비용과 시간을 줄이고 더 나은 기술을 받아들일 수 있는 좋은 방법이라고 믿기 때문이죠.  내년 모임에서는 더 알찬 소식을 전하도록 하겠습니다~
 

WebKit Party Poster

댓글()

브라우저에서 그래픽 가속하기

WebKit|2010. 10. 14. 01:25
브라우저가 단순히 컨텐츠를 탐색하고 보여주는 애플리케이션이라는 울타리를 벗어나, 또 다른 애플리케이션을 실행하기 위한 플랫폼으로 발전하고 있다. 하지만, 현재 구현된 브라우저 엔진만으로 플랫폼 역할을 하기에는 넘어야할 한계가 있는데, 바로 성능과 안정성 확보다. 이를 위해 각 브라우저 벤더는 아래 3가지 측면에서 여러 기술을 브라우저에 도입하고 있다.

1) 다중 프로세스(Multiple Process) 적용
2) 자바스크립트 가속
3) 그래픽 하드웨어 가속

위 세가지 기술은 아직까지 안정화가 필요한 부분도 있지만, 대다수의 브라우저 이미 적용했거나 적용을 준비 중에 있다. 우선, IE9덕에 많은 분들이 관심을 갖고 있는 "그래픽 가속"에 대해 알아보자.

브라우저에 HTML5, CSS3가 본격적으로 적용되면서 웹에서 표현할 수 있는 컨텐츠의 종류가 다양해졌다. 최근에는 WebGL에 표준화되면서 3D까지 지원하게 되면서, 2D뿐만 아니라 3D도 가속해야할 상황에 도달했고, 애플 iPad로 촉발된 HTML5 Video지원도 그래픽 가속 없이는 브라우저에서 HD영상을 재생하기에는 무리였다.  그런데, 마이크로소프트에서 IE9 베타에서 하드웨어 그래픽 가속를 강력하게 표면화 시키면서, 이에 대한 논쟁이 가열되고 있다. 지금까지 가장 빠른 브라우저는 구글의 크롬(Chrome)이라는 공식에 역습을 가한 것이다.

과연 브라우저에서 그래픽 가속이 어떤 의미있고, 현재 어느 수준까지 지원되고 있는지 살펴보도록 하겠다.

그래픽 가속이란?

일반적으로 화면에 어떤 그래픽 요소를 표현하려면, CPU가 계산한 그래픽 데이터를 메인 메모리에서 Frame Buffer로 복사해야 한다. 그래픽 가속이란, 이를 CPU가 아닌 그래픽 가속기(GPU)에 전달된 명령어를 실행하여 하드웨어적으로 처리하여 성능을 높인 것을 말한다. 즉, 그래픽 연산 부터 생성된 데이터를 Frame Buffer로 복사하는 모든 과정을 GPU에서 알아서 처리한다. 그 사이 CPU는 HTML을 다운로드 받고 파싱하는 등 다른 작업을 처리할 수 있다. 참고로, GPU는 CPU와 달리 데이터 병렬성이 풍부해 큰 데이터량을 한번에 계산하는데 효율적이므로, 3D 벡터 데이터나 멀티미디어 데이터 처리에 유리하다.

그래픽 가속의 종류

그래픽 가속에는 크게 2D, 3D, Video 가속으로 나눌 수 있다. 먼저 2D 가속으로 2D 벡터 그래픽, 이미지 프로세싱/디코딩/인코딩, Font Glyph Caching 등을 지원할 수 있다. 2D 벡터 그래픽은 OpenVG라는 표준 API가 존재하고 이를 지원하는 HW가속칩도 존재하지만, 많이 활용되고 있지는 않다. 현실적으로 2D가속은 CPU에서 제공하는 SIMD 연산와 OpenGL과 같은 3D 라이브러리에 의존하고 있습니다. 참고로, SIMD는 Single Instruction, multiple data의 약자로서 하나의 명령어로 여러개의 값을 동시에 계산하는 방식을 말하며, alpha brending이나 Video Format의 color space 변환 등에 사용한다. ARM Coretex A시리즈에서는 NEON이라고 부르는 SIMD연산을 지원한다[1].

비디오 가속의 경우, 모바일 환경에서는 전용 디코더를 하드웨어적으로 내장하는 경우가 많고, PC환경에서는 GPU를 사용한다. 만약 디코더가 내장되어 있지 않은 경우에는, CPU에서 제공하는 SIMD연산을 사용하기도 한다.

3D 그래픽은 OpenGL이라는 표준 API 규약을 이용하여 구현한다. Mesa3D라고 SW적으로 구현된 OpenGL 라이브러리도 있지만[2], GPU벤더들이 자사 GPU에 최적화된 OpenGL 라이브러리를 제공하기 때문에, OpenGL API만 잘 사용해도 쉽게 가속이 가능하다. 윈도에서는 DirectX를 이용해서 3D가속을 한다. 특히, DirectX 10버전에는 Font Glyph를 GPU memory에 cache하고 GPU에서 Anti-aliasing을 처리하여 폰트 출력를 획기적으로 향상시켰다[3].

브라우저에서 그래픽 가속


위 그림은 WebKit을 예로 하여, 그래픽 가속 관점에서 브라우저 아키텍쳐를 그려보았다. 이 아키텍쳐는 주로 모바일 프로세서를 사용하는 아이폰이나 안드로이드폰에서 볼 수 있으며, PC에서는 사실상 모든 그래픽 작업을 GPU에서 처리할 수 있다. 위 그림을 통해 브라우저에서 표현하는 그래픽 요소가 어떤 라이브러에 의존하여 렌더링되고 어떤 HW를 통해 가속되는지 한 눈에 확인할 수 있다. PC의 경우 GPU에서 직접 H.264 비디오를 디코딩할 수 있으나, 아직까지 Mobile에서는 인코더/디코더를 하드웨어적으로 구현하여 사용한다[4].

앞에서 언급했듯이 2D 벡터 그래픽은 GPU로 가속이 가능해서 위 그림에 이를 표현하였고, 마찬가지로 SIMD연산을 이용해서 VIDEO가속도 일부 가능하므로 역시 이를 그림에 반영하였다.

다음에는 브라우저별 그래픽 가속 현황을 살펴볼 예정이다.

참고

[1] ARM NEON
[2] The Mesa 3D Graphics Library
[3] ClearType in WPF
[4] Hardware-based encoding and decoding

'WebKit' 카테고리의 다른 글

WebKit의 웹표준 구현 현황  (0) 2011.06.06
WebKit Contributors meeting 2011  (0) 2011.05.15
css ime-mode property 지원하기  (4) 2010.10.05
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01
Rendering in WebKit  (3) 2010.01.19

댓글()