繁体   English   中英

使用片段着色器在特定位置绘制一条完美的水平线

[英]Drawing a perfect horizontal line at a specific position with a fragment shader

将片段着色器应用于屏幕对齐的四边形,是否可以在垂直轴上的任何选定位置绘制单个像素高度的完美水平线?

我找到了许多具有平滑步骤或更复杂功能的解决方案,但我正在寻找一种优雅,快速的方法。

我提出的解决方案是使用指数函数并将其变得更陡峭,但是它有许多我不希望出现的缺点(由于指数函数,该线并不是真正的一个像素高度,并且很难正确设置) ,这是GLSL代码:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;

    // a centered horizontal line
    float v = pow(uv.y - 0.5, 2.);

    // make it steeper
    v *= 100000.;

    // make it white on a black background
    v = clamp(1. - v, 0., 1.);

    fragColor = vec4(v);
}

这是执行此操作的shadertoy代码: https ://www.shadertoy.com/view/Ms2cWh

我想要什么:

  • 绘制到特定Y位置(以像素为单位)或规范化的完美水平线
  • 其强度限制在[0,1]范围内,无需夹紧
  • 一种快速的方法

如果您只想:

将片段着色器应用于屏幕对齐的四边形,在垂直轴上的任何选定位置绘制单个像素高度的完美水平线

,那么也许:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    int iPosition = 250; // the y coord in pixels
    int iThickness = 10; // the thickness in pixels

    vec2 uv = fragCoord.xy / iResolution.xy;

    float v = float( iPosition ) / iResolution.y;
    float vHalfHeight = ( float( iThickness ) / ( iResolution.y ) ) / 2.;

    if ( uv.y > v - vHalfHeight && uv.y < v + vHalfHeight )
        fragColor = vec4(1.,1.,1.,1.); // or whatever color
}

是一个无需分支的简洁解决方案。 我不知道它是否真的比分支更快。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;

    float py = iMouse.y/iResolution.y;

    float hh = 1./iResolution.y;

    // can also be replace with step(0., hh-abs(uv.y-py))
    float v = sign(hh-abs(uv.y-py));

    fragColor = vec4(v);
}

我知道问题已经在我面前得到了正确回答,但是如果有人正在寻找一种以像素完美方式渲染纹理线条的方法,我会写一些示例的文章

通常,它是关于像素完美的UI的,但是将其用于一行仅是夹紧/重复纹理采样的问题。 另外,我正在使用Unity,但是没有理由该方法不排斥它。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM