透视投影中的 SDF 文本渲染答案

【问题标题】：SDF text rendering in perspective projection透视投影中的 SDF 文本渲染
【发布时间】：2016-01-02 06:57:57
【问题描述】：

我正在使用 SDF 技术 http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf 在 WebGL 中呈现文本。我制作了字体的 SDF 纹理，生成 BMFont 文本度量并使用简单的片段着色器显示文本：

        precision mediump float;
        uniform sampler2D u_texture;        
        varying vec2 vUv;

        float aastep(float value) {
          float afwidth = 0.1;
          return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);
        }

        void main(void)
        {            
            vec4 texColor = texture2D(u_texture, vUv);
            float alpha = aastep(texColor.a);
            gl_FragColor = vec4(0.0, 0.0, 0.0, alpha);            
        }

aastep 函数中的 afwidth 值有问题。 afwidth 简单地定义了字体边界的模糊。如果它很小，那么遥远的文字看起来很难看。如果靠近我的大文本看起来很难看。那么问题是如何在片段着色器中计算afwidth？

PS：我有一个公式可以使用 GL_OES_standard_derivatives 进行计算：

float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;

但是我的硬件不支持这个扩展。所以我想我需要根据gl_FragCoord和变换矩阵来计算。

【问题讨论】：

链接到 Valve 论文 @ 11-2020: steamcdn-a.akamaihd.net/apps/valve/2007/…

标签： fonts opengl-es webgl

【解决方案1】：

人们可能会尝试根据gl_FragCoord.w = 1.0 / gl_Position.w 创建一个简单的相机距离近似值：

    float aastep(float value)
    {
          float distanceToCamera = 1.0 / gl_FragCoord.w;
          float afwidth = 0.1 * distanceToCamera;
          return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);
    }

您可能需要根据自己的喜好调整常量 0.1。

【讨论】：

这正是我所做的，但我确定这是错误的，因为如果我改变例如相机的 FOV，我将需要改变这个常数，所以我应该以某种方式计算它的值，这是我的问题

【解决方案2】：

只是检查，但您确定您的硬件不支持OES_standard_derivatives？ http://webglstats.com 看起来不太可能。

在 WebGL 中，您必须启用 OES_standard_derivatives 才能使用它。

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

Run this test to check if they work on your system。如果您得到关于它们不存在的非常简短的结果，那么您是正确的，它们不存在。如果你得到很多结果，那么它们确实存在，只是你没有在你的程序中启用它们

【讨论】：