webgl 图解WebGL和Three.js工作原理

首先，我们在谈论什么？

我们谈论两件事:

1.WebGL背后的工作原理是什么？

2.以Three.js为例，框架在背后起什么作用？

二、为什么要理解原理？

我们假设你对WebGL有一定的了解，或者用Three.js做了一些事情，这时你可能会遇到这样一些问题:

1.很多事情还是做不到，甚至没有任何想法；

2.遇到bug，解决不了，甚至没有方向；

3.性能有问题，完全不知道怎么优化。

这个时候，我们需要了解更多。

第三，首先理解一个基本概念

1.什么是矩阵？

简单来说，矩阵用于坐标变换，如下图所示:

它只能知道点、线、三角形？我一定是弄错了。

不，你没看错。

甚至这么复杂的模型都是用三角形画的。

4.2.WebGL绘图过程

简单地说，WebGL绘图过程包括以下三个步骤:

1、获取顶点坐标

2.基本装配(即绘制三角形)

3.光栅化(生成面片，即像素)

接下来，我们将一步一步地解释每个步骤。

4.2.1.获取顶点坐标

顶点坐标从何而来？立方体很好说。如果是机器人呢？

没错，我们就不一一写这些坐标了。

通常来源于3D软件导出或框架生成，如下图所示:

写缓冲区是什么？

是的，为了简化流程，我之前没有介绍。

由于顶点数据有上千个，我们得到顶点坐标后，通常会存储在视频内存中，也就是缓冲区，方便GPU读取更快。

4.2.2、原始装配

我们已经知道，图元装配是从顶点生成图元(三角形)。这个过程是自动完成的吗？答案不完全正确。

为了让我们有更高的可控性，也就是自由控制顶点位置，WebGL给了我们这个权力，就是可编程渲染流水线(不懂)。

WebGL需要我们先处理顶点，那么如何处理呢？我们先来看看下图:

我们引入了一个新的术语叫做顶点着色器，它是由opengl es编写的，由java以字符串的形式定义，并传递给GPU进行生成。

例如，以下是一段顶点着色器代码:

属性vec4位置；void main(){ GL _ Position = Position；}

属性修饰符用于声明浏览器(java)传递给顶点着色器的变量值；

位置是我们定义的顶点坐标；

Gl_Position是一个内置的传出变量。

这段代码不起任何作用。如果是画2d图形，没问题，但是如果是画3d图形，也就是传入的顶点坐标是3D坐标，我们需要转换成屏幕坐标。

比如v(-0.5，0.0，1.0)转换成p(0.2，-0.4)，类似于用相机拍照。

4.2.2.1，顶点着色器处理流程

回到刚才的话题，顶点着色器是如何处理顶点坐标的？

如上图，顶点着色器会先转换坐标，然后用GPU组装图元。这个顶点着色器程序运行的次数取决于顶点的数量。

您可能会注意到顶点着色器变成了:

属性vec4位置；一致mat4矩阵；void main(){ GL _ Position = Position * matrix；}

也就是说，应用矩阵矩阵将三维世界坐标转换成屏幕坐标。这个矩阵叫做投影矩阵，是从java中导入的。至于这个矩阵怎么生成，暂时不讨论。

4.2.3.光栅化

像图元装配一样，栅格化是可控的。

图元生成完成后，我们需要对模型进行“着色”，运行在GPU上的“片段着色器”将完成这项工作。

它也是一个opengl es程序，纹理(颜色，漫反射贴图等。)和模型的光照由面片着色器计算。

下面是一个简单的片段着色器代码:

精密中泵浮子；void main(void){ GL _ FragColor = vec 4(1.0，1.0，1.0，1.0)；}

Gl_FragColor是输出颜色值。

4.2.3.1和片段着色器的处理流程

着色器如何控制颜色生成？

如上图所示，顶点着色器是它有多少个顶点，运行多少次，而片段着色器是它生成多少个片段(像素)，运行多少次。

4.3.WebGL的完整工作流程

此时，WebGL已经经历了以下处理流程:

1.数据准备阶段

在这个阶段，我们需要提供顶点坐标、索引(三角形绘制顺序)、uv(确定贴图坐标)、法线(确定光照效果)和各种矩阵(如投影矩阵)。

顶点数据存储在缓冲区中(因为数量巨大)，并传递给具有修改器属性的顶点着色器；

矩阵规则