渲染大纹理字体时出现异常线条/方块图案问题排查

问题根源 #

SDF（有符号距离场）纹理的像素值代表到字符边缘的距离，普通纹理降采样（比如生成mipmap）或直接线性过滤会破坏距离场的精确性，导致缩小渲染时出现异常块状/线条图案。你的代码中生成了mipmap，且片段着色器直接将纹理值作为alpha输出，没有正确处理SDF的距离信息，这是核心问题。

具体修复步骤 #

1. 禁用Mipmap并调整过滤参数
   SDF纹理不需要mipmap，因为mipmap的降采样平均会模糊距离场数值。修改纹理加载代码，移除mipmap生成逻辑，并设置正确的过滤模式：

   int width, height, nrChannels;
   unsigned char *img_data = stbi_load(image, &width, &height, &nrChannels, 1);
   
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
   // 禁用mipmap，使用线性过滤
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
   
   glBindTexture(GL_TEXTURE_2D, font->texture);
   glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, width, height, 0, GL_RED, GL_UNSIGNED_BYTE, img_data);
   // 移除glGenerateMipmap调用
   

2. 修改片段着色器，正确处理SDF距离场
   直接将SDF纹理的红色通道值作为alpha会忽略距离场特性，应通过阈值判断+平滑步长实现抗锯齿和正确边缘渲染：

   #version 330 core
   out vec4 FragColor;
   
   in vec2 TexCoord;
   
   uniform sampler2D ourTexture;
   
   void main()
   {
       // 获取SDF距离值（0.5对应字符边缘）
       float sdfDistance = texture(ourTexture, TexCoord).r;
       // 用smoothstep实现平滑边缘，阈值可根据需求微调
       float alpha = smoothstep(0.45, 0.55, sdfDistance);
       FragColor = vec4(1.0, 1.0, 1.0, alpha);
   }
   

3. 额外优化：保证纹理坐标精度
   字符渲染时若纹理坐标精度不足，也可能引发采样异常。确保顶点传递的TexCoord是精确的UV坐标，避免矩阵变换或浮点精度丢失导致的采样偏差。

内容的提问来源于stack exchange，提问作者Meh