크롬 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

댓글()