WebGL学习笔记（基础知识篇）

 

WEBGL基础知识介绍

1、场景（scene）

场景如其名，即显示3D空间内物体的容器，就好比一个箱子是一个3D场景。

 

2、坐标系：

webgl使用笛卡尔坐标系（宽度、高度和深度），我们也可以指定使用其它坐标系统。

WEBGL与过去我所使用的flash3D坐标系有一些区别，在flash3d中，屏幕的左上角为坐标系原点，向下为Y轴正方向，向右为X轴正方向，而在webgl中，屏幕的中心点为原点。

但是在3D世界中还有第三个坐标轴即Z轴，它表示场景的深度。

在webgl的世界中我们可以使用左手法则来辅助记忆三个轴的正方向，伸出左手，食指伸直保持水平，中指垂直向下，拇指指向自己，其余手指收起，食指所指方向即x轴的正方向，中指所指方向即y轴正方向，拇指所指的方向即z轴的正方向。

 

3、投影的概念：

         我们在屏幕上所看到的三维空间，并非是一个真实的3D空间，而是用数学算法将模拟的三维空间投射到屏幕上的二维图像而已。投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。投影分为正交投影和透视投影，这也就是摄像机的实现原理。

 

4、摄像机：

         摄像机是场景内的一个观察者，人通过屏幕看到的画面实际上是3D空间内的物体映射到摄像机内的画面，这个画面很可能并不是完整的，仅仅是摄像机当前可见范围内的。这与摄像机的种类有关。

         在three.js中有两种，正交摄像机和透视摄像机。

正交摄像机的视野范围就像一个正方体，正方体内的物体沿着正方体的边缘投影到每个侧面的物体大小都与立方体内的物体大小相同，所以使用正交摄像机投影到屏幕的画面我们是无法分辨物体的远近的，这种摄像机多用于在3D空间绘制2D图形，如医用检查设备，我们不使用。

透视摄像机就如一个顶部被削平的金字塔，金字塔顶部被削平的面可以理解为我们的屏幕，在金字塔内的物体沿着金字塔纵方向进行投影，并投射到顶部，假设有两个大小形状完全相同的物体分别位于金子塔内的不同高度，他们投影到顶部的影子的大小就会不同，这就是透视相机的。使用透视摄像机我们可以在平面内很容易分辨出3D空间内物体的远近。现在把金字塔放倒，将削平的顶端对这你的眼睛，这样就很容易理解在透视相机时计算机是如何渲染物体的了。

 

5、渲染：

         渲染即执行代码在屏幕上绘制图形的过程。渲染是实时执行的，就如一个播放的电影，由许多连续的帧组成，帧就好比一场电影中的一个瞬时的画面。

 

6、点与向量

         点是由三个值组成，x、y和z，每个点可以表示3D空间的一个唯一位置，每个点也可表示一个向量，也叫做三维向量，向量可以理解为指向场景中心的一个线段，我们知道点有三个值，这样的向量叫做单位向量或标量，它仅仅表示向量的方向，不能表示向量的长度，现在我们给一个这个标量再增加一个值，第四个值表示向量的长度，这样我们就有了一个既有长度又有方向的向量了，这样的向量叫做四维向量。

 

7、面、顶点与三角形：

         我们知道要确定一个唯一的平面我们至少需要三个点，将三个点用线连起来就形成了一个三角平面，我们称这三个点为顶点，顶点就是图形突起的部。

 

8、网格模型：

3D空间内任何形状的物体都称之为模型，无论是立体模型还是平面模型都由至少三个顶点组成，将这些顶点用线连接起来就组成了模型。还需要知道在现在计算机图形学中，所有的模型，无论复杂程度，都是由多个三角形拼接而成的。我们常见的球体看起来很圆滑，其实是由很多个三角形绘制而成，由于密度很高肉眼很难察觉其边缘的顶点。

由于这些模型都是使用线条连接而成，看起来就像一张捕鱼的渔网被扭曲成各种形状，我们称这种没有材质的模型叫做网格模型（它看起来是镂空的）。

 

9、纹理贴图以及材质

         纹理就是一个平面化的图形，它可以是纯色填充的也可以是使用位图填充的。

         材质就是使用纹理构建的一种代码环境中的对象，我们将材质对象应用到模型网格上，使其更加逼真形象，达到预期设想的效果。

         更加容易理解的方式：纹理好比一颗大树，材质好比是用这颗大树打造的一块木板，我们可以将木板钉在一个立方体网格对象上，这样我们就有了一个木箱。

 

10、矩阵和模型变换

         如果向量是一个数组[x,y,z]，那么矩阵就是一个二维数组即，

 

					
|	x	x	x	x	|
|					|
|	y	y	y	y	|
|					|
|	z	z	z	z	|
|					|
|	0	0	0	1	|
					

 

         每一列表示一个四维向量，上面我们创建了一个4X4的矩阵，在webgl中我们常用的矩阵为4X4和3X3。

         模型变换就是利用矩阵使得模型的大小、位移、旋转等产生变化的过程，通常我们会使用模型的内置矩阵与变换矩阵相乘从而得到变换后的新矩阵并赋予模型。每个模型被创建后都会拥有自己的模型矩阵，我们无需关注模型矩阵是如何产生的，只需要知道对模型进行模型变换需要将模型矩阵与变换矩阵相乘。具体如何操作矩阵自行查询相关资料，这里不做赘述。

 

11、视图变换

         视图变换就是不通过调整模型本身的参数，而是直接控制摄像机、场景的移动而产生的视觉变化，比如我们将摄像机像模型方向拉近，我们就会感觉模型在逐渐变大，我们将场景原点逐渐拉远我们就会感觉模型在渐渐远离我们。

 

13、着色器语言

         1) 顶点着色器：顶点着色器是用来控制光照、颜色、位移等，假如我们要渲染一个三形，顶点着色器就将执行三次，它会为每个顶点都执行一次。注意在顶点着色器执行时我们还没有通过屏幕看到绘制的图形，顶点着色器是为后续的光栅化处理做铺垫，它将为光栅化操作提供必要的资源，顶点着色器是光栅化处理的仓库。

         2) 片段着色器：了解片段着色器先要了解光栅化是什么意思，光栅化就是绘制每两个顶点之间的像素并形成线段的过程，就好比我们要画一个栅栏，我们要一根一根的画。

片段着色器就是告诉GPU如何光栅化的语言，就如其名字，将光照、纹理、位移等沿着顶点之间的线段逐个像素的渲染。

14、webgl中最流行的js库three.js介绍：

首先最外层为场景，场景中包含一个或多个摄像机，场景中还可以包含模型、粒子等。

模型、粒子等也可包含在Object3D对象中。

         创建一个模型的过程是：

1)      创建模型所需要的顶点

2)      创建一个几何图形对象，并将顶点传递给几何图形对象。

3)      创建模型的纹理对象即材质。

4)      创建网格对象，并将几何图形对象以及纹理对象传递给网格对象。

5)      将网格添加到可容纳网格对象的容器内，如scene、Object3D等。

 

 

术语FAQ：

1、场景：Scene

2、位置：Position

3、投影：Projector

4、正交：Orthographic

5、透视：Perspective

6、摄像机：Camera

7、渲染：Render

8、向量：Vector

9、三维向量：Vector3

10、四维向量：Vector4

11、矩阵：Matrix

12、3行3列矩阵：Matrix3

13、4行4列矩阵：Matrix4

14、顶点：Vertex

15、顶点的复数形式：Vertices

16、几何对象：Geometry

17、纹理：Texture

18、材质：Material

19、网格：Mesh

20、变换：Transform

21、视图：View