一：前言
数据可视化是一个跨领域的行业，其中包含了图形学、数学、视觉传达等专业领域。
下图罗列出了一个简单的学习方向。
二：可视化方案以及学习路线
目前采用的是比较成熟，社区活跃度更高的Three.js，它是一个开源的webGL的api封装库。
该框架的特点是：
- 简单易用
- 入门成本低
- 社区活跃度高
- 速度更快
学习应用ThreeJs之前我们需要了解的基础知识点：
- 图形学基础：了解图形的输入、模型(图形对象)的构造和表示。
- 3D渲染引擎：了解3D引擎是什么，有哪些功能，有哪些类型。
- 渲染原理：3D渲染场景中包含哪些元素(灯光、地板、天空等)。
- ThreeJs简介：了解openGL，webGL，Threejs之间的关系。
- HTML5图形化其它技术：了解canvas、css2D、css3D、HTML2canvas。
- ThreeJs学习注意事项：根据Threejs官网案例和文档学习Threejs。
三：图形学基础
图形学是一门研究图形输入，构成，图形数据展示，图形数据传输，图形数据管理，数据分析，图形人机交互的一门学科。图形学在我们的3D数据可视化中涉及到了各个方面，包括建模，渲染，以及交互动画等等。主要了解的是3D模型的构成。
立体几何的发展历程：在我们计算机的发展中，图形的表示从一个屏幕坐标开始——>两个坐标组成线段——>多个平面坐标组成一条曲线——>多条线组成的面——>多个空间面组成体。
对于图形的表示方法：
- 基于线框的表示方法：单纯用边线来表示模型。如果模型太复杂可能会导致画面错乱不堪。
- 基于表面的表示方法：基于面的表示方法分为两种，一种是连续曲面一种是离散曲面，连续曲面感兴趣可以自行了解，数据可视化应用的是离散曲面。当前游戏建模和webgl模型中普遍使用的是三角网格来表示的表面，三角网格采用一系列分段线性的三角形来表达类曲面，因而它并非是真正意义上的曲面，而是类曲面。三角面的多少则决定了该曲面的光滑程度。
- 基于实体的表示方法：这种方法能够完整地、无歧义地表达三维形体，有兴趣可以自行了解。
四：渲染引擎
渲染引擎也是基于图形学实现的。他的主要功能是：渲染场景数据存储、渲染器、交互能力。
市场上的渲染引擎很多但是大致分为实时渲染和离线渲染两种，
- 实时渲染：使用的最多的是3D游戏，3D地图，BIM数据可视化，实时渲染表现在于可以满足人机交互的需求，它的渲染效果相较于离线渲染来说要差很多，原理与电影是一样的，其实就超快速渲染，每秒钟渲染达到24张以上从而让人感觉不出来渲染过程。
- 离线渲染：使用的最多的场景是3D产品设计效果图的渲染。这是一个将3D场景转换为2D图片的过程。它的技术发展程度，要远高于实时渲染引擎。市面上使用比较广的像vray，keyshot，blender渲染出来的场景已经完全可以做到跟照片质量相当的程度了。感兴趣可以自行了解。
渲染器是3D引擎的核心部分，它完成将3D物体绘制到屏幕上的任务。渲染器分为硬件渲染器和软件渲染器。
- 硬件渲染器：硬件渲染器通常基于底层图形API(应用程序接口)构建，常用的图形API包括DirectX和OpenGL。webGL就是对openGL 2.0的API进行了封装。而我们的Threejs是封装的webGL。更侧重于实时渲染引擎。
- 软件渲染器：软件渲染器则纯粹利用CPU的能力进行计算，通常采用光线追踪的方法进行渲染。软件渲染器没有统一的应用程序标准，但是有很多通用的渲染算法，如光子映射，蒙特卡洛，辐射度等等。更侧重于实时渲染引擎。
五：渲染原理
简单来说，三维渲染是使用计算机从数字三维场景中生成二维影像的过程。
为了生成影像，我们需要了解构造三维影像的过程。
三维影像不管是真实三维场景，还是虚拟三维场景，都处在一个场景中。场景中包含哪些东西呢？
光：平行光(太阳光)，环境光(氛围光)，点光(灯光，反射光等场景中某个点发出的光)。
三维模型：我们使用建模工具构建的模型主体。
贴图：建模之后的三维模型是没有任何颜色的，我们一般会给它添加一个基础材质和颜色。但是像纹理(磨砂，划痕)，彩色，环境反光等我们会用贴图的方式去表现。实时渲染无法像离线渲染一样使用大量的计算来模拟真实环境的光照效果(反射，折射，漫射等)，大部分的渲染质量呈现都依赖于贴图。这里不展开阐述，感兴趣可以搜索不同的贴图通道来学习如何实现凹凸纹理，反射等效果。贴图的目的在于更好的表现材质(金属，玻璃，石头，木材，布料等等)。
相机：相机就是我们当前的视角。相机拍摄的范围就是我们能看到的范围(所见即所得)。
六：ThreeJs简介
Three.js 是 JavaScript 编写的 WebGL 第三方库，通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。
WebGL 就是基于 OpenGL 设计的面向 web 的 3D 图形标准，它提供了一系列 JavaScript API，通过这些 API 进行图形渲染，系统硬件会加速 3D 渲染，从而获得较高性能。
OpenGL 它是最常用的跨平台图形处理开源库。
我们为啥不直接使用webGL进行开发呢，因为WebGL 门槛相对较高，计算机图形学需要相对较多的数学知识。而Three.js 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失 WebGL 的灵活性。
使用threejs在屏幕上呈现一个3D场景步骤大致如下：
- 创建一个三维空间，Three.js 称之为场景（ Scene ）
- 确定一个观察点，并设置观察的方向和角度，Three.js 称之为相机（ Camera ）
- 在场景中添加供观察的物体，Three.js 中有很多种物体，如 Mesh、Group、Line 等，他们都继承自 Object3D 类。
- 最后我们需要把所有的东西渲染到屏幕上，这就是 Three.js 中的 Renderer 的作用。
Threejs常用对象介绍：
Scene场景：场景它是放置物体、灯光和摄像机的地方。它就是我们的三维空间。
Camera相机：它是一个摄像机的抽象类，它的实例化对象是PerspectiveCamera（透视摄像机）或者 OrthographicCamera（正交摄像机）。
Mesh网格：继承至Object3D基于三角形的网格对象我们可以在建模软件中创建三维模型进行导入，也能在threejs中进行创建。
Sprite精灵：精灵对象也是继承至Object3D，一个总是面朝着摄像机的平面。(常用于做广告牌)
更多、更详细内容请查看threejs官网，以及Threejs源码。
七：HTML5图形化其它技术
主要为canvas、css2D、css3D、HTML2canvas，在做一些交互时可能会需要用到dom节点的交互等可能会用到这些技术。以及创建新的贴图等等。这部分请自行学习。
八：Threejs学习注意事项
threejs官方有很多案例，还有中文文档以供学习，但是文档并不是特别详细。所以我们还需要下载threejs的源代码，请结合源码和文档进行学习。
Threejs的应用目前并不算特别广，有一些问题可能需要在外网查找。
