ECharts-GL 3D 렌더링 파이프라인 분석

Oct 1, 2025 updated Oct 1, 2025 3d architecture expo javascript legacy

소개

이 문서는 ECharts-GL의 3D 렌더링 파이프라인을 분석하고, 특히 cone3D-simplex.html 예제를 통해 3D 차트가 어떻게 렌더링되는지 상세히 설명합니다. ECharts-GL은 ECharts의 확장 라이브러리로, WebGL을 기반으로 3D 시각화 기능을 제공합니다.

ECharts-GL 아키텍처 개요

ECharts-GL은 다음과 같은 주요 컴포넌트로 구성됩니다:

graph TD
    A[ECharts Core] --> B[ECharts-GL]
    B --> C[LayerGL]
    B --> D[Chart Components]
    B --> E[Coordinate Systems]
    C --> F[ClayGL]
    D --> G[Series Models]
    D --> H[Chart Views]
    D --> I[Layout]
    E --> J[Grid3D]
    E --> K[Globe]
    E --> L[Geo3D]
    F --> M[Renderer]
    F --> N[Scene]
    F --> O[Camera]
    F --> P[Geometry]
    F --> Q[Material]
    F --> R[Shader]

주요 컴포넌트 설명:

ECharts Core: 기본 차트 라이브러리로, 데이터 처리, 이벤트 처리, 렌더링 관리 등의 기능 제공
ECharts-GL: 3D 차트 기능을 확장하는 모듈
LayerGL: WebGL 렌더링을 위한 레이어 관리
Chart Components: 다양한 3D 차트 유형 구현 (cone3D, bar3D 등)
Coordinate Systems: 3D 좌표계 시스템 (Grid3D, Globe, Geo3D 등)
ClayGL: 저수준 WebGL 렌더링 라이브러리

렌더링 파이프라인

ECharts-GL의 전체 렌더링 파이프라인은 다음과 같습니다:

sequenceDiagram
    participant User
    participant ECharts
    participant EChartsGL
    participant Series
    participant View
    participant Layout
    participant Geometry
    participant ClayGL
    participant WebGL

    User->>ECharts: echarts.init(dom)
    User->>ECharts: setOption(options)
    ECharts->>EChartsGL: registerPostUpdate
    EChartsGL->>EChartsGL: update(ecModel, api)
    ECharts->>Series: createModel
    Series->>Series: getInitialData()
    ECharts->>Layout: performLayout
    Layout->>Series: setItemLayout
    ECharts->>View: render
    View->>Geometry: create/update
    View->>ClayGL: createMaterial
    View->>ClayGL: createMesh
    ClayGL->>WebGL: render
    WebGL->>User: display

파이프라인 단계 설명:

초기화: echarts.init(dom)으로 ECharts 인스턴스 생성
옵션 설정: setOption(options)으로 차트 구성 옵션 설정
모델 생성: 시리즈 모델(Series Model) 생성 및 데이터 초기화
레이아웃 계산: 각 데이터 항목의 위치, 크기, 방향 등 계산
뷰 렌더링: 시리즈 뷰(Series View)에서 기하 데이터 생성 및 메시 생성
WebGL 렌더링: ClayGL을 통해 WebGL로 최종 렌더링

cone3D 차트 렌더링 과정

cone3D-simplex.html 예제의 렌더링 과정을 상세히 분석합니다:

flowchart TD
    A[echarts.init] --> B[setOption]
    B --> C[cone3D 시리즈 모델 생성]
    C --> D[데이터 처리]
    D --> E[좌표계 설정]
    E --> F[레이아웃 계산]
    F --> G[cone3D 뷰 생성]
    G --> H[ConesGeometry 생성]
    H --> I[Material 설정]
    I --> J[Mesh 생성]
    J --> K[Scene에 추가]
    K --> L[WebGL 렌더링]

상세 과정:

초기화 및 옵션 설정:

var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'cone3D',
        data: data,
        // 기타 옵션...
    }]
});

시리즈 모델 생성:
- Cone3DSeries 클래스가 echarts.SeriesModel을 확장하여 생성
- 데이터 초기화 및 기본 옵션 설정
레이아웃 계산:
- 좌표계 유형에 따라 적절한 레이아웃 함수 선택 (cartesian3D, globe, geo3D 등)
- 각 데이터 항목에 대해 위치, 방향, 크기 계산
- 계산된 레이아웃 정보를 데이터에 저장
뷰 생성 및 렌더링:
- Cone3DView 클래스가 echarts.ChartView를 확장하여 생성
- ConesGeometry 생성 및 설정
- 재질(Material) 및 메시(Mesh) 생성
- 라벨 및 이벤트 처리 설정
WebGL 렌더링:
- ClayGL을 통해 WebGL 렌더링 수행
- 그림자, 조명 등 효과 적용

내부 작동 메커니즘

1. ECharts-GL 초기화 과정

ECharts-GL은 ECharts의 확장으로, 다음과 같은 방식으로 초기화됩니다:

// EChartsGL 생성자
function EChartsGL(zr) {
    this._layers = {};
    this._zr = zr;
}

// ECharts에 후처리 훅 등록
echarts.registerPostUpdate(function (ecModel, api) {
    var zr = api.getZr();
    var egl = zr.__egl = zr.__egl || new EChartsGL(zr);
    egl.update(ecModel, api);
});

이 과정에서 중요한 점:

EChartsGL 인스턴스는 zrender(ECharts의 렌더링 엔진)에 연결됨
registerPostUpdate 훅을 통해 ECharts 업데이트 후 EChartsGL 업데이트가 실행됨

2. LayerGL 관리

LayerGL은 WebGL 렌더링을 위한 레이어를 관리합니다:

function getLayerGL(model) {
    // zlevel 결정
    var zlevel = model.get('zlevel');
    var layers = self._layers;
    var layerGL = layers[zlevel];

    // 레이어가 없으면 새로 생성
    if (!layerGL) {
        layerGL = layers[zlevel] = new LayerGL('gl-' + zlevel, zr);
        // zrender에 레이어 추가
        zr.painter.insertLayer(zlevel, layerGL);
    }

    return layerGL;
}

3. 시리즈 등록 및 처리

cone3D 차트는 다음과 같이 등록됩니다:

// install.js
export function install(registers) {
    registers.registerChartView(Cone3DView);
    registers.registerSeriesModel(Cone3DSeries);
    registerConeLayout(registers);

    // 데이터 처리기 등록
    registers.registerProcessor(function (ecModel, api) {
        ecModel.eachSeriesByType('cone3D', function (seriesModel) {
            var data = seriesModel.getData();
            data.filterSelf(function (idx) {
                return data.hasValue(idx);
            });
        });
    });
}

4. 데이터 흐름

데이터는 다음과 같은 흐름으로 처리됩니다:

원본 데이터 → 시리즈 모델 → 레이아웃 계산 → 뷰 렌더링 → WebGL 출력

flowchart LR
    A[원본 데이터] --> B[Cone3DSeries]
    B --> C[cone3DLayout]
    C --> D[Cone3DView]
    D --> E[ConesGeometry]
    E --> F[ClayGL Mesh]
    F --> G[WebGL 렌더링]

ClayGL과의 통합

ECharts-GL은 ClayGL을 사용하여 저수준 WebGL 렌더링을 수행합니다. 주요 통합 포인트는 다음과 같습니다:

1. 기하 데이터 생성

ConesGeometry는 ClayGL의 Geometry 클래스를 확장하여 원뿔 형태의 기하 데이터를 생성합니다:

var ConesGeometry = Geometry.extend(function () {
    return {
        attributes: {
            position: new Geometry.Attribute('position', 'float', 3, 'POSITION'),
            normal: new Geometry.Attribute('normal', 'float', 3, 'NORMAL'),
            color: new Geometry.Attribute('color', 'float', 4, 'COLOR'),
            // 기타 속성...
        },
        // 기타 설정...
    };
},
{
    // 메서드 구현...
    addBar: function (start, dir, leftDir, size, color, dataIndex) {
        // 원뿔 기하 데이터 생성 로직...
    }
});

2. 재질 및 셰이더 설정

ClayGL의 재질 및 셰이더 시스템을 활용하여 다양한 시각적 효과를 구현합니다:

// 재질 생성
coneMesh.material = graphicGL.createMaterial(shadingPrefix, ['VERTEX_COLOR']);

// 셰이더 설정
new graphicGL.Shader(
    graphicGL.Shader.source('ecgl.sm.depth.vertex'),
    graphicGL.Shader.source('ecgl.sm.depth.fragment')
)

3. 장면 구성

ClayGL의 Scene, Camera, Light 등을 활용하여 3D 장면을 구성합니다:

// viewGL에 그룹 추가
coordSys.viewGL.add(this.groupGL);

// SRGB 디코딩 설정
var methodName = coordSys.viewGL.isLinearSpace() ? 'define' : 'undefine';
this._coneMesh.material[methodName]('fragment', 'SRGB_DECODE');

결론

ECharts-GL의 3D 렌더링 파이프라인은 ECharts 코어, ECharts-GL, ClayGL의 세 가지 주요 레이어로 구성됩니다. cone3D 차트의 렌더링 과정을 통해 살펴본 바와 같이, 데이터는 시리즈 모델에서 처리되어 레이아웃 계산을 거친 후 뷰에서 기하 데이터로 변환되고, 최종적으로 ClayGL을 통해 WebGL로 렌더링됩니다.

이러한 구조는 높은 수준의 추상화를 제공하면서도 WebGL의 성능을 최대한 활용할 수 있게 해주며, 다양한 3D 차트 유형과 시각적 효과를 구현할 수 있는 유연성을 제공합니다.

목차

소개