WebGL中距离场文本渲染效果异常问题咨询

纹理相关问题 #

• 纹理通道采样不匹配：Qt OpenGL中通常默认使用单通道灰度/alpha纹理存储距离场，WebGL中如果未显式指定纹理格式，会默认按RGBA格式采样，导致取到的距离场值错误。
  修复：创建纹理时显式指定格式，示例代码：

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, image);
  

  片元着色器采样时取对应通道值：float sdf = texture2D(u_sdfTex, v_uv).r;
• 纹理Y轴翻转错误：WebGL默认纹理坐标原点在左上角，OpenGL默认在左下角，未做翻转会导致距离场采样错位。
  修复：纹理加载前开启Y轴翻转：gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

着色器相关问题 #

• 缺少精度声明：WebGL强制要求片元着色器开头显式声明浮点精度，未声明会导致着色器编译失败或计算精度不足，距离场边缘计算出错。
  修复：在片元着色器最开头添加精度声明，距离场计算建议用高精度：precision highp float;
• 距离场阈值参数不匹配：WebGL画布的设备像素比、字体尺寸和Qt版本不一致，会导致smoothstep的平滑范围参数适配错误，出现文字糊块、边缘毛躁问题。
  修复：根据当前画布的设备像素比动态调整平滑范围，示例代码：

  float smoothWidth = 2.0 / (u_fontSize * u_devicePixelRatio);
  float alpha = smoothstep(0.5 - smoothWidth, 0.5 + smoothWidth, sdf);
  

渲染状态相关问题 #

• 混合模式配置错误：距离场文本依赖透明混合实现抗锯齿效果，WebGL中未开启混合或者混合函数配置错误会出现黑边、色块异常。
  修复：渲染文本前开启混合并配置正确的混合函数：

  gl.enable(gl.BLEND);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  

坐标转换相关问题 #

• 投影矩阵不匹配：Qt OpenGL中通常使用适配窗口坐标的正射投影，改写WebGL时未适配WebGL的裁剪空间规则，会导致顶点位置错位、文字拉伸破碎。
  修复：核对正射投影矩阵参数，确保WebGL的投影坐标空间和Qt版本一致，或者调整顶点坐标、纹理坐标适配WebGL的裁剪空间规则。

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