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

브라우저가 단순히 컨텐츠를 탐색하고 보여주는 애플리케이션이라는 울타리를 벗어나, 또 다른 애플리케이션을 실행하기 위한 플랫폼으로 발전하고 있다. 하지만, 현재 구현된 브라우저 엔진만으로 플랫폼 역할을 하기에는 넘어야할 한계가 있는데, 바로 성능과 안정성 확보다. 이를 위해 각 브라우저 벤더는 아래 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