面试官：纹理贴图必须要输入顶点坐标或纹理坐标吗

最近知识星球的一位同学，面试时被问到：纹理贴图必须要输入顶点坐标或纹理坐标吗？

他一下子被这个问题问蒙了，虽然他知道正确答案是否定的，但是说不上来理由。

这个就引出了文本提到的全屏三角形，它不需要顶点缓冲区，而是利用顶点着色器直接生成所需的顶点坐标和纹理坐标。

这种方法通常用于后处理效果，例如屏幕空间效果（屏幕空间反射、屏幕空间环境光遮蔽等），其中整个屏幕的片段都需要处理。

通过生成全屏三角形，可以避免显式地传递顶点数据，从而简化管线配置。

全屏三角形

全屏三角形实际上是一种讨巧的优化方法，用于渲染全屏四边形或矩形，而不需要使用两个三角形和顶点缓冲区。

通过至少 3 个顶点的索引，在顶点着色器中计算一个覆盖整个屏幕的三角形顶点坐标，可以避免两个三角形之间的接缝问题，并减少顶点处理的开销。

顶点索引 gl_VertexID 是 OpenGL 的内建变量，它在顶点着色器中表示当前顶点的索引。

它不需要显式生成或传递，因为在调用绘制命令（如 glDrawArrays）时，OpenGL 会自动为每个顶点提供该索引。

当你使用 glDrawArrays(GL_TRIANGLES, 0, 3) 来绘制一个包含三个顶点的三角形时，gl_VertexID 会依次被设置为 0、1 和 2。

这个索引值可以用来计算每个顶点的位置和其他属性。

全屏三角形的实现细节

gl_VertexID 是 OpenGL ES 中用于标识顶点索引的内建变量，利用它可以在顶点着色器中生成覆盖整个屏幕的三角形。

以下是顶点着色器的详细说明，其中包括对 gl_VertexID 的使用：

#version 300 es                             
out vec2 v_texCoord;                       
void main()                                
{ 
    // 根据顶点索引计算纹理坐标
    // gl_VertexID 的值依次为 0, 1, 2                                             
    v_texCoord = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);


    // 将纹理坐标转换为标准化设备坐标 
    // v_texCoord 的值依次为 (0, 0), (2, 0), (0, 2)
    gl_Position = vec4(v_texCoord * 2.0 - 1.0, 0.0, 1.0);
}

在这个顶点着色器中，gl_VertexID 的值为 0、1、2，这三次调用对应于三角形的三个顶点。下面是每个顶点的计算细节：

顶点 0 (gl_VertexID = 0):

v_texCoord = vec2((0 << 1) & 2, 0 & 2) -> v_texCoord = vec2(0, 0)
gl_Position = vec4(v_texCoord * 2.0 – 1.0, 0.0, 1.0) -> gl_Position = vec4(-1.0, -1.0, 0.0, 1.0)

顶点 1 (gl_VertexID = 1):

v_texCoord = vec2((1 << 1) & 2, 1 & 2) -> v_texCoord = vec2(2, 0)
gl_Position = vec4(v_texCoord * 2.0 – 1.0, 0.0, 1.0) -> gl_Position = vec4(3.0, -1.0, 0.0, 1.0)

顶点 2 (gl_VertexID = 2):

v_texCoord = vec2((2 << 1) & 2, 2 & 2) -> v_texCoord = vec2(0, 2)
gl_Position = vec4(v_texCoord * 2.0 – 1.0, 0.0, 1.0) -> gl_Position = vec4(-1.0, 3.0, 0.0, 1.0)

通过这三个顶点，生成了一个覆盖整个屏幕的三角形。注意，这个三角形覆盖了标准化设备坐标 (NDC) 空间，从左下角 (-1, -1) 到右上角 (1, 1)，因此它可以覆盖整个屏幕。

此时生成的顶点坐标：

此时生成的纹理坐标：

可以看到这个大的三角形超出了屏幕区域，这个没有问题，渲染的时候将会被裁剪，不会影响性能。

对应的顶点着色器：

#version 300 es                             
precision mediump float;                    
in vec2 v_texCoord;                         
layout(location = 0) out vec4 outColor;     
uniform sampler2D s_Texture;                
void main()                                 
{                                           
  outColor = texture(s_Texture, v_texCoord);
}

渲染代码这个时候变得非常简单了：

    //指定着色器程序
    glUseProgram (m_ProgramObj);

    //激活并绑定纹理 id
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, m_TextureId);
    glUniform1i(m_SamplerLoc, 0);

    glDrawArrays(GL_TRIANGLES, 0, 3);

由于 Android 设备坐标系原点在左上角，OpenGL 纹理坐标系原点在左下角，纹理坐标需要做一下上下镜像：

#version 300 es                            
layout(location = 0) in vec4 a_position;   
layout(location = 1) in vec2 a_texCoord;   
out vec2 v_texCoord;                       
void main()                                
{                                          
   vec2 uv = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
   v_texCoord = vec2(uv.x, 1.0 - uv.y);//纹理坐标做一下上下镜像(针对 Android 设备)
   gl_Position = vec4(uv * 2.0 - 1.0, 0.0, 1.0);
}

渲染结果：