浅谈图形学、WebGL 以及 Three.js
主題
- 图形学： 基本概念/顶点着色器/片元着色器/图形是如何绘制到电脑萤幕上的
- WebGL： 基本概念/Canvas
- Three.js： 相干API/通过 Three.js 来实作
—————————————————————————————————————————————
展现：https://threejs.org/examples/
- 图形学
基本概念：图形学（Computer Graphics， CG）是钻研计算机在硬件和软件的帮忙下创立计算机图形的计算机科学学科，次要关注数字合成与操作视觉的图形内容。
它蕴含三维图形/二维图形以及影响解决。当然，明天次要关注的是3D/2D图形处理的局部。
计算机图形学的次要钻研内容就是钻研如何在计算机中示意图形；以及利用计算机进行图形的计算、解决和显示的相干原理与算法。
什么是图形：图形通常由由点、线、面、体等几何元素，以及灰度、色调、线型、线宽等非几何属性组成。
次要目标：利用电脑产生令人赏心悦目的真实感图形。因而，为了创立更合乎真实世界的场景，必须先创立该场景的几何示意、再利用某种光照模型，以计算在假想的光源、纹理、材质属性下的光照明成果。
3D电脑图形：电脑里贮存几何数据的三维示意。有三个维度。因而贮存的顶点信息必须有三个维度的信息。
图形是如何绘制到电脑萤幕的：三个阶段：建模、场景布局和动画、绘制
1️ 建模：确定前面场景所要应用的对象的形态。大多数状况下，还包含编辑物体外表或资料性质（例如，色彩、荧光度、漫射、镜面反射等等）
2️场景布局：模型在渲染之前，必须避免在一个场景中。于是咱们才能够定义模型的地位和大小。
场景设置波及安顿一个场景内的虚构物体、灯光、摄影机和其余实体。这样便能够制作动态画面、或一段动画。
照明十分重要。光照的强度、方向对一个场景的气氛和情绪有重要影响。
3️渲染：渲染这一步骤令刚刚建设好的场景和模型得以显示在荧幕背后。渲染过程须要十分低廉的计算，特地是模仿的物理过程简单且多样时。（例如尘埃粒子的显示）
着色器
着色器是一种电脑程序。其在电脑图形的渲染上有很大的作用。
顶点着色器：解决每个顶点，把顶点的地位投射在荧幕上，即计算顶点的二维坐标。同时，其也负责顶点的深度缓冲（Z-Buffer，用来确定哪个顶点在前，哪个在后，以确定哪个外表在前，哪个在后，来使渲染图形时可能正确确定）的计算。
片元着色器：计算每个片元（片段，最小色彩单位，个别是像素）的色彩和其余属性（光照、材质、凹凸成果）。
2. WebGL (Web Graphics Library)
是3D图形库，一种 JavaScript API。通过声援WebGL，浏览器能够在不应用其余插件的状况下显示2D、3D图形。WebGL曾经是浏览器的规范。
Canvas： 画布 是HTML5的一种标签。JavaScript能够利用该标签进行绘图后的显示。
WebGL API
WebGL根本绘图元素只有点、线、三角形，如下图中的这种简单图形，它也是由三角形形成的
WebGL 绘制流程
1️ 获取顶点坐标
简略图形的顶点坐标能够通过本人写或者库（如three.js）提供的api来取得，
然而简单图形的顶点坐标数目宏大，个别是通过三维软件导出的（如3dmax等软件导出的obj文件）
因为顶点数据往往成千上万，在获取到顶点坐标后，咱们通常会将它存储在显存，即缓存区内，不便GPU更快读取。
2️ 图元拆卸
图元拆卸就是由顶点生成一个个图元（即三角形）。
顶点着色器--它由opengl es编写，由javascript以字符串的模式定义并传递给GPU生成。
如下是一段顶点着色器代码：
attribute vec4 position;
void main() {
gl_Position = position;
}
attribute修饰符用于申明由浏览器（javascript）传输给顶点着色器的变量值；
position即咱们定义的顶点坐标；
gl_Position是一个内建的传出变量。
这段代码什么也没做，如果是绘制2d图形，没有什么问题，但如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，咱们则须要将三维坐标转换成屏幕坐标。
比方：v(-0.5, 0.0, 1.0)转换为p(0.2, -0.4)，这个过程相似咱们用相机拍照。
顶点着色器解决流程
如上图，顶点着色器会先将坐标转换结束，而后由GPU进行图元拆卸，有多少顶点，这段顶点着色器程序就运行了多少次。
这时候顶点着色器变为：
attribute vec4 position;
uniform mat4 matrix;
void main() {
gl_Position = position * matrix;
}
这就是利用了矩阵matrix，将三维世界坐标转换成屏幕坐标，这个矩阵叫投影矩阵，由javascript传入。
3️ 光栅化
在图元生成结束之后，咱们须要给模型“上色”，而实现这部分工作的，则是运行在GPU中的“片元着色器”来实现。
它同样是一段opengl es程序，模型看起来是什么质地（色彩、漫反射贴图等）、灯光等由片元着色器来计算。
如下是一段简略的片元着色器代码：
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
gl_FragColor即输入的色彩值。
片元着色器解决流程
片元着色器生成多少片元（像素），运行多少次。
3. Three.js
Three.js是以WebGL为根底的库，封装了一些3D渲染需要中重要的工具办法与渲染循环。WebGL门槛绝对较高，Three.js对WebGL提供的接口进行了十分好的封装，简化了很多细节，大大降低了学习老本。
Three.js在WebGL根底上都为咱们做了什么？
辅助咱们导出了模型数据；
主动生成了各种矩阵；
生成了顶点着色器；
辅助咱们生成材质，配置灯光；
依据咱们设置的材质生成了片元着色器。
而且将WebGL基于光栅化的2D API，封装成了咱们人类能看懂的 3D API。