WebGLシェーダの描画された円/楕円に一定の幅の輪郭を追加するにはどうすればいいですか？

Question

WebGLの円/楕円を1つのQuadとフラグメントシェーダを使って描画しています。ここでは、解像度に依存しない方法（エッジ距離アンチエイリアシング）

は、現在、私のフラグメントシェーダです：

'#extension GL_OES_standard_derivatives : enable', 
'precision mediump float;', 
'varying vec2 coord;', 
'vec4 circleColor = vec4(1.0, 0.5, 0.0, 1.0);', 
'vec4 outlineColor = vec4(0.0, 0.0, 0.0, 1.0);', 

'uniform float strokeWidth;',   
'float outerEdgeCenter = 0.5 - strokeWidth;', 

'void main(void){', 

     'float dx = 0.5 - coord.x;', 
     'float dy = 0.5 - coord.y;', 
     'float distance = sqrt(dx*dx + dy*dy);', 

     'float delta = fwidth(distance);', 
     'float alpha = 1.0 - smoothstep(0.45 - delta, 0.45, distance);', 
     'float stroke = 1.0 - smoothstep(outerEdgeCenter - delta, outerEdgeCenter + delta, distance);', 

     'gl_FragColor = vec4(mix(outlineColor.rgb, circleColor.rgb, stroke), alpha);',     

'}' 

これはどんなサイズ完全にアンチエイリアスある黒い輪郭線とオレンジ色の円を作成します。

しかし、できるだけ早く私は、クワッドを変換として楕円に円を有効にするために、（それをスケーリング）、distance計算は、アウトラインにも拡大させる、それに沿って変形します。私の理解は、私は何とかそれを反転させることによってクワッドの変換を説明する必要があるということです。

私が希望何distanceは、クワッドが丸ごと/楕円形の周りに一定の幅のアウトラインを生成する効果で、変換された場合でも均一なままにするためです。

ご迷惑をおかけして申し訳ございません。

Answer 1

問題は、あなたのフラグメントシェーダー（FS）が今やブラックボックスのようなものであることです（コードには情報がないためです）。

あなたのFSは正方形のスペース内で動作するように書かれています。だから、常に円内に円が描画され、xとyは同じサイズ（-1.0; 1.0間隔）です。

クワッドは（VSまたは他の場所で）外部に変換されますが、その変換をFSに反映させる方法はまだありません。

この問題を解決するには、スケーリングについてFSに追加情報をプッシュすることをお勧めします。 Shadertoyような何かがシェーダー入力に用意されています

この除く

uniform vec3 iResolution; // viewport resolution (in pixels) 

文句を言わない画面サイズの解像度が、クワッド変換についての情報なので、何かのようになる：そして、あなたは、この値を使用することができます

varying vec2 trans; 
// where value (1.0, 1.0) mean no transformation 

異なるストロークを計算する。現在のストロークの変換を反転するのではなく、固有のdx値とdy値を計算します。

作業の解決方法はもっとたくさんあります。後でどのように使用するか（どのような変換が可能であるべきかなど）によって異なります。だから私は基本的なものを提示するのが最も簡単な解決法です。