HW 가속 기반 웹 고속화 기술동향

Trends of Hardware Acceleration Technology in Web Browser

저자
이재호, 조현우, 김도형, 이형석, 윤석진, 류 철, 조창식 / 모바일서비스플랫폼연구실
권호
31권 4호 (통권 160)
논문구분
초지능 기술동향 특집
페이지
65-76
발행일자
2016.08.01
DOI
10.22648/ETRI.2016.J.310407
초록
특정 제조사의 단말 또는 운영체제에 의존성이 없는 플랫폼 독립적인 웹은 높은 이식성, 소프트웨어의 재활용, 개발 생산성, 풍부한 개발자 존재, 유지 보수 면에서 장점을 가지나, 화려한 UI/UX를 제공하는 네이티브 응용에 비해 낮은 성능으로 웹 기반의 응용 개발 및 보급이 크게 활성화되지 못했다. 한편 데스크톱은 물론 모바일 단말의 멀티코어 기반 Graphic Processing Unit(GPU), CPU 탑재 등 HW 고사양화와 웹 응용에서도 HW 가속 기능을 활용할 수 있는 표준 제공으로 성능 제약을 극복할 수 있게 되었다. 본고에서는 GPU 발전동향을 살펴보고, 고속 렌더링 및 병렬 연산처리를 요구하는 웹 응용이 GPU기반 HW 가속 기능을 활용할 수 있는 크로노스 그룹의 그래픽 가속(Web Graphics Library: WebGL) 및 컴퓨팅(Web Computing Language: WebCL) 지원 표준 규격을 정리한다. 또한, 최근 차세대 GPU Application Programming Interface(API)로 발표된 Vulkan에 대해 알아보고, 웹 고속화 기술에 적용 가능성에 대해 전망한다.
   2845 Downloaded 4220 Viewed
목록

Ⅰ. 서론

W3C의 HTML5는 2014년 10월 표준 권고안 확정으로, 데스크톱은 물론 모바일단말을 위한 웹 브라우저 표준 기술로 자리잡았다[1]. 일반적으로 웹 브라우저의 주요 기능은 인터넷 접속을 통해 웹 서버로부터 다양한 콘텐츠를 다운받아 사용자에게 보여주는 클라이언트 역할을 한다. 또 다른 측면에서 인터넷에 접속되지 않은 오프라인 상태에서도 독립 웹 앱(Web App)들을 구동시킬 수 있는 실행 플랫폼 역할을 한다.

과거 웹 플랫폼 활성화를 위해 네이티브 응용 배포를 위한 오픈마켓과 유사한 개념으로 BONDI, Wholesale Applications Community(WAC), K-WAC(한국형 통합 앱 스토어)등을 결성하였으나 크게 성공을 거두지는 못했다.

(그림 1)과 같이, 특정 제조사의 단말 또는 운영체제에 의존성이 없는 플랫폼 독립적인 웹은 높은 이식성, 소프트웨어의 재활용, 개발 생산성, 풍부한 개발자 존재, 상대적으로 쉬운 유지 보수 측면에서 장점을 가지나, 풍부한 Application Programming Interface(API)와 화려한 UI/UX를 제공하는 네이티브 응용에 비해 기능 및 성능이 떨어져서 웹 기반의 응용 개발 및 보급이 미흡했다. 특히, 단말 리소스가 제약적인 모바일단말에서 웹 응용은 네이티브 응용에 비해 성능 및 기능적인 측면의 부족으로, 최근까지도 기존 운영체제 플랫폼 기반의 네이티브 모드와 결합하는 하이브리드 방식이 일반적으로 사용되고 있다.

(그림 1)

웹 플랫폼과 네이티브 플랫폼 비교

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f001.jpg

그러나 최근 멀티코어를 갖는 CPU, Graphic Processing Unit(GPU), General-Purpose computing on Graphics Processing Units(GPGPU) 프로세서 진화 및 멀티 프로세서 탑재 등 하드웨어 고성능화로 웹 응용의 실행 속도를 높일 수 있는 기술과 표준들이 지원되고 있다.

특히, 크로노스 그룹(Khronos Group)은 오디오, 비디오, 2/3D 그래픽, 병렬 컴퓨팅, 센서 스트림 등을 처리하기 위한 표준 API 규격을 개발하는 비영리 컨소시엄 단체이다[2]. 크로노스 그룹의 표준규격을 통해 여러 제조사 들에서 출시되는 프로세서 및 센서 등의 HW 모듈들을 다양한 SW플랫폼에서 사용할 수 있다.

본고에서는 GPU 및 CPU 발전동향에 대해 정리하고, 웹 응용 개발에 사용되는 자바스크립트 언어에서 HW 가속 기능을 사용할 수 있도록 CPU 및 GPU 접근기능을 제공하는 크로노스 그룹의 Web Graphics Library (WebGL) 및 Web Computing Language(WebCL) 표준규격 및 구현현황을 살펴본다.

또한, 기존 웹 응용과 비교하여 크로노스 그룹의 표준규격을 활용할 때 HW 가속에 의한 성능 이득을 분석하기 위해 공개 프로젝트로 형태로 개발되어 높은 시장 점유율을 갖는 크로미엄 브라우저에서 측정한 실험결과를 제시한다. 크로미엄(Chromium)은 크롬(Chrome) 브라우저의 기반이 되는 공개 프로젝트로서, AOSP(Android Open Source Project)와 안드로이드 사이의 관계와 유사하다. 즉, 크로미엄과 AOSP는 각각 크롬과 안드로이드의 기반 소스로서, 공개 프로젝트로 개발 되지만, 구글의 추가 작업을 통해 오픈 마켓 접근, 구글 서비스 이용, 코덱 등 라이선스가 필요한 모듈, 그리고 상용 디바이스 지원을 위한 최적화 코드를 포함하여 상표로 등록되어 최종 배포된 것이 크롬과 안드로이드인 것이다.

고속 렌더링과 복잡한 연산을 요구하는 웹 응용들은 그래픽 가속을 위해 Open Graphics Library(OpenGL) 기반 WebGL 기술과 병렬처리 컴퓨팅을 위해 Open Computing Language(OpenCL) 기반 WebCL 기술을 사용할 수 있다. 여기에 최신 GPU의 하드웨어 구조에 적합한 차세대 GPU API 표준인 Vulkan이 2016년 2월에 공표되었다[3]. Vulkan은 OpenGL 및 OpenCL과 같이 제조사 GPU 드라이버에 접근하는 계층으로, 아직 WebGL 및 WebCL과 같이 웹 응용에서 Vulkan을 호출하는 인터페이스 규격은 고려되지 않고 있다. 그러나 최근 출시되는 대부분의 그래픽 드라이버들이 Vulkan을 지원하고 있으며, 안드로이드(Android N 이상)에 기본 탑재될 예정이므로 웹 성능 향상에 직접 또는 간접적으로 영향을 줄 것으로 예상한다.

Ⅱ. GPU 발전 및 크로노스 표준동향

1. GPU 및 CPU 발전동향

기존 단일 코어 방식의 중앙처리장치(CPU)들은 클락(clock) 속도를 높이는 방식으로 성능 향상을 이루어왔지만, 높은 전력 소비와 발열 문제로, 최근에는 하나의 칩에 다수의 프로세서 코어를 탑재하는 방향으로 발전하였다. 일반적으로 프로세서 용량 확장 방식은 멀티 코어(multi-core) 프로세서와 매니 코어(many-core) 프로세서 방식으로 구분할 수 있다. 멀티코어 프로세서에는 2, 4, 8개의 CPU 수준 코어를 하나의 칩에 집적하는 것으로, 인텔의 i7 프로세서 등이 대표적인 예이다. 매니코어 프로세서 방식은 매우 작은 코어를 대량으로 칩에 집적하는 것으로, 칩당 수백 혹은 수천 개의 코어가 내장되어 있으며, 현재의 다양한 GPU들에 적용되고 있다. (그림 2)는 일반적인 CPU와 GPU의 내부구조를 간략히 비교한 것이다.

(그림 2)와 같이, GPU의 구조는 대량의 데이터를 병렬로 동시에 처리하기에 적합한 구조로 되어있다. 따라서, 각 그래픽 칩 제조사들은 자사의 GPU 구조를 효과적으로 활용하기 위한 프로그래밍 모델들을 제공하고 있다. 사례로, NVIDIA는 데이터 병렬처리를 효과적으로 지원하는 Compute Unified Device Architecture (CUDA)를 응용 개발자들에게 제공하고 있다[4]. 로열티 제한이 없는 표준 API를 제정하는 크로노스 그룹에서도 GPU를 활용하기 위한 병렬처리 언어인 OpenCL 규격을 정의하고, 대다수의 그래픽 제조사가 이를 지원하고 있다[5].

(그림 2)

CPU와 GPU 구조 비교

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f002.jpg

<표 1>은 NDIVIA에서 출시한 주요 그래픽 카드들의 코어 수 변화를 보여주는 것으로[6], 최신 그래픽 카드가 출시될 때마다, 코어 수와 클락 스피드가 증가됨을 알 수 있다. 앞으로 고성능을 요구하는 다양한 응용 분야에서 GPU의 연산능력을 활용하려는 시도는 더욱 증대될 것으로 예측된다.

<표 1>

NVidia 그래픽 칩의 코어수 변화

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t001.jpg

2. 크로노스 그룹의 표준화 동향

크로노스 그룹은 기업체 중심의 컨소시엄으로, 모바일단말 등 임베디드 기기에 필수적으로 사용되는 미디어 가속 표준을 제정하고 있는 비영리 표준화 단체기구이다. (그림 3)은 그래픽 가속(OpenGL) 및 병렬 컴퓨팅(OpenCL)을 위한 표준들을 보여준다. 이들 규격은 대부분 하드웨어 장치와 응용 소프트웨어를 연결하는 API 제공한다.

(그림 3)

그래픽 및 컴퓨팅 가속을 위한 표준

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f003.jpg

<출처>: https://www.khronos.org/assets/uploads/developers/ library/overview/vulkan-overview.pdf

• OpenGL: 데스크톱을 위한 3D 그래픽 표준

• OpenGL|ES: 임베디드 시스템용 OpenGL로 스마트폰, 태블릿 PC 등에 널리 사용

• OpenGL|SC: 항공 등 Safety Critical 분야를 위한 그래픽 표준

• OpenCL: 이종 프로세서를 위한 C 기반 병렬처리 표준언어

• Standard Portable Intermediate Representation (SPIR): Low Level Virtual Machine(LLVM)기술에 기반한 그래픽 및 병렬 컴퓨팅을 위한 중간 표현 언어

• Vulkan: 병렬 컴퓨팅 및 그래픽을 가속을 위한 차세대 그래픽 API 표준

OpenGL은 산업계에서 가장 널리 쓰이는 2D/3D 그래픽 표준 API로, 다양한 플랫폼에서 수많은 응용이 OpenGL로 개발되었다. 이후에 OpenGL을 확장하여 모바일 등 임베디드 환경에서 사용할 수 있도록 OpenGL ES 규격과, 항공전자에서 사용하기 위해 안정성이 추가된 OpenGL SC 규격을 개발하였다. 또한, 최근에 주로 그래픽 가속을 위한 OpenGL 규격에 컴퓨팅 기능을 보완한 차세대 GPU API 표준인 Vulkan을 개발하였다.

OpenCL은 슈퍼 컴퓨터, 고성능 PC, 모바일단말 등에 사용되는 이종 컴퓨팅 및 병렬 컴퓨팅 언어로서 Inter-national Organization for Standardization(ISO) C99를 일부분 포함하고 있다. OpenCL 2.0은 GPU에서의 병렬처리뿐 아니라, 싱글/멀티 코어 CPU, DSP, FPGA에서도 실행될 수 있는 범용 병렬처리 언어로 자리잡고 있다. OpenCL 2.0 이후 CPU와의 상호 운용성이 강화되어, 가용 자원을 검색하여 추가 자원을 동적으로 활용가능하다. OpenCL 2.1은 C++14 에 기반하고 있으며, SPIR 지원을 통해 소스코드 공유가 가능하다.

한편, 웹 응용을 개발하는 언어인 자바스크립트를 통해 하드웨어 가속 기능을 이용하기 위해서, 각 제조사에서 제공하는 OpenGL 및 OpenCL 드라이버 호출 인터페이스가 필요한데, 이러한 규격이 바로 WebGL 및 WebCL이다. (그림 4)는 웹 페이지 또는 자바스크립트 미들웨어를 활용하는 웹 응용에서 브라우저 내에 구현된 WebGL 및 WebCL 모듈을 통해 OpenGL 및OpenCL을 각각 호출하여 HW 가속을 사용하는 개념을 보여준다.

(그림 4)

WebGL/CL을 통한 웹 가속 개념

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f004.jpg

Ⅲ. WebGL 기반 자바스크립트 라이브러리

WebGL은 OpenGL ES 2.0을 기반으로, 자바스크립트 언어를 통해 웹 브라우저에서 3D 그래픽을 사용할 수 있도록 지원하는 웹 기반의 그래픽 라이브러리이다. WebGL은 비영리 단체인 크로노스 그룹에서 관리되고 있으며, 현재 V1.0.3 규격이 최신이다[7].

한편, OpenGL 기반의 WebGL 프로그래밍은 일반 웹개발자가 사용하기 어려우므로, 최근 개발자가 WebGL 기반 웹 응용을 쉽게 개발할 수 있도록 다양한 3D 그래픽스 지원 자바스크립트 라이브러리들이 개발되고 있다. 본 절에서는 오픈 소스 기반의 대표적인 3D 그래픽스 지원 자바스크립트 라이브러리들인 ThreeJS, SceneJS, PhiloGL, BabylonJS의 주요특징들을 정리한다.

1. ThreeJS

ThreeJS는 3D 자바스크립트 라이브러리 중 가장 널리 사용되며, 홈페이지를 통해 풍부한 예제를 제공하고 있다[8].

ThreeJS는 장면(Scene), 카메라, 렌더러와 같은 추상화된 상위 개념의 고수준 API를 제공하므로, WebGL 문법이나 컴퓨터 그래픽스를 위한 선형 대수학(Linear Algebra)을 모르더라도 웹 브라우저에 비교적 쉽게 3D 장면을 생성하고 조작할 수 있다. 그리고, 다양한 쉐이더(Shader) 코드까지 제공하고 있어서 개발자가 원하는 기능을 손쉽게 조합하여 쓸 수 있다.

(그림 5)는 ThreeJS를 활용한 응용 실행 화면을 보여주며, <표 2>는 ThreeJS에서 제공하는 고수준 API들의 기능을 요약한 것이다. ThreeJS는 MIT 라이센스 기반의 오픈 소스로 개발되고 있으며, 개발 사이트에서 소스를 다운로드 받을 수 있다[9].

<표 2>

ThreeJS API 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t002.jpg
(그림 5)

ThreeJS를 활용하는 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f005.jpg

<출처>: ThreeJS 홈페이지

2. SceneJS

SceneJS는 자바 스크립트를 이용하여, (그림 6)과 같이 매우 상세한 3차원 시각화(Visualization) 기능을 제공하며, JavaScript Object Notation(JSON) 기반의 그래픽 API를 제공한다[10].

(그림 6)

SceneJS를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f006.jpg

<출처>: SceneJS 홈페이지

SceneJS는 공학 및 기계 분야에서 상호연결되는 수많은 객체들을 렌더링하는 상세 모델링에 활용된다. SceneJS 홈페이지에는 개발자가 웹 응용을 쉽게 개발할 수 있도록 다양한 예제를 제공하고 있다. <표 3>은 SceneJS의 주요 기능을 정리한 것으로, JSON기반의 장면 그래프 정의 기능, WebGL의 쉐이더 접근 기능, 동적인 객체 표면 처리 기능 등을 포함한다.

<표 3>

SceneJS 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t003.jpg

SceneJS는 GNU General Public License(GPL) 과 MIT 라이선스 기반의 오픈 소스 방식으로 개발되고 있으며, SceneJS의 소스는 개발 사이트를 통해 다운로드할 수 있다[11].

3. PhiloGL

PhiloGL은 게임 개발과 데이터 시각화를 지원하기 위한 WebGL 프레임워크이다[12]. PhiloGL은 프로그램, 쉐이더로부터 XMLHttpRequest(XHR), JSON with Padding(JSONP) 효과, 웹 워커(Web Worker)까지 다양한 모듈들을 제공하며, 모든 모듈을 하나의 글로벌한 라이브러리로 관리한다.

<표 4>는 PhiloGL의 주요 기능들을 요약한 것으로, 각각의 기능 모듈에 대해 상세한 API문서와 (그림 7)과 같은 다양한 샘플 예제를 함께 제공함으로써 개발자가 PhiloGL을 쉽게 사용할 수 있도록 지원한다. PhiloGL는 MIT 라이선스 기반으로 개발되고 있으며, 소스는 PhiloGL 홈페이지에서 다운로드할 수 있다.

<표 4>

PhiloGL 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t004.jpg
(그림 7)

PhiloGL를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f007.jpg

<출처>: PhiloGL 홈페이지

4. BabylonJS

BabylonJS는 3DS MAX, Blender와 같은 별도의 그래픽 도구와의 연동 및 Unity5와 같은 게임 엔진과의 연동을 지원하는 오픈 소스 기반의 자바스크립트 프레임워크이다[13].

BabylonJS는 3D 프로젝트의 생산성과 사용자 편의성을 극대화하기 위해, 쉐이더 템플릿이나 메쉬 데이터, 재질 종류를 선택하여 미리 그 결과를 확인해 볼 수 있는 기능도 제공한다. (그림 8)은 BabylonJS를 활용한 샘플 응용의 실행화면을 보여주며, <표 5>는 BabylonJS의 주요 기능을 요약한 것이다.

<표 5>

BaylonJS 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t005.jpg
(그림 8)

BabylonJS를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f008.jpg

<출처>: BabylonJS 홈페이지

BabylonJS는 Apache 2.0 라이선스 기반으로 개발되고 있으며, 소스는 BabylonJS 개발 사이트를 통해 다운로드할 수 있다[14].

Ⅳ. HW 가속 기반 컴퓨팅(WebCL)

1. WebCL의 개요

WebCL은 하드웨어 가속을 웹에서도 활용하기 위하여 OpenCL의 자바스크립트 바인딩을 정의한 것으로서, 향후 웹 브라우저의 기능으로 탑재될 수 있는 잠재성도 고려하여 크로노스 그룹에서 제정되었다[15]. (그림 9)는 OpenCL 1.1 기반으로 정의된 WebCL 1.0 [16]의 구조도이다. WebCL은 복잡한 연산을 요구하는 웹 응용(예, 물리엔진), 빅데이터 시각화, 또는 WebGL에서의 부족한 계산 능력을 보완하는 데 활용할 수 있다.

(그림 9)

WebCL API의 구조도

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f009.jpg

2. WebCL의 구현현황

WebCL은 오픈 프로젝트별로 조금씩 다른 방식으로 구현되고 있으며, <표 6>은 구현결과물에 대한 항목별 비교표이다.

<표 6>

공개 프로젝트별 WebCL 구현현황

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t006.jpg

가. WebCL 표준규격 지원

인텔의 RiverTrail 프로젝트[20]는 WebCL 규격을 직접 구현하고 있지 않지만, OpenCL의 병렬계산 기능을 웹에서 사용할 수 있도록 ParallelArray라는 자바스크립트 라이브러리를 파이어폭스 브라우저를 위한 확장 라이브러리 형태로 제공한다.

한편, AMD[17], 인텔[18], 노키아[19], 삼성, 그리고 ETRI[21]에서 진행하는 나머지 프로젝트들은 WebCL 표준규격을 구현하였다. 구글 크로미엄 또는 웹킷을 기반으로 한 경우는 브라우저에 통합된 형태로 구현되었으며, 파이어폭스의 경우는 브라우저에 추가 설치하여 애드온(add-on)하는 형태로 동작하도록 구현되었다.

나. 웹 응용의 동작환경

인텔의 Crosswalk 프로젝트[18]는 크로미엄 소스를 기반으로 하고 있으며, 최종 빌드 결과는 웹 브라우저와 별도로 웹 런타임(Web Runtime) 형태로 제공되어, 하이브리드 앱(Hybrid App.) 형태로 실행된다. 윈도우, 리눅스, 안드로이드, 타이젠 등 다양한 플랫폼에서 동작할 수 있다는 장점이 있고, 여러 가지 실험적인 최신 웹 기술을 활발히 포함시키고 있는 프로젝트이다. 이 가운데 WebCL 기능도 Crosswalk 14 이후 버전에 대해 기본적으로 지원하고 있다[22]. <표 6>의 나머지 구현결과물들은 모두 웹 브라우저에서 동작하는 WebCL 기능을 구현한다는 측면에서 비슷하다.

하이브리드 앱 형태는 모바일 환경에서 사용자와 개발자에게 익숙한 형태인 단일 앱 형태로 결과물이 나오며, 웹 브라우저의 보안 문제에서 좀 더 자유로울 수 있다는 장점이 있다. 그러나, 비교적 큰 사이즈의 웹 런타임을 단말에 미리 설치해야 한다는 단점이 있다.

이에 비해 웹 브라우저에 통합한 경우는 별도의 설치 없이도 웹 페이지를 접속함으로써 WebCL의 병렬 처리 기능을 활용할 수 있는 장점이 있다. 그러나, 웹 브라우저 버전이 업데이트됨에 따라 이를 추적하여 WebCL 패치(patch)를 반영해야 하는 번거로움이 있다. 실제로 <표 6>의 웹 브라우저에 통합한 구현결과물 가운데 ETRI의 HighWeb을 제외하면, 추가적인 업데이트가 중단되어 최신 버전의 브라우저에 적용하기 어렵다.

다. 다양한 운영체제(OS) 지원

ETRI의 HighWeb[21]은 크로미엄 공개 소스를 기반으로 안드로이드 모바일 환경을 1차 목표로 WebCL을 구현하였다. 이러한 목표 선정의 이유는 다음과 같다. 첫째, 안드로이드는 파편화가 심각하여 이에 대응할 수 있는 웹 기술이 적합하기 때문이다. 둘째, 모바일단말의 HW 성능이 급격하게 향상되고 있음에도 불구하고 웹 플랫폼에서는 이러한 HW 자원 접근 제약으로 충분한 성능 향상의 효과를 누리지 못하고 있기 때문이다. HighWeb은 모바일 환경에서 성공적으로 WebCL 지원하고, 이를 바탕으로 리눅스 기반 셋탑박스 환경에서도 WebCL을 지원할 예정이다.

라. 웹 브라우저별 WebCL 구현현황

<표 6>에 정리된 바와 같이 현재 WebCL 구현물은 주로 크로미엄과 파이어폭스에 적용되고 있다. 삼성의 WebKit 기반 WebCL 구현과 다양한 데모 프로그램은 초기 WebCL 표준화 및 호환성 테스트에 많은 기여를 하였으나 현재는 개발활동이 중단된 상태이다.

노키아의 WebCL 구현[19]은 파이어폭스에서 애드온(add-on) 형태로 동작하도록 개발되었으나, 역시 현재는 개발활동이 중단된 상태이다. 한편 4대 브라우저 중 오페라와 인터넷 익스플로러는 폐쇄적 소스 정책으로 WebCL 구현에 대한 고려가 없었다.

3. WebCL 지원 단말 현황 및 성능 이득

웹 브라우저 또는 웹 런타임에 WebCL 기능이 구현되었더라도, 실제 웹 응용이 동작하기 위해서는 단말 제조사에서 제공하는 OpenCL 라이브러리가 반드시 필요하다. <표 7>은 OpenCL을 지원하는 모바일단말들을 보여준다. 구글이 안드로이드 4.3 버전 이후 OpenCL 지원을 중단했음[23]에도 불구하고, 최신 스마트폰에는 공식 또는 비공식적으로 OpenCL 라이브러리가 포함되어 있다. 한편, OpenCL이 지원되는 않는 모바일단말은V장에서 살펴볼 차세대 GPU API인 Vulkan의 컴퓨팅 기능을 활용할 수 있을 것으로 기대된다. 구글은 Vulkan에 대한 안드로이드 지원을 공표한 바 있다[24].

<표 7>

OpenCL 지원 모바일단말 현황

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t007.jpg

<표 8>은 ETRI의 HighWeb 브라우저 내에서 다양한 WebCL 응용 프로그램을 수행한 결과를 정리한 것이다. WebCL 성능 이득을 측정할 수 있는 샘플 코드[25]는 매우 제한적이며, 대부분 표준화가 완료되기 전에 구현된 것으로 현재 버전에 맞도록 수정이 필요하다. <표 8>은 삼성이 공개한 중력 시뮬레이션(Nbody)과 형태변형 시뮬레이션(Deform)을 이용하여, 2013년 출시된 Nexus 7 2세대 단말에서 성능 측정한 결과를 보여준다. 응용 별 연산량과 단말에 성능에 따라 다르지만, 순수 자바스크립트 대비 최대 10배 빠른 성능을 보이고 있다. 특히 WebGL과 함께 사용했을 경우는 순수 자바스크립트 대비 최대 20배 이상의 성능이득을 보임으로써 고성능 웹 개발에 대한 가능성을 보여주고 있다.

<표 8>

WebCL 응용 성능 시험결과

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t008.jpg

Ⅴ. 차세대 그래픽/컴퓨팅 가속 규격(Vulkan)

Vulkan은 크로노스 그룹에서 OpenGL 이후의 효율성 높은 고성능 3D 그래픽 및 컴퓨팅 규격으로 최근 공표한 차세대 GPU API이다[3].

1. 차세대 GPU API의 발전방향과 현황

차세대 GPU API의 첫 번째 요구사항은 명시적인(explicit) API이다. 이것은 응용 혹은 개발자가 정확히 언제, 무엇을 해야 할지를 결정할 수 있다는 것을 의미한다[27]. (그림 10)에서 보듯이 이러한 수준의 API는 크로노스 그룹의 Vulkan 이외에도 몇몇 경쟁 API가 있다. 마이크로소프트는 DirectX 12라는 차세대 GPU API를 선보이고 있다. Vulkan과 거의 같은 수준의 추상화와 목적을 지니고 있다. 그러나 DirectX API는 단지 윈도우10에서만 동작한다. 애플은 자사 단말에서 최적의 성능을 내기 위해 Metal이라는 API를 공개하였다. Metal은 애플 기기에서만 동작하며 일부 그래픽스 기능(예, 테셀레이션(tessellation))은 제외된 방식이다.

(그림 10)

차세대 GPU API의 경쟁구도[26]

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f010.jpg

2. Vulkan의 주요특징

가. 폭넓은 일관성과 호환성

(그림 11)은 Vulkan과 OpenGL의 SW 스택을 비교한 그림이다. Vulkan은 GPU 제조사들이 책임지던 대부분의 드라이버의 기능을 응용 프로그램 영역으로 이동함으로써 드라이버 구현의 부담을 덜었다. 이로써 GPU 제조사들은 매우 얇은 드라이버를 구현할 수 있게 되었으며, 벤더별로 상이하던 드라이버 내부동작을 사실상 거의 제거시켰다. 따라서, 과거 API 포팅 과정에서 많은 노력이 필요했던 HW별 코드 최적화 작업 없이도, 대부분 비슷한 성능을 낼 수 있다[28].

(그림 11)

Vulkan과 OpenGL의 차이점[26]

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f011.jpg

또한, Vulkan은 이미 안드로이드, 타이젠, 리눅스(우분투, 레드햇, 스팀OS), 윈도우(윈도우7, 8.1, 10)를 지원하고 있다. 이러한 다양한 OS 지원은 데스크탑, 모바일, 임베디드 환경에 이르기까지 동일한 코드로 개발이 가능함을 의미한다.

나. 높은 효율성과 성능

전통적인 컴퓨터 그래픽스를 포함하여 GPU를 활용하는 많은 작업에서, 이미 GPU 성능이 병목구간이 아니다. 대부분의 경우 GPU는 CPU의 작업이 끝나기를 기다리고 있는 경우가 많으며, 이러한 비효율성은 특히 모바일과 임베디드 환경에서 더 심각하다.

Vulkan은 다음과 같은 점에서 CPU 오버헤드를 줄여주는 높은 효율성을 갖는다[29].

첫째, 런타임에 오류를 검사하거나 API를 용도대로 잘 사용하고 있는지 검증하지 않는다. 둘째, 드라이버의 내부에서 수행하던 의존성 추적과 동기화를 외부에서 명시적으로 수행한다. 셋째, 명령(command)를 생성/기록하는 동작과 이를 하드웨어 대기열(queue)에 제출하는 동작을 분리한다. 넷째, 런타임에 수행되던 쉐이더 코드의 컴파일을 사전에 중간언어 수준으로 컴파일하여 기존의 런타임 컴파일 오버헤드를 줄이고, 부가적으로 응용 소스 코드를 감출 수 있다. 다섯째, 최신 GPU 지원하는 멀티 스레딩(multi-threading)에 최적화된 명령어 구조를 갖는다.

3. 웹 기술로의 Vulkan 적용동향

차세대 그래픽스 및 컴퓨팅 API로서의 Vulkan은 개방형 표준으로서 많은 잠재력을 지니고 있다. 웹에서도 Vulkan의 장점을 활용하는 방안을 모색 중이다.

가. 계산 중심의 웹 응용 개발을 위한 Vulkan

Vulkan은 2가지 종류의 파이프라인 객체를 제공한다. 특히 기존의 그래픽스 API에서는 고려하지 않았던 계산 관련 파이프라인도 추가되었다. 이는 점차 GPU가 범용 연산 디바이스인 GPGPU로 사용되는 추세를 반영한다.

IV장에서 살펴본 바와 같이 WebCL 기술을 이용하여 웹에서도 하드웨어 커널 프로그래밍을 통해, GPU 병렬 처리를 수행함으로써 계산 위주의 응용에 대한 성능을 개선하려는 시도가 있었다. 그러나 WebCL은 주요 웹 브라우저 벤더의 폭넓은 지지를 얻고 있지 못하므로, Vulkan의 컴퓨팅 파이프라인은 이에 대한 좋은 대안이 될 수 있다. 이에 ETRI에서도 WebCL 기능을 크로미엄에 성공적으로 추가한 것에 더하여, Vulkan의 컴퓨팅 쉐이더를 이용한 웹 응용의 계산 가속 기능 확장을 고려하고 있다.

나. 웹 브라우저 하부 기술로의 Vulkan

구글의 최신 크로미엄 소스를 살펴보면 브라우저 자체 성능 개선을 위한 시험 목적으로 Vulkan 소스가 커밋(commit) 되어 있음을 알 수 있다[30]. 웹 브라우저의 렌더링 속도저하는 매우 복잡한 구조로부터 발생하는 다양한 원인이 존재한다. 그러나 단지 그래픽스 API로만 그 범위를 좁혀보면, Vulkan은 그 특징상 매우 명시적인 API이므로 벤더별 디바이스 드라이버 구현에 많은 부분 감추어져 있는 기존 API에 비해 좀 더 최적화할 수 있는 여지가 남아있는 것으로 볼 수 있다.

Ⅵ. 결론

본고에서는 최신 GPU 및 CPU 발전동향을 살펴보고, HW 가속 기능을 활용할 수 있는 크로노스 그룹의 다양한 표준규격들을 정리하였다. 특히 웹 가속 기술을 구현한 오픈 소스 프로젝트들 개발현황 및 주요 결과물들을 분석하였다.

웹 플랫폼의 활성화를 위해서는 네이티브 플랫폼 수준의 풍부한 기능 제공뿐만 아니라, 웹 응용들이 최신 GPU 및 CPU 기반의 HW가속을 활용함으로써 고속 렌더링과 복잡한 연산 수행이 가능해야 할 것이다.

최근 구글은 네이티브 응용과 동일한 사용자 경험을 제공하면서도 오프라인 모드의 웹 기능을 강화하기 위해 기존 하이브리드 앱(Hybrid Apps)보다 진보된 개념의 프로그래시브 웹 앱(Progressive Web Apps)을 소개하였다. 추가된 주요 기능은 웹 응용의 라이프사이클 관리를 위한 ‘웹 앱 매니패스트(Web App Manifest)’, 백그라운드 실행 지원을 위한 ‘서비스 워커(Service Worker)’, 비동기적 알림을 위한 ‘푸쉬 알림(Push Notification)’ 등으로, 기존 네이티브 플랫폼에서 제공하는 기능을 확장 포함한다.

이러한 웹의 기능적인 측면 확장 이외에, 본고에서 다룬 HW 가속 기반 웹 고속화 기술을 적용하여 성능을 향상시킨다면, 향후 플랫폼 독립적인 웹 기술이 보다 많은 제품에 확산될 수 있을 것으로 전망된다.

용어해설

네이티브 응용(Native App.) 안드로이드 자바 또는 iOS의 Object-C로 작성되어 특정 플랫폼에서만 동작되는 응용으로, 자바스크립트로 작성된 웹 응용에 비해 확장성은 떨어지나 하드웨어 접근성이 높고 실행속도가 빠른 장점을 가짐.

하이브리드 응용(Hybrid App.) 네이티브 웹과 동일한 환경에서 동작하지만, 부분적으로 HTML5, CSS, JavaScript로 작성된 응용으로 웹 앱(Web APP)가 동일한 인퍼페이스를 제공하지만 네이티브 플랫폼의 자원을 활용하므로 성능이 빠름

WebGL 웹 브라우저 내에서 그래픽 처리를 위해 GPU를 활용한 고속 렌더링을 지원함으로써 웹 응용에서 고품질의 3D 그래픽 처리 성능을 높일 수 있는 기술

WebCL 웹 브라우저 내에서 GPU, CPU 등을 이용하여 병렬 처리를 가능하게 함으로써 계산 집약적인 웹 응용의 성능을 높일 수 있는 기술

약어 정리

API

Application Programming Interface

CUDA

Compute Unified Device Architecture

GPGPU

General-Purpose computing on Graphics Processing Units GPL GNU General Public License

GPU

Graphic Processing Unit ISO International Organization for Standardization

JSON

JavaScript Object Notation

JSONP

JSON with Padding

LLVM

Low Level Virtual Machine

OpenCL

Open Computing Language

OpenGL

Open Graphics Library

OpenGLES

Open Graphic Language Embedded System

SPIR

Standard Portable Intermediate Representation

SYCL

C++ Single-source Heterogeneous Programming for OpenCL

WAC

Wholesale Applications Community

WebCL

Web Computing Language

WebGL

Web Graphics Library

XHR

XMLHttpRequest

[1] 

W3C Recommendation 28th Oct. 2014, http://www.w3.org/ TR/2014/REC-html5-20141028/

[2] 

이환용, “크로노스의 이해 (경북대학교3D 융합 기술 지원센터),” 2015. 5.

[3] 

벌칸 공식 사이트, https://www.khronos.org/vulkan

[4] 

Nvidia, Cuda http://www.nvidia.com/object/cuda_home_ new. html

[5] 

OpenCL https://www.khronos.org/opencl/

[6] 

위키피디아 사이트, https://en.wikipedia.org/wiki/List_of_Nvidia_ graphics_processing_units

[7] 

크로노스 그룹, WebGL, https://www.khronos.org/registry/ webgl/specs/1.0/

[8] 

ThreeJS 공식 사이트, http://threejs.org/

[9] 

ThreeJS 개발 사이트, https://github.com/mrdoob/three.js

[10] 

SceneJS 공식 사이트, http://scenejs.org/

[11] 

SceneJS 사이트, https://github.com/xeolabs/scenejs

[12] 

PhiloGL 사이트, http://www.senchalabs.org/philogl/

[13] 

BabylonJS 사이트, http://www.babylonjs.com/

[14] 

BabylonJS 사이트, https://github.com/BabylonJS/Babylon.js/

[15] 

WebCL 사이트, https://www.khronos.org/webcl/

[16] 

T.Aarnio and M. Bourges-Sevenier, “WebCL 1.0 specification,” Khronos WebCL Working Group, 2014.

[17] 

https://github.com/amd/Chromium-WebCL/

[18] 

https://github.com/crosswalk-project/

[19] 

https://github.com/toaarnio/webcl-firefox/

[20] 

https://github.com/IntelLabs/RiverTrail/

[21] 

https://github.com/highweb-project/

[22] 

https://crosswalk-project.org/documentation/tutorials/webcl. html

[23] 

Stream Computing, “Google blocked OpenCL on Nexus with Android 4.3,” 2013. 8. 1, https://streamcomputing.eu/ blog/2013-08-01/google-blocked-opencl-on-android-4-3/

[24] 

A. Technica, “Google Goes with Vulkan as Android's Low-Overhead Graphics API,” 2015. 8. 11, http:// ar-stechnica.com/gadgets/2015/08/android-to-support-vulkan-graphics-api-the-open-answer-to-metal-and-dx12

[25] 

F. Khan et al., “Using Javascript and WebCL for Numerical Computations: A Comparative Study of Native and Web Technologies,” ACM SIGPLAN Notices, vol. 50, no. 2. ACM, Feb. 2014, pp. 91-102.

[26] 

Khronos Group, “Vulkan™ Overview,” Feb. 2016 (https:// www.khronos.org/assets/uploads/developers/library/overview/vulkan-overview.pdf)

[27] 

T.Hector, “Vulkan: Explicit operation and consistent frame times,” Imagination Blog, Dec. 7, 2015. http://blog.imgtec. com/powervr/vulkan-explicit-operation-and-consistent-frame-times/

[28] 

T.Hector, “Vulkan: One API for all platforms,” Imagination Blog, Oct. 19, 2015. http://blog.imgtec.com/powervr/vulkan- one-api-for-all-platforms/

[29] 

T. Hector, “Vulkan: High Efficiency on Mobile,” Imagination Blog, nov. 5, 2015, http://blog.imgtec.com/ powervr/vulkan-high-efficiency-on-mobile

[30] 

The Chromium Projects, https://chromium.googlesource. com/chromium/src.git/+/master/gpu/vulkan/

(그림 1)

웹 플랫폼과 네이티브 플랫폼 비교

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f001.jpg
(그림 2)

CPU와 GPU 구조 비교

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f002.jpg
(그림 3)

그래픽 및 컴퓨팅 가속을 위한 표준

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f003.jpg

<출처>: https://www.khronos.org/assets/uploads/developers/ library/overview/vulkan-overview.pdf

(그림 4)

WebGL/CL을 통한 웹 가속 개념

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f004.jpg
(그림 5)

ThreeJS를 활용하는 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f005.jpg

<출처>: ThreeJS 홈페이지

(그림 6)

SceneJS를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f006.jpg

<출처>: SceneJS 홈페이지

(그림 7)

PhiloGL를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f007.jpg

<출처>: PhiloGL 홈페이지

(그림 8)

BabylonJS를 활용한 예제 실행화면

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f008.jpg

<출처>: BabylonJS 홈페이지

(그림 9)

WebCL API의 구조도

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f009.jpg
(그림 10)

차세대 GPU API의 경쟁구도[26]

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f010.jpg
(그림 11)

Vulkan과 OpenGL의 차이점[26]

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_f011.jpg
<표 1>

NVidia 그래픽 칩의 코어수 변화

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t001.jpg
<표 2>

ThreeJS API 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t002.jpg
<표 3>

SceneJS 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t003.jpg
<표 4>

PhiloGL 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t004.jpg
<표 5>

BaylonJS 주요 기능

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t005.jpg
<표 6>

공개 프로젝트별 WebCL 구현현황

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t006.jpg
<표 7>

OpenCL 지원 모바일단말 현황

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t007.jpg
<표 8>

WebCL 응용 성능 시험결과

images_1/2016/v31n4/ETRI_J003_2016_v31n4_65_t008.jpg
Sign Up