从可视化到webgl ｜ 小册免费学

Name_Is_NaN
680 阅读8分钟

可视化与Web开发的区别

可视化是将数据组织成易于为人所理解 和认知的结构，然后用图形的方式形象地呈现出来的理论、方法和技术

首先是技术栈的不同。Web 开发主要以 HTML 来描述结构，以 CSS 来描述表现，以 JavaScript 来描述行为。而可视化则较少涉及 HTML 和 CSS，它更多地要同浏览器的 Canvas、SVG、WebGL 等其他图形 API 打交道。这是因为，Web 开发以呈现块状内容为 主，所以 HTML 是更合适的技术。而可视化开发因为需要呈现各种各样的形状、结构，所 以，形状更丰富的 SVG 以及更底层的 Canvas2D 和 WebGL 就是更合适的技术了。

其次，Web 开发着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多 媒体内容，而可视化开发则着重于处理结构化数据，渲染各种相对复杂的图表和图形元素。 两者针对的信息特征和对图形渲染的要求有所不同，所以，在细节处理上也有比较大的差异。

可视化要处理更多偏视觉方面的细节信息，尤其是在要呈现的数据细节比较丰富 的时候，可能要精确地呈现大小、距离、角度、高度、光线、阴影等等。这些细节的处理， 都需要我们对图形绘制有更加精确的控制。因此，我们需要较深入地掌握图形学理论知识， 了解并熟悉专业的图形库和绘图的工具。简而言之，就是 Web 开发的前端主要还是关注内 容和样式，图形的渲染和绘制是由浏览器底层来完成的，而可视化前端则可能要深入底层渲 染层，去真正地控制图形的绘制和细节的呈现。

可视化也存在很多好用的库

ECharts，或者类似的chartlist、  chart.js等等，它们都属于图表库。

比如，一座城市的交通线路和建筑物三维模型，或者一个园区 的立体建筑模型等等，我们可能要依赖专业的 GIS 地图库。社区中比较成熟的 GIS 库也不 少，比较常见的像  Mapbox、  Leaflet、  Deck.gl、  CesiumJS

如果需求更加复杂 就需要ThreesJS、 SpriteJS这样比较通用的渲染库(实际上图表 库或 GIS 地图库本身底层渲染也基于这些渲染库)。我们可以选择通用的图形库，比如， 2D 渲染可以选择 SpriteJS，3D 渲染可以选择 ThreeJS、BabylonJS 以及 SpriteJS3D 扩 展等等

另外还有 D3.js 它属于数据驱动框架 专注于处理数据的组织形式，而将数据呈现交

给更底层的图形系统(DOM、SVG、Canvas)或通用图形库(SpriteJS、ThreeJS)去完 成。

在浏览器中实现可视化渲染

1.HTML+ CSS ： 传统的

2.SVG ：优于Html

3.Canvas2D

4.WebGL ：性能最好的

1. HTML 与 CSS 是如何实现可视化的?

用 CSS 实现柱状图其实很简单，原理就是使用网格布局(Grid Layout)加上线性渐变 (Linear-gradient)

image-20210323184720169 
.piegraph {
  display: inline-block;
width: 250px;
height: 250px;
border-radius: 50%;
background-image: conic-gradient(#37c 30deg, #3c7 30deg, #3c7 65deg, orange 65deg,orange 110deg,#f73 110deg,#f73 200deg,#ccc 200deg)
}

2.用 HTML+CSS 实现可视化的缺点

HTML 和 CSS 主要还是为网页布局而创造的，使用它们虽然能绘制可视化图表，但 是绘制的方式并不简洁。这是因为，从 CSS 代码里，我们很难看出数据与图形的对应关 系，有很多换算也需要开发人员自己来做。这样一来，一旦图表或数据发生改动，就需要我 们重新计算，维护起来会很麻烦。

HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制 图形外，还要做很多额外的工作。比如说，浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML(或 SVG)绘图。当图形发生变化时，我们很可能要重新执行全部的工作，这样的 性能开销是非常大的。

传统的 Web 开发，因为涉及 UI 构建和内容组织，所以这些额外的解析和构建工作都 是必须做的。而可视化与传统网页不同，它不太需要复杂的布局，更多的工作是在绘图和数 据计算。所以，对于可视化来说，这些额外的工作反而相当于白白消耗了性能。

相比于 HTML 和 CSS，Canvas2D 和 WebGL 更适合去做可视化这一领域的绘图工 作。它们的绘图 API 能够直接操作绘图上下文，一般不涉及引擎的其他部分，在重绘图像 时，也不会发生重新解析文档和构建结构的过程，开销要小很多。

image-20210323185400409

SVG

SVG(Scalable Vector Graphics，可缩放矢量图)

而且，浏览器更强大的是，它还可以内嵌 SVG 标签，并且像操作普通的 HTML 元素一样，利用 DOM API 操作 SVG 元素。甚至， CSS 也可以作用于内嵌的 SVG 元素。

<svg xmlns="https://www.w3.org/2000/svg" width="120px" height="240px" viewBox=" 0 0 60 100"
<g transform="translate(0, 100) scale(1, -1)"> <g>
<rect x="1" y="0" width="10" height="25" fill="#37c"/>
<rect x="13" y="0" width="10" height="26" fill="#37c"/> 
<rect x="25" y="0" width="10" height="40" fill="#37c"/> 
<rect x="37" y="0" width="10" height="45" fill="#37c"/> 
<rect x="49" y="0" width="10" height="68" fill="#37c"/>
</g> 
<g>
<rect x="1" y="0" width="10" height="15" fill="#3c7"/> 
<rect x="13" y="0" width="10" height="11" fill="#3c7"/> 
<rect x="25" y="0" width="10" height="17" fill="#3c7"/>
<rect x="37" y="0" width="10" height="25" fill="#3c7"/> 
<rect x="49" y="0" width="10" height="37" fill="#3c7"/>
</g> 
</g>
</svg>

数据 total 和 current 分别对应 SVG 中 两个 g 元素下的 rect 元素的高度。也就是说，元素的属性和数值可以直接对应起来。

在上面这段 SVG 代码中，g 表示分组，rect 表示绘制一个矩形元素。除了 rect 外，SVG 还提供了丰富的图形元素，可以绘制矩形、圆弧、椭圆、多边形和贝塞尔曲线等等。

HTML 的不足之处在于 HTML 元素的形状一般是矩形，虽然用 CSS 辅助，也能够绘制出各 种其它形状的图形，甚至不规则图形，但是总体而言还是非常麻烦的。而 SVG 则弥补了这 方面的不足，让不规则图形的绘制变得更简单了。因此，用 SVG 绘图比用 HTML 和 CSS 要便利得多。

但是，SVG 图表也有缺点。在渲染引擎中，SVG 元素和 HTML 元素一样，在输出图形前 都需要经过引擎的解析、布局计算和渲染树生成。而且，一个 SVG 元素只表示一种基本图 形，如果展示的数据很复杂，生成图形的 SVG 元素就会很多。这样一来，大量的 SVG 元 素不仅会占用很多内存空间，还会增加引擎、布局计算和渲染树生成的开销，降低性能，减 慢渲染速度。这也就注定了 SVG 只适合应用于元素较少的简单可视化场景。

Canves2D

无论是使用 HTML/CSS 还是 SVG，它们都属于声明式绘图系统，也就是我们根据数据创建 各种不同的图形元素(或者 CSS 规则)，然后利用浏览器渲染引擎解析它们并渲染出来。 但是 Canvas2D 不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘 制图形的 API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然 后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。

但是，因为 HTML 和 SVG 一个元素对应一个基本图形，所以我们可以很方便地操作它 们，比如在柱状图的某个柱子上注册点击事件。而同样的功能在 Canvas 上就比较难实现 了，因为对于 Canvas 来说，绘制整个柱状图的过程就是一系列指令的执行过程，其中并没 有区分“A 柱子”、“B 柱子”，这让我们很难单独对 Canvas 绘图的局部进行控制。不过，这并不代表我们就不能控制 Canvas 的局部了。实际上，通过数学计算我们是可以通过 定位的方式来获取局部图形的

Canvas 和 SVG 的使用也不是非此即彼的，它们可以结合使用。 因为 SVG 作为一种图形格式，也可以作为 image 元素绘制到 Canvas 中。举个例子，我 们可以先使用 SVG 生成某些图形，然后用 Canvas 来渲染。这样，我们就既可以享受 SVG 的便利性，又可以享受 Canvas 的高性能了。

WebGL

WebGL 绘制比前三种方式要复杂一些，因为 WebGL 是基于 OpenGL ES 规范的浏览器实 现的，API 相对更底层，使用起来不如前三种那么简单直接。

一般情况下，Canvas2D 绘制图形的性能已经足够高了，但是在三种情况下我们有必要直 接操作更强大的 GPU 来实现绘图。

1.要绘制的图形数量非常多，比如有多达数万个几何图形需要绘制

2.对较大图像的细节做像素处理，比如，实现物体的光影、流体效果 和一些复杂的像素滤镜

3.绘制 3D 物体。因为 WebGL 内置了对 3D 物体的投影、深度检测等特性， 所以用它来渲染 3D 物体就不需要我们自己对坐标做底层的处理了。

各种可视化的比较和应用

image-20210323190954679

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情

avatar
文章
阅读
粉丝