[기본 정보]
| 데이터 간격 | x축 | y축 | 총 갯수 |
| 5km | 149개 | 253개 | 37,697개 |
| 1km | 745개 | 1265개 | 942,425개 |
[소요 시간]
| 2d | webGL | |
| 5km | 0.30s | 1.21s |
| 1km | 2.83s | 3.07s |
더 적은 데이터의 양을 가진 경우 webGL이 훨씬 속도가 느림
이유는?
Canvas 2D와 webGL 렌더링 방식과 성능 특성이 다름
1. 초기화 오버헤드
webGL은 초기화, 설정에 상대적으로 많은 오버헤드가 있을 수 있음. 작은 데이터 세트일 때 더욱 두드러짐.
큰 데이터 세트에서 이 오버헤드(초기 설정, 메모리 할당과 같은 작업)가 전체 렌더링 시간에 미치는 영향이 상대적으로 작음
2. 배치 렌더링
webGL의 경우 그래픽 카드의 파이프라인을 최대한 활용하기위해 데이터를 배치로 묶어 처리함.
작은 데이터 세트에서는 이 배치 처리의 이점이 크게 나타나지 않을 수 있음
배치 처리 ? 한 번에 여러 작업을 묶어서 순차적으로 처리하는 방식. 여러 작업을 한 번에 그래픽 카드로 전송하면 각각의 작업을 개별적으로 전송하는 것보다 훨씬 효율적일 수 있음.
3. 상태 변경
webGL의 경우 상태 변경이 오버헤드를 발생시킬 수 있음.
다른 텍스처나 셰이더로 전환할 때마다 오버헤드가 발생함. 3만 개의 격자 렌더링 할 때 이런 상태 변경이 더 자주 발생할 경우 성능 저하가 발생할 수 있음
4. API의 복잡성
2D API의 경우 단순하고 직관적이지만 webGL의 경우 3D 그래픽스를 위한 복잡한 API로 동일 작업 수행 시 더 많은 코드나 설정이 필요해 시간이 더 소요될 수 있음
5. 드라이버 및 하드웨어 최적화
그래픽 카드와 드라이버는 일반적으로 복잡한 3D 그래픽스 작업에 최적화되어 있음. 따라서 간단한 2D 작업에서는 canvas 2D가 더 효율적일 수 있음