크롬 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 가속이 지원되는 것으로 볼 수 있다.

댓글()

크로미엄(Chromium) 프로젝트 기여하기

Chromium|2021. 5. 1. 09:46

chromium.googlesource.com/chromium/src/+/master/docs/contributing.md

여러분의 사용하는 구글 크롬 브라우저(오픈소스 버전은 크로미엄 브라우저라고 부름)는 오픈소스로 관리된다. 소스코드를 공개되어 있고 여러분의 컴퓨터에서 빌드하고 테스트가 가능하다. 그리고 코드를 수정해서 크로미엄 사이트에 올리면 리뷰 과정을 거쳐서 코드가 반영된다. 아주 어려운 일은 아니다. 잘 찾아보면 아무도 신경 안쓰는 수정하기 쉬운 버그도 있다.

우선 크롬 브라우저가 어떻게 동작하는지 대충 알아야할 것이다. 구글에서 만든 수 많은 기술 문서가 있지만, 우선 아래 문서와 발표 자료를 꼭 들어보자.

크롬 브라우저는 어떻게 동작하는가?

Life Of a Pixel

Life of Pixel 문서는 말 그대로 크로미임 브라우저가 어떻게 웹페이지를 화면 출력하는지를 자세하게 소개하고 있다. 발표 자료와 함께 강의 비디오도 Youtube에 있다. 

 

Life of a Pixel

This is the evergreen copy of "Life of a Pixel". Video of the presentation at Chromium University (Nov 2020): http://bit.ly/loap-2020-video LIFE OF A Steve Kobes skobes@chromium.org Nov 2020 slides: bit.ly/lifeofapixel with special thanks to past presenter

docs.google.com

 

 

 Inside look at modern web browser

구글 엔지니어가 직접 만든 문서이다. 가장 자세하게 전반적으로 크롬 브라우저의 동작을 설명한 문서이다.

어떻게 기여하는가?

크로미엄 프로젝트에서 공식적으로 만든 기여를 위한 안내서(Contributing to Chromium)을 먼저 읽어본다. 크로미엄 코드는 C++로 만들어져있으므로 기본적으로 Google C++ Style Guide를 지키고 예외적은 것은 Chromium C++ style guide 로 정리해두었다.  크로미엄 프로젝트는 조금은 느리지만 가능한 모던C++ 기능을 많이 수용하려고 노력하고 있다. 현재는 C++14를 목표로 필요한 기능을 적용하고 있다. 네이버 Deview에서 발표된 "Modern C++ 무조건 써야해?"도 읽어보면 좋다.

또한 크로미엄 프로젝트에서 자체 제공하는 여러 클래스 라이브러리가 있는데, 이는 크로스 플랫폼을 지원을 위해 개발되었다. C++ 표준 라이브러리로 조금씩 대체되고 있지만, 사용방법을 알아두면 코드를 이해하는데 도움이 있다. 몇가지 예제가 있으니 참고 바란다.

버그를 찾자.

Chromium issue tracke사이트에서 버그를 검색해본다.

이번 글은 여기까지, 다음글에서는 패치를 올리고 리뷰 받는 법을 소개해볼까 한다.

 

댓글()

 크롬대학(Chrome University) 2018: Chrome OS Graphics 101

Chromium|2020. 5. 9. 05:00

ChromeOS graphics stack에 대한 자세한 설명을 들을 수 있습니다. Modern Desktop이 어떻게 화면을 그리고 GPU에 최적화 되어있는지 보여줍니다. 특히, ChromeOS는 Wayland를 이용해서 Android app UI와 리눅스 앱 화면에 보여주는데, 이에 대한 설명을 들을 수 있습니다.

'Chromium' 카테고리의 다른 글

크롬 Headless 모드에서 GPU 가속하기  (3) 2024.01.25
크로미엄(Chromium) 프로젝트 기여하기  (2) 2021.05.01

댓글()

크로미움 프로젝트 커미터 (Chromiun Project Committer)

FOSS|2016. 11. 6. 04:33

얼마전 크로미움 프로젝트 커미터(Chromiun Project Committer)가 되었다. 프로젝트에 기여한지 3년이 되었지만, 사실상 다른 업무로 많은 기여를 하지 못했다. 올해 어느 정도 여유가 생겨서 평소에 관심이 있었던 Blink엔진의 Editing 부분에 집중적으로 기여했다. 

어느 오픈소스 프로젝트나 커미터가 되려면 많은 노력이 필요하다. 어떻게 보면 쉽고 어떻게 보면 어렵다. 크로미움 프로젝트의 경우, 주요한 10개의 patch를 기존 커미터들이 평가하는데, 반대 없이 3명 이상의  +1을 받아야 한다.  기여한 patch의 개수는 중요하지 않다.  실제 버그를 수정하고, Feature를 개발하고 성능을 높이고, refactoring도 큰 수준으로 해야 다른 커미터로 부터 커미터 지명을 받을 수 있다. 사실 구글 직원이 아니면 이런 기여를 하기가 쉽지 않다. 누가 멘토를 해주는 것도 아니고, 자기 스스로 문제를 찾고 feature를 개발해야 하는데, 구글의 허락 없이는 feature를 추가하는 것은 불가능하다. 주요 feature들은 이미 Googler들에게 할당되어 있기 때문에 새로운 분야를 찾는 것 역시 어렵다. 그래서 가장 쉬운 것이 버그를 잡는 것이다. Issue Tracker에 등록된 버그를 해결하는 것이 빠른 일이지만, 사실상 Googler들이 해결 안하는 버그들 역시 고치기 어려운 것이 대부분이다. :-( 하지만, 기역할 분야를 결정하고 하나 하나 버그를 잡다보면 코드를 이해하게 되고, 비슷한 버그를 쉽게 수정할 수 있다. 이때, 가능한 많은 사람들이 관심을 가져주는 급한 버그를 해결하면 더 의미가 있다. 아래는 이번에 커미터가 되기 위해 제출한 주요 patch 목록이다.

Blink Editing

  1. [Issue 226941] Contenteditable issues related to backspace handling
  2. [Issue 318925] Copy and paste sometimes removes spaces between words
  1. [Issue 310149] ContentEditable:   is forced on SPACE between text nodes
  2. [Issue 335955] Unwanted spans inserted in contentEditable elements
  3. [issue 571420] chrome hangs on when creating bullet list in contenteditable
  1. [Issue 634482] Formatting tags converted to spans with styles on cut/paste
  2. [Issue 625802] Unnecessary quote appears after clicking on indent more option in compose box.
  3. [Issue 582225] document.queryCommandState isn't working well with <sub> and <sup>
  4. [Issue 584939] document.queryCommandState returns true for bold, italic, underline, and strikethrough after selecting image
  5. [Issue 385374] queryCommandState can return true for both list types
 

Linux and Wayland support

  1. [Issue 408481] System dialogs (e.g. 'Save As...') are not modal on Ubuntu
  2. [Issue 473228] Make *::ShowWithWindowState(minimized, maximized, fullscreen) consistent across platforms
  3. Issue 578890 upstream wayland backend for ozone

한국인 크로미움 커미터는 이미 9명이 있다. 많은 대기업에서 크로미움 기반으로 브라우저를 개발하고 있어서 그 수가 많은 편이다.  이렇게 다양한 사람들이 함께 내가 사용하는 웹브라우저를 개발한다는 것이 오픈소스가 주는 매력이 아닐까 싶다. 지금 이 순간도 수 많은 사람들이 크롬 브라우저에서 문서를 편집할 때 마다, 내가 추가한 코드가 실행된다고 생각하면 개발자로서 이 보다 보람찬 일은 없을 것이다.

댓글()