WebGL中带距离场的文本绘制问题
WebGL中带距离场的文本绘制问题
提问于 2021-11-28 12:51:30
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-28 12:58:50
这似乎是一个与预乘α相关的问题(参见为什么我的WebGLα透明度看上去不对？ )。
您需要在片段着色器中将颜色通道乘以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);Stack Overflow用户
发布于 2021-11-28 15:02:21
_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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70143577
复制相关文章
相似问题
腾讯云开发者
