OpenGL ES 2.0纹理坐标异常：无法正确截取精灵图局部纹理

常见原因 #

• 纹理坐标计算错误：你可能直接使用了0_{1的全局纹理坐标，而非对应子纹理的局部相对坐标。你的精灵图宽192px，子纹理宽32px，单个子纹理在X轴上的占比是32/192=1/6≈0.1667，Y轴因为子纹理高度和精灵图一致，所以是0}1。如果没按这个比例裁剪坐标，就会显示整张精灵图。
• 纹理采样模式设置不当：如果纹理Wrap模式设为GL_REPEAT，即使坐标有微小偏差，也可能意外重复显示，但更核心的还是坐标计算问题。
• 着色器或顶点数据传递错误：比如顶点着色器没正确传递纹理坐标，或者顶点属性指针绑定错误，导致GPU使用了默认的0~1坐标采样。

修复步骤 #

1. 计算正确的子纹理UV坐标
   假设要取第n个（从0开始计数）子纹理，对应的UV坐标应该是：

   • 左上角：(n * 1/6, 0)
   • 右上角：((n+1) * 1/6, 0)
   • 左下角：(n * 1/6, 1)
   • 右下角：((n+1) * 1/6, 1)
     把这些坐标替换到你的顶点纹理坐标数组中。

2. 设置合适的纹理Wrap模式
   加载纹理时，将Wrap模式设为GL_CLAMP_TO_EDGE，避免因坐标微小误差导致的意外重复：

   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
   

3. 验证着色器逻辑
   确保顶点着色器正确传递纹理坐标，片段着色器正确采样：
   顶点着色器示例：

   attribute vec2 a_position;
   attribute vec2 a_texCoord;
   varying vec2 v_texCoord;
   uniform mat4 u_mvpMatrix;
   
   void main() {
       gl_Position = u_mvpMatrix * vec4(a_position, 0.0, 1.0);
       v_texCoord = a_texCoord;
   }
   

   片段着色器示例：

   precision mediump float;
   uniform sampler2D u_texture;
   varying vec2 v_texCoord;
   
   void main() {
       gl_FragColor = texture2D(u_texture, v_texCoord);
   }
   

   确认a_texCoord的属性位置和你绑定顶点数据时的位置完全匹配。

4. 检查顶点数据绑定
   绘制前确保正确启用并绑定纹理坐标的顶点属性指针，比如你的顶点数据是[x, y, u, v]结构：

   GLint texCoordLoc = glGetAttribLocation(program, "a_texCoord");
   glEnableVertexAttribArray(texCoordLoc);
   // 假设顶点数组起始地址为vertices，每个顶点占4个float
   glVertexAttribPointer(texCoordLoc, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)(2 * sizeof(float)));
   

内容的提问来源于stack exchange，提问作者Techie-Guy