フチ角の丸い四角形

Question

私は速い角の丸い四角形のGLSLシェーダを取得しようとしていますが、私はこれだけの機能（https://github.com/marklundin/glsl-sdf-primitives/blob/master/udRoundBox.glsl）を使用して塗りつぶされた矩形のためにそれを行うことができたこんにちは：私はしました

float udRoundBox(vec3 p, vec3 b, float r) 
{ 
    return length(max(abs(p)-b,0.0))-r; 
} 

を国境を越えて塗りつぶしをしているバージョンを見つけようとしていて、1つしか出てこなかったが運がなかった。誰にもこれに対する解決策がありますか？

Answer 1

符号付き距離関数を使用しているので、最も簡単な方法は、おそらく減算演算子を使用して、より小さな丸いボックスを最初のものから差し引くことです。

それは次のようになります。

// unsigned round box 
float udRoundBox(vec3 p, vec3 b, float r) 
{ 
    return length(max(abs(p)-b,0.0))-r; 
} 

// substracts shape d1 from shape d2 
float opS(float d1, float d2) 
{ 
    return max(-d1,d2); 
} 

// to get the border of a udRoundBox, simply substract a smaller udRoundBox ! 
float udRoundBoxBorder(vec3 p, vec3 b, float r, float borderFactor) 
{ 
    return opS(udRoundBox(p, b*borderFactor, r), udRoundBox(p, b, r)); 
} 

borderFactor大きなそれは、国境がなる小さい、[0:1]内の値である必要があります。ここで

はこれを証明するShaderToyサンプルです：それはより悪いパフォーマンスにつながるとして最初のものを押し出すために、二次ボックスを使用して

Answer 2

は、悪い考えです。単一のオブジェクトを計算する代わりに、2つのオブジェクトを計算します。 SDFのパフォーマンスは、通常、距離関数に追加するオブジェクトの数によって制限されます。これは、mod/floor関数がSDFを作成するときに非常に便利な理由です。あなたは（ほとんど）追加コストなしで無限の数のオブジェクトを追加することができます。

ここではボックス符号付きの関数を使用してくださいhttp://iquilezles.org/www/articles/distfunctions/distfunctions.htmあなた自身で書きたい場合は、ボックスに最も近い点を取得してから、この点までの距離を返します。

用語を距離から差し引くことで丸められたボックスを得ることはできますが、すでに理解しています（例ではr）。

距離の絶対値を使用して境界線を取得できます。 Abs（de）は、基本的にはオブジェクトの内側（負の距離）をポジティブにして取り除きます。これにより、 "空の"境界線を持つオブジェクトが作成されます。境界線を大きくしたい場合は、丸いボックスを作成したのと同じように、別の用語を減算してサイズを大きくします。

これは、距離の見積もりが正しい限り、どのような図形でも機能します。 SDFはそのような小さなトリックには最適です。

Answer 3

私はここにあなたが探しているものだと思う...

//--------------------------------------------------------- 
// draw rectangle frame with rounded edges 
//--------------------------------------------------------- 
float roundedFrame (vec2 pos, vec2 size, float radius, float thickness) 
{ 
    float d = length(max(abs(uv - pos),size) - size) - radius; 
    return smoothstep(0.55, 0.45, abs(d/thickness) * 5.0); 
} 

私shadertoy例https://www.shadertoy.com/view/MssyRN を見てみましょう。