如何渲染光滑的椭圆？

Question

我试图渲染一个椭圆，在那里我可以决定边缘有多难。(它也应该是平铺的，也就是说，我必须能够将渲染分割成具有给定偏移量的多个纹理)

我想出了这个：

float inEllipseSmooth(vec2 pos, float width, float height, float smoothness, float tiling, vec2 offset)
{
    pos = pos / iResolution.xy;
    float smoothnessSqr = smoothness * tiling * smoothness * tiling;

    vec2 center = -offset + tiling / 2.0;
    pos -= center;

    float x = (pos.x * pos.x + smoothnessSqr) / (width * width);
    float y = (pos.y * pos.y  + smoothnessSqr) / (height * height);
    float result = (x + y);

    return (tiling * tiling) - result;
}

看这里(在评论->之后更新了，现在是我需要它的方式了)：https://www.shadertoy.com/view/ssGBDK

但目前还不可能获得一个完全的硬优势。如果“光滑”设置为0，则它也是光滑的。

其中一个想法是“计算位置到中心的距离，并将其与相应的半径进行比较”，但我认为可能有一个更好的解决方案。

我在网上找不到任何东西，也许我只是在搜索错误的关键词。

任何帮助都将不胜感激。

Answer 1

我还不明白你想做什么。不管怎么说，我一直在玩着色玩具，我创造了一些可以帮助你的东西。我认为平滑步骤 GLSL功能是您所需要的。以及一些内外比来设定内、边界的界限。

它没有优化..。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    int tiling = 4;
    float width = 0.5;
    float height = 0.2;
    float smoothness = 0.9;
    float outerRatio = 1.0;
    float innerRatio = 0.75;
    vec2 offset = vec2(0.25, 0.75);
    //offset = iMouse.xy / iResolution.xy;
    
    vec2 center = vec2(0.5, 0.5);
    vec2 axis = vec2(width, height);

    vec2 pos = float(tiling) * (fragCoord.xy);
    pos = mod(pos / iResolution.xy, 1.0);            
    pos = mod(pos - offset, 1.0);
    pos = pos - center;
    pos = (pos * pos) / (axis * axis);
    float distance = pos.x + pos.y;
    float alpha;
    if ( distance > outerRatio ) { alpha = 0.0; }
    else if ( distance < innerRatio ) { alpha = 1.0; }
    else { alpha = smoothstep(outerRatio, innerRatio, distance); }
    
    fragColor = vec4(vec3(alpha), 1.0);
}

多椭圆，边缘柔软，内部坚固