实现可视化的方式
在web上、图形通常是通过浏览器来绘制的，浏览器是一个复杂的系统，负责绘制图形的部分是渲染引擎。
一、绘图系统
- 绘图系统分为：声明式绘图系统(html+css、svg)、和指令式的绘图系统(canvas 2D、webgl)
- 声明式绘图系统：根据数据创建各种不同的图形元素(或者css规则)，利用浏览器渲染引擎解析并渲染出来
- 指令式绘图系统：由浏览器提供的可以直接用代码在一块“画布”上绘制图形的api，通过调用绘图指令使引擎直接在页面上绘制图形
二、渲染引擎绘制图形的四种方式
- 传统的html+css(浏览器渲染引擎中的一部分)，呈现普通web网页
- 缺点：绘制方式不简洁、数据与图形的对应关系不明显、重新绘制性能开销大
- svg的使用，绘制矢量图形，不规则图形(引擎解析同html+css一样)，适用于元素少的可视化场景
- 缺点：一个svg元素只能表示一种基本图形，大量的svg元素会占用内存空间、增加引擎，布局就算，dom生成的开销，降低性能，减慢渲染速度
- canvas2D的使用，属于canvas api中的其中一种上下文，适合绘制基础的几何图形
- 缺点：难以控制canvas绘图的局部，因为canvas绘图通过的是一系列的指令执行过程，没有区分局部内容，难以操作单个局部内容
- webgl的使用，属于canvas api中的另一种上下文，通过GPU渲染各种复杂的2D和3D图形，利用GPU并行处理的特性，在处理大量数据时性能最优
- 缺点：api相对更加底层，绘制相对复杂
三、有必要使用webgl直接操作GPU实现绘图的场景
- 需绘制的图形数量非常多，多达数万个，而且它们的位置和方向都在不停的变化
- 需要对较大图像的细节做像素处理，像实现物体的光影，流体效果和一些复杂的像素滤镜。这些都是需要精准到处理全局或局部的所有像素点，要计算的像素点数量非常多，多达数十万甚至上百万
- 绘制3D物体，webgl内置对3D物体的投影，深度检测等特性，不需要我们对坐标做底层处理
注意：四种绘制图形的方式并不是非此即彼的使用关系，更多的时候可以共同使用。
eg：可使用svg生成某些图形，用canvas来渲染，svg绘制复杂图形起来更加便利，canvas渲染的性能更高。
四、实现可视化技术方案选择
