共计 2462 个字符，预计需要花费 7 分钟才能阅读完成。
浅谈图形学、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。