WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js/WebGL数据可视化

数据可视化的表达方式有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

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com