Fonts 透视投影中的SDF文本绘制

我正在使用SDF技术在WebGL中渲染文本。我制作了字体的SDF纹理，生成BMFont文本度量，并使用简单片段着色器显示文本：

precision mediump float；
均匀的二维u_纹理；
可变vec2 vUv；
浮动aastep（浮动值）{
浮动宽度=0.1；
返回smoothstep（0.5-afwidth，0.5+afwidth，值）；
}
真空总管（真空）
{            
vec4 texColor=纹理2d（u_纹理，vUv）；
浮动α=aastep（texColor.a）；
gl_FragColor=vec4（0.0,0.0,0.0,alpha）；
}

我对

aastep

函数中的

afwidth

值有问题。afwidth仅定义字体边框的模糊。如果它很小，那么远处的文本看起来很难看。如果靠近我的大文本看起来很难看。所以问题是如何在片段着色器中计算afwidth

PS：我有一个公式，用GL_OES_标准_导数计算：

float afwidth=length（vec2（dFdx（值），dFdy（值））*0.70710678118654757；

---

但我的硬件不支持此扩展。所以我想我需要根据

gl\u FragCoord

和变换矩阵来计算它。

人们可以尝试创建一个简单的距离近似值，基于

gl\u FragCoord.w=1.0/gl\u Position.w

：

float aastep（浮点值）
{
浮动距离照相机=1.0/gl_FragCoord.w；
浮动afwidth=0.1*distanceToCamera；
返回smoothstep（0.5-afwidth，0.5+afwidth，值）；
}

---

您可能需要根据自己的喜好调整常数

0.1

。

只是检查一下，但您确定您的硬件不支持

OES_标准_衍生工具吗？让人觉得这不太可能

在WebGL中，您必须启用OES_标准_衍生工具才能使用它

ext = gl.getExtention("OES_standard_derivatives");
if (!ext) {
  // alert("no OES standard derivatives") or fallback to other technique
}

然后在着色器中，必须将其打开

// at top of fragment shader
#extension GL_OES_standard_derivatives : enable

。如果你得到一个关于它们不存在的很短的结果，那么你是对的，它们不存在。如果你得到了很多结果，那么它们确实存在，而你只是没有在你的程序中启用它们
这正是我所做的，但我确信这是错误的，因为如果我改变例如相机的FOV，我需要改变这个常数，所以我应该以某种方式计算它的值，这是我关于链接到阀纸@11-2020的问题：