- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Hiero 生成的 BitmapFont。我遵循了这个很棒的指南 https://github.com/libgdx/libgdx/wiki/Distance-field-fonts正确使用距离场。我还使用指南中提供的着色器。一切都很好。
接近尾声时,指南中提到在距离场抗锯齿之上,应该可以很容易地从提供的着色器向字体添加轮廓。它与调整 distance 参数有关。我相信对于知道如何处理着色器的人来说这很容易。但我没有。
这是代码
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_texture;
varying vec4 v_color;
varying vec2 v_texCoord;
const float smoothing = 1.0/16.0;
void main() {
float distance = texture2D(u_texture, v_texCoord).a;
float alpha = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);
gl_FragColor = vec4(v_color.rgb, alpha);
}
这是vert代码:
uniform mat4 u_projTrans;
attribute vec4 a_position;
attribute vec2 a_texCoord0;
attribute vec4 a_color;
varying vec4 v_color;
varying vec2 v_texCoord;
void main() {
gl_Position = u_projTrans * a_position;
v_texCoord = a_texCoord0;
v_color = a_color;
}
从这里如何使用着色器添加轮廓?
最佳答案
smoothstep 函数基本上是一种创建平滑斜坡以消除字母边缘锯齿的方法。如果你想勾勒出字母的轮廓,你需要将 alpha 抗锯齿从字母中移出轮廓的粗细。所以首先你需要一个新的轮廓厚度常量:
const float outlineWidth = 3.0/16.0; //will need to be tweaked
const float outerEdgeCenter = 0.5 - outlineWidth; //for optimizing below calculation
然后修改您的 alpha 以允许现在更大的字母:
float alpha = smoothstep(outerEdgeCenter - smoothing, outerEdgeCenter + smoothing, distance);
现在您需要第二个抗锯齿边缘来将不透明轮廓与不透明字母分开。它将与旧的 alpha 计算相同,因为它在同一个地方。
float border = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);
最后,您需要通过混合轮廓颜色和字母颜色来计算不透明颜色。
uniform vec4 u_outlineColor; //declared before main()
gl_FragColor = vec4( mix(u_outlineColor.rgb, v_color.rgb, border), alpha );
总结一下你的新片段着色器:
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_texture;
uniform vec4 u_outlineColor;
varying vec4 v_color;
varying vec2 v_texCoord;
const float smoothing = 1.0/16.0;
const float outlineWidth = 3.0/16.0;
const float outerEdgeCenter = 0.5 - outlineWidth;
void main() {
float distance = texture2D(u_texture, v_texCoord).a;
float alpha = smoothstep(outerEdgeCenter - smoothing, outerEdgeCenter + smoothing, distance);
float border = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);
gl_FragColor = vec4( mix(u_outlineColor.rgb, v_color.rgb, border), alpha );
}
您可以通过在 batch.begin()
和 batch.end()
之间调用它来设置边框颜色:
shaderProgram.setUniformf("u_outlineColor", myOutlineColor);
关于fonts - 使用着色器勾勒字体轮廓并使用距离场,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26155614/
我正在将具有不同前景色的 FormattedText 渲染为不同的字符(例如,前两个红色,接下来的 2 个黄色,如..),现在我必须显示围绕该文本的轮廓。对于应用轮廓(笔划),我必须将此 Format
如果我有一个带有 n 个任意形状或大小的 Visual 对象的 Canvas,我将如何以编程方式突出显示/勾勒 Visual 对象? WPF 中是否有内置的东西可以帮助我? 最佳答案 Joel 有一个
我是一名优秀的程序员,十分优秀!