Three.js / WebGL 数据可视化

Question

数据可视化的表达方式有2D和3D形式两种效果,基于Web实现数据可视化，有多种技术可以满足，比如SVG、Canvas、WebGL，一般来说基于SVG和Cnavas技术可实现数据2D可视化显示，基于WebGL技术可视化可以实现2D方式的可视化效果，也实现三维的可视化效果。

比如中国每个省份的 GDP 数据，可以先绘制一个中国轮廓，然后每个省份放一个高亮立柱，用立柱高度表示GDP大小，基于WebGL技术实现数据可视化相比较SVG和canvas性能更好，所以本文主要讲解基于WebGL技术实现数据可视化，基于WebGL技术实现可视化，为了开发更方便，可以不直接通过原生WebGL实现，可以使用基于 WebGL 封装得到的三维引擎，比如国内最常见的 WebGL引擎 Three.js。

技术选择问题

关于数据可视化的技术SVG、Canvas和WebGL选择问题，要根据项目的情况而定，一般来说如果普通数据可视化项目可以选择SVG和Canvas技术，就学习难度而言，毕竟相比WebGL，这两种方式要简单的多，如果你希望数据可视化的性能更高，如果你希望对三维场景进行数据可视化，这时候可以考虑选择WebGL技术，至于选择WebGL哪种引擎，可以根据个人项目特定或个人熟悉哪一款WebGL引擎来选择，接下的内容主要是谈一谈 Three.js 在数据可视化中的应用。

• 性能：WebGL > Canvas > SVG
• 学习时间：WebGL < Canvas < SVG
• 可视化表达能力：WebGL > Canvas > SVG