Question

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

我找到了许多具有smoothstep或更复杂功能的解决方案，但我正在寻找一种优雅而快速的方法。

我所做的一个解决方案是使用指数函数并使其更陡峭，但它有许多我不想要的缺点（由于指数函数，这条线不是真正的一个像素高度，而且它是相当棘手的一个右边），这是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]范围而不夹紧
快速做到这一点

Answer 1

如果您只想：

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

，然后可能：

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
}

Answer 2

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

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);
}

Answer 3

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

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

使用片段着色器

3 个答案: