前端可视化入门与实战 #

1.开篇：可视化学习脉络 #

关键名词:

• HTML + CSS

  • transform 的 preserve-3d
  • 现成的基于 CSS 实现的图表库，比如 Charts.css
  • 缺点
    • 对于复杂图表绘制性能并不高，因为 DOM 会存在回流重绘的问题；没有标准的图形 API
    • 维护成本高

• SVG

  • D3.js
  • 缺点
    • 它的渲染过程跟 DOM 一样也要渲染树的生成、布局合成、绘制，这也就意味着大批量的图形对于 SVG 来说很容易造成卡顿
  • 应用
    • 矢量动画效果
    • 部分定制化高的图表可以用d3

• Canvas

  • Canvas 可以通过 JavaScript 来操作，使开发者可以在网页上实时绘制和渲染图形
  • 大批量的图形绘制我们更推荐用 Canvas，图形数量少的时候我们可以用 SVG
  • ECharts
    • 调库非常容易,常见的案例
    • 涉及产品的特殊或者复杂的交互就会存在无法实现的问题
  • H5 游戏应用上我们绝对会采用 Canvas 做游戏方面的开发，而不是 SVG，主要原因在于性能和游戏引擎的支持，比如 Phaser、Pixi.js、CreateJS、Cocos2d-js 等

• WebGL

  • webgl的api本质Shader

    • Shader 着色器通常由两个主要部分组成：顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。

  • 学习用 JavaScript 调用 WebGL 的 API 来操控 GLSL 着色器语言，并最终控制 GPU 渲染。在这个过程中我们将学习底层知识，比如理论基础、向量、矩阵、纹理、索引、buffer、光照模型、建模等

  • Three.js ,babylon 构建在 WebGL 技术之上的高级抽象层，使得使用 WebGL 更加简单和方便

  • Three却在内部慢慢支持 WebGPU 渲染，WebGL 转变为 WebGPU 这是为什么呢？因为 WebGL 在时代的发展中以后会慢慢被淘汰

  • 设计理念与现代 GPU 的工作原理并不完全匹配, 每一行 WebGL 代码都有 90% 的机会不会由 OpenGL 进行绘制。在 Windows 上使用 DirectX 进行绘制，在 Mac 上使用 Metal 进行绘制。所以，WebGPU 诞生了

• WebGPU

  • 提供一个跨平台、高性能的图形和计算编程接口，使开发者能够更好地利用 GPU 的计算能力

2.理论篇：一文聊懂可视化 #

可视化的理论基础。

• 可视化的定义：我们可以简单理解为对数据的图形呈现的表示方法。
• 可视化分类：我们可以通过维度、数据结构、静态或动态等区分。
• Web 端的技术实现及使用场景的选择：简单场景我们用 CSS，大量图形绘制或游戏场景我们用 Canvas，少量图形的图表绘制用 SVG，3 维场景用 Three.js。
• 浏览器的图形渲染过程：简单理解为资源的解析加载后，组装成渲染树，然后交给浏览器渲染引擎做对应的布局、绘制。
• 三维可视化介绍：我们知道了三维坐标系统用来描述物体的位置信息，视角也就是相机来控制观察角度、渲染我们需要考虑光照、材质、阴影、透视等以及动画。
• 建模：我们了解了三维软件的形体的由点线面组成以及原因。
• 网格细分：网格细分可以让我们在基础几何体做二次开发，由一个立方体做细分并对其编辑我们可以生成世界上任意一个物体。