JavaScript 차트인 FlexChart에서는 SVG를 기본 렌더링 대상으로 사용합니다. SVG는 다수의 응용 프로그램에 맞는 탁월한 선택이며 다음과 같은 많은 이점이 있습니다.

• CSS로 사용자 정의할 수 있는 고품질의 세련된 벡터 2D 그래픽을 제공합니다.
• 브라우저를 포함한 탁월한 소프트웨어 지원이 포함된 범용적인 이식 가능한 서식을 제공합니다.
• 최신 브라우저에서 상당히 빠르게 작동합니다.

SVG는 확실히 다수의 응용 프로그램에서 빠르게 작동합니다. 몇 년 전에 브라우저의 SVG 성능으로 인해 놀란 적이 있지만, 빅 데이터에서는 여전히 충분한 속도를 내지 못하고 있습니다. 예를 들어 분산 차트를 살펴보면 각 요소는 SVG(실제로는 DOM)의 요소로서, 구문 분석, 할당, 시각적 트리에 추가, 렌더링이 필요합니다. 요소가 수백 개이면 문제가 되지 않지만, 10만 개 이상일 경우 브라우저에 부담이 되기 시작합니다.

우리는 빅 데이터의 세계에 살고 있으므로 최대한 많은 데이터를 표시하고 싶을 때가 많습니다. 막대한 양의 데이터 집합이 포함된 분산 차트는 여러 변수 간의 상관관계를 시각화하고 분석하는 데 사용할 수 있습니다. 제가 가장 좋아하는 것 중 하나는 별의 광도를 표시한 다이어그램입니다.

우리에게는 SVG보다 더 빠른 무언가가 필요합니다. 웹에 사용할 수 있는 다른 그리기 API로 Canvas와 WebGL이 있습니다. 먼저 Canvas에 대해 속성으로 성능 테스트를 했지만, 그 결과가 전혀 인상적이지 못해 WebGL을 사용해 보기로 결정했습니다.

WebGL 렌더링 사용하기

WebGL은 브라우저에서 무언가를 빠르게 그릴 때 탁월한 성능을 발휘합니다. 주요 특성은 다음과 같습니다.

• 현재로서 속도가 가장 빠른 웹용 2D 및 3D 그래픽입니다. WebGL은 하위 수준의 하드웨어 가속 API로서, 다른 그리기 API에 비해 GPU를 더 효율적으로 사용합니다.
• 모든 주요 브라우저에서 WebGL을 지원하며, IE11도 '실험적'이긴 하지만 실행 가능한 WebGL이 있습니다.

이처럼 유망해 보이는 WebGL도 다음과 같은 몇 가지 결점이 있습니다.

• 기본적인 그리기 요소만 제공합니다(대부분 삼각형). 텍스트 출력은 전혀 없습니다.
• 출력은 인쇄하거나 벡터 서식으로 내보낼 경우 잘 확장되지 않는 비트맵입니다.
• 개발하고 디버깅하기가 더 까다롭습니다(특히 SVG에 비해). 셰이더, 변환과 같은 GPU 프로그래밍에 관한 일부 지식이 필요합니다.

거의 모든 그림에는 범례, 레이블, 제목 등 텍스트 요소가 있기 때문에 첫 번째 결점은 가장 심각한 것입니다.

JavaScript 응용 프로그램에서 하이브리드 렌더링을 사용하는 방법

다행히도 다음과 같은 방법으로 SVG와 WebGL 그리기 기법을 쉽게 결합할 수 있습니다.

• 축, 범례, 레이블과 같은 기본적인 차트 요소에 사용되는 SVG를 사용합니다.
• 대량의 데이터 요소(예: 분산 차트의 요소)를 표시하는 데 WebGL 을 사용합니다.

이 접근 방식을 통해 두 가지 그리기 API 모두에서 최상의 기능을 끌어낼 수 있습니다. 최신 릴리스에서는 FlexChart WebGLRenderEngine을 위한 새로운 고성능 렌더링 엔진을 도입하였습니다(wijmo.chart.webgl module). 이 새 엔진은 앞서 설명한 '하이브리드' SVG+WebGL 그리기를 구현합니다. 새 엔진을 활성화하려면 다음과 같이 FlexChart의 renderEngine 속성을 설정해야 합니다.

flexChart.renderEngine = new wijmo.chart.webgl.WebGLRenderEngine();

대규모 데이터 집합이 포함된 분산 차트에 대한 성능은 SVG보다 일반적으로 10-20배 더 빨라 상당히 좋은 결과를 보입니다. 이와 동시에 새로운 렌더링 엔진은 기존 코드 및 CSS 스타일 지정과 호환되어야 합니다.

데이터 집합의 양이 막대한 경우에만 WebGL 렌더링이 유용한 것은 아닙니다. 다수의 요소가 포함된 방대한 웹 페이지나 다중 또는 동적 차트가 포함된 응용 프로그램에도 WebGL 렌더링이 쓰일 수 있습니다.

• JavaScript WebGL 차트 데모
• Angular WebGL 차트 데모
• React WebGL 차트 데모
• Vue WebGL 차트 데모