WebGL 中距离场的文本渲染问题答案

【问题标题】：Text Rendering Problem with Distance Field in WebGLWebGL 中距离场的文本渲染问题
【发布时间】：2021-11-29 00:26:42
【问题描述】：

我使用 Qt OpenGL 3.3 制作了这个距离场示例：

效果很好。我是使用这个视频教程制作的：OpenGL 3D Game Tutorial 33: Distance Field Text Rendering

我在 WebGL 中逐行重写了这个示例，它看起来很糟糕：

【问题讨论】：

标签： opengl webgl

【解决方案1】：

这似乎是与Premultiplied Alpha 相关的问题（请参阅Why does my WebGL alpha-transparency look wrong?。

您需要在片段着色器中将颜色通道乘以 alpha 通道：

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

并将混合函数更改为1 * source_color + (1 -alpha) * dest_color：

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

【讨论】：

【解决方案2】：

_Develop 提出的另一个解决方案：

const options: WebGLContextAttributes = {
    alpha: false, premultipliedAlpha: false
}
gl = (canvas as HTMLCanvasElement).getContext("webgl", options);

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

precision mediump float;

varying vec2 vTexCoord;
uniform sampler2D uSampler;

const float width = 0.5;
const float edge = 0.1;

void main()
{
    float distance = 1.0 - texture2D(uSampler, vTexCoord).a;
    float alpha = 1.0 - smoothstep(width, width + edge, distance);
    if (alpha < 0.001)
    {
        discard;
    }
    gl_FragColor = vec4(0.2, 0.5, 0.0, alpha);
}

【讨论】：