WebGL渲染管线
下图是WebGL渲染管线的示意图:
Vertex Buffer Objects (VBOs)
VBOS中包含了用于描述几何体的信息。如,几何体的顶点坐标,法线坐标,颜色,纹理坐标等。
Index Buffer Objects (IBOs)
IBOs中包含了描述顶点关系的信息。它使用了顶点在VBOs中的索引位置。
Vertex Shader
顶点着色器在每一个顶点上执行。它处理顶点相关信息,如顶点坐标,法线坐标,颜色,纹理坐标。这些信息从VBO中获取,关联到顶点着色器用中Attribute。
Fragment Shader
片元着色器在每一个片元上执行,用以计算每个片元的颜色。
Framebuffer
帧缓冲区是一个二维的缓冲区,用以存储片元着色器中处理过的片元。一旦所有的片元都完成处理,渲染结果就可以显示在屏幕上了。
Attributes
属性是顶点着色器中的输入变量。它指定了如何从缓冲区中读取数据,并将数据传递给顶点着色器。你可以在缓冲区中存储位置信息(3个32位的浮点型数据)。然后指定从哪个缓冲区中读取位置信息,位置信息的数据类型是什么,从缓冲区中的哪个位置开始读,总共读取多少个字节。由于顶点着色器需要在每一个顶点上执行,因此每次执行时,属性值都不会相同。
Uniforms
Uniforms是顶点着色器和片元着色器的输入变量。与Attributes不同,Uniforms变量在一个渲染循环中是固定的。比如,光源的位置。
Textures
纹理中经常包含的是图像数据,但可以包含其它数据。
Varyings
Varyings变量常用于从顶点着色器向片元着色器传递数据。顶点着色器中的Varyings变量,传递给片元着色器前,会经过插值计算。