WebGL原理 （笔记2）

WebGL执行原理

图形流水线

文字描述

• 确定图形的每一个顶点，比如说一个三角形，她需要三个顶点来确定他的大小位置等
• 图元装配： 他的意思主要是通过上面的 顶点 来确定一个图形
• 光栅化： 你已经有了形状，就是骨架但是他的内部是空的，我们可以想象一下 3个火柴棍，拼成一个三角形，但是他不是有面积的，中间是空的，通过光栅化把他中间进行填充，这样他就变成了 类似一个实体
• 片元着色：这里我们举个栗子， 风筝的制作流程 ： 第一步肯定要先搭好骨架，也就是我们上面说的图元装配； 第二步，我们需要的是为风筝的骨架铺上需要的布料或者其他材料，就是光栅化，光栅化过后就得到基本的风筝了。但是这样的风筝肯定不好看啊，这时候我们肯定想要好看点的 风筝不能比其他小伙伴的不好看吧，这就需要我们的片元着色了。第三步：就是在风筝上面涂上图案
• 逐片元操作：这里我们可以理解对图案的一些 优化和处理

重点的2个就是我们的着色器

着色器的作用

首先，WebGL里有顶点着色器和片元着色器两种着色器。顶点着色器和片元着色器是相互依赖的，缺一不可，并且首先被调用的是顶点着色器。

可以把顶点相关的所有情报都传给顶点着色器。比如，顶点的位置，顶点法线，纹理坐标，顶点颜色等等，跟顶点相关的所有情报都可以传给顶点着色器。在这里，我们可以自由决定传入着色器的内容，这种灵活性就是可编辑渲染管线的好处。但是，虽然说传入着色器的内容是自由决定的，但是顶点的位置情报是必须的，因为如果不知道顶点的位置的话，是没有办法绘制模型的。

顶点着色器就跟他的字面上的意思一样，接受顶点相关的情报，最后决定如何处理这些顶点。而片元着色器则决定了画面上用什么颜色来输出。片元着色器的英文是fragment，其实就是断片，碎片的意思。而画面上的像素则是画面上的最小的断片，所以片元着色器操作的是颜色。

最通俗的说就是，顶点着色器就是处理顶点相关的信息，片元着色器就是处理画面上的颜色信息。

顶点着色器（Vertex shader）

顶点着色器是用来描述 顶点特性（如位置、颜色等）的程序。顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

• 顶点着色器源码
  顶点着色器源码是通过javascript字符串形式表示出来的
• 内置变量
  定点着色器有一先内置的变量，这些变量的名字是 不可以变 的，而且是区分 大小写 的
• 自定义 Attribute 变量
  自定义变量需要3种限定字，他是表示变量的不同含义和作用，具有一定的限制
  表示 每一个点 的数据，可以定义很多个
• 自定义Uniform变量
  定义一个常量，uniform变量就像是ES6里面的常量（const ），它不能被 shader 程序修改
• 自定义Varying变量
  他是 顶点着色器 和 片元着色器 传导数据 用的

片元着色器（Fragment shader）

进行逐片元处理过程如光照（后续教程继续解释光照）的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。

• 片元色器源代码
• 内置变量
• Uniform 和 Samplers
  samplers 主要用来储存纹理的，顶点着色器没有这个概念的
• 自定义Varying变量