上图中, 我们可以看到五个处理过程:
- Vertex Processing
- Triangle Processing
- Rasterization
- Fragment Processing
- Framebuffer Operations
每一个过程的输出都是下一个过程的输入:
- Vertex Processing: 输入是程序传入的三维坐标点(vertices), 输出是Vertex Stream
- Triangle Processing: 输入是Vertex Stream, 输出是Triangle Stream ...
Vertex Stream是什么?
三维坐标点(vertices)经过Vertex Processing变成了二维空间中的坐标点, 因为我们需要将图形显示在二维屏幕上; 经过Model, View, Projection变换可以做到.
Triangle Stream是什么？
将顶点组成一个一个的三角形, 在webGL中这个过程我们叫做图元装配.
为什么是三角形? 因为三角形可以组成任何图形, 并且它非常简单.
在webGl中, 基本图元有点、线、三角形, 我们在调用绘制api的时候可以指定gl.drawArrays(gl.TRIANGLES..).
如果指定的三角形, 三角形如何划分是提前做好的, 然后在这个数据给到webGl.
还有一点需要说明, 是先做三维顶点映射到二维然后再做划分三角形, 还是先划分三角形然后再做三维顶点映射到二维; 其实是一样的, 无论在三维空间还是二维空, 三角形顶点的关系是不会变的.
Fragment Stream是什么?
Fragement可以理解为像素, 光栅化(Rasterization)的过程就是给定一个三角形, 确定需要在哪些像素上需要来着色(只是确定像素点, 还没有着色的). 我的理解是每个三角形都需要进行一次光栅化.
Shaded Fragments是什么?
着色之后的得到的结果.
最后进行在Framebuffer Operations进行组装, 进行显示.
着色器(shader)
现代的渲染管线某个特定的部分是可以编程的. 这个部分我们称为着色器shader.
着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。
着色器通常分为顶点着色器(Vertex Shader)和片段着色器(Fragment Shader), 他们作用在渲染管线的不同位置.
顶点着色器
顶点着色器作用在Vertex Processing, 也就是说mvp变换要在顶点着色器中完成.
它把一个单独的顶点作为输入, 顶点着色器主要的目的是把3D坐标转为另一种2D坐标, 同时顶点着色器允许我们对顶点属性进行一些基本处理.
基本处理的处理可以是标准化顶点坐标, 在webGL中仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它, 所有在所谓的标准化设备坐标(Normalized Device Coordinates)范围内的坐标才会最终呈现在屏幕上（在这个范围以外的坐标都不会显示）。 通常我们传入的顶点坐标不是标准化设备坐标, 需要做点处理, 这个可以放在顶点着色器中来做.
片段着色器
片段着色器作用在Fragment Processing.
在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。
片段着色器作用是为每个三角中的每个像素着色, 片段着色器中能获取当前像素的坐标, 从而根据坐标信息进行着色.
void main(){
vec2 st = gl_FragCoord.xy;
gl_FragColor = vec4(st.x, st,y, 0, 1.0);
}
