flow

1. [echarts.init]

   1. 차트 인스턴스 생성
   2. 내부 [ZRender] 초기화 후 반환
   3. [charts-gl] 확장
      • [echarts.registerPostInit()] 콜백
      • [LayerGL], [ZRTextureAtlasSurface] 생성
        • GL 전용 레이어, 텍스처 아틀라스
      • [OrbitControl] 셋업
        • 3D 카메라 컨트롤러

2. [echarts.setOption]

   1. [OptionManager.setOption]
      • 기본 옵션 및 매개변수 옵션 병합 후 [GlobalModel] 생성, 업데이트
      • 컴포넌트 [legend, axis, ...] 및 시리즈 모델 생성
   2. [CoordinateSystem]
      • [cartesian3D, globe] 옵션에 맞춰 3D 좌표계 초기화
   3. [View] 인스턴스 초기화
      • 모델에 대응되는 뷰 객체 생성
      • [view.init()], [groupGL, LabelsBuilder] 셋업

3. [echarts.render()] 내부 펑션

   1. [view.render()] 호출
      1. 이전 [mesh]와 교체
      2. 없는 경우 [Geometry], [graphicGL.mesh] 생성 및 추가
      3. [view._doRender()] 호출
         • [geometry.add()] 추가하고자 하는 도형 생성
         • [geometry.dirty()] GPU 업로드
      4. [_updateAnimation]
   2. [graphicGL] 렌더 호출
      • [coordSys.viewGL.add()] 화면 구성
      • [viewGL.render()]
   3. [ZRender] 렌더 호출
      • GL 레이어 이후 [canvas] 레이어 렌더링

---

1. 윈도우 리사이징

2. 캔버스 크기 조정

3. 카메라, 뷰포트 업데이트

4. 리렌더링

5. 앵글 궤도 변하는 경우

6. 오빗컨트롤 업데이트 후 다음 렌더 사이클에 반영

---

기능

• [Bar3DView.js] 내부 핸들러 추가

  • 메쉬에 이벤트 추가 등록

• 마우스 드래깅으로 영역 정한 후 내부의 시리즈 데이터 추출

  • [ZRender Rectangle Select], [graphicGL Ray-casting]
  • 시작 좌표, 모양 그린 후 영역 확정
  • 선택 영역 레이캐스팅
  • 드래그 영역 버텍스 검사 및 [geometry.getDataIndexOfVertex()]로 인덱스 수집

• 1단에 [Bar3D]로 렌더링 한 후 다음 시리즈를 해당 차트 위에 [Cone3D] 2단 렌더링

  • 시리즈에 순서대로 배열 정의
  • [viewGL.add()] 레이어 조절

• 도형 내 타입 색상 반반씩 표현

  • 컬러값 조절로 가능

• 우클릭 시 상세 데이터 표현

  • 시리즈 정보 자체는 이벤트로 얻어올 수 있음 [mesh.on('contextmenu')]

• 기본 상태 회전, 툴박스 영역

• 선택상태 드래깅 처리

  • [echarts toolbox] 커스텀
  • [OrbitControl grid3D viewControl] 커스텀
  • 드래그 이벤트 분기처리
  • 90도 로테이션 구현 필요

• 차트 이미지로 저장

  • 툴박스에서 제공

• 컨텍스트 메뉴 커스텀

  • CSS

• 샷 내부 텍스트 표시

  • 이차트 라벨 제공
  • 제공하는 위치가 아니라면 커스텀 필요, [graphic component overlay text]

---

성능

1. FPS
   • 최소 60FPS - 프레임당 16ms
   • CPU & GPU 합산 소요시간 16ms
2. Draw Call
   • 각 메쉬마다 CPU 오버되는지 체크
   • 드로우 콜 줄이는 기법 리서치 [instancing]
3. Vertex & Index Buffer 크기
   • 버텍스 셰이더 병목 체크
   • 스트라이드 체크
4. Memory
   • [WebGL Inspector] 메모리 할당량 체크
   • [re-upload] 체크
5. Frustum Culling
   • 시야 밖 모델 제거
   • [viewGL] 에서 제공
6. LOD
   • 가까이 있는 모델만 완전히 렌더링