一：前言

数据可视化是一个跨领域的行业，其中包含了图形学、数学、视觉传达等专业领域。

下图罗列出了一个简单的学习方向。

二：可视化方案以及学习路线

目前采用的是比较成熟，社区活跃度更高的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的能力进行计算，通常采用光线追踪的方法进行渲染。软件渲染器没有统一的应用程序标准，但是有很多通用的渲染算法，如光子映射，蒙特卡洛，辐射度等等。更侧重于实时渲染引擎。

五：渲染原理

简单来说，三维渲染是使用计算机从数字三维场景中生成二维影像的过程。

为了生成影像，我们需要了解构造三维影像的过程。

三维影像不管是真实三维场景，还是虚拟三维场景，都处在一个场景中。场景中包含哪些东西呢？

光：平行光(太阳光)，环境光(氛围光)，点光(灯光，反射光等场景中某个点发出的光)。

三维模型：我们使用建模工具构建的模型主体。

贴图：建模之后的三维模型是没有任何颜色的，我们一般会给它添加一个基础材质和颜色。但是像纹理(磨砂，划痕)，彩色，环境反光等我们会用贴图的方式去表现。实时渲染无法像离线渲染一样使用大量的计算来模拟真实环境的光照效果(反射，折射，漫射等)，大部分的渲染质量呈现都依赖于贴图。这里不展开阐述，感兴趣可以搜索不同的贴图通道来学习如何实现凹凸纹理，反射等效果。贴图的目的在于更好的表现材质(金属，玻璃，石头，木材，布料等等)。

相机：相机就是我们当前的视角。相机拍摄的范围就是我们能看到的范围(所见即所得)。