GLSL 2D丸みを帯びたコーナー

Question

コーナーが丸く見えるように、ゲーム画面に黒い輪郭を追加したいと思います。 これは私が達成したい効果です：

私は、この効果ではなく、すべてのものの上に巨大なビットマップを描画するの、おそらくシェーダを使用して作成するのは非常に簡単でした考え出し。

この効果のためにGLSLシェーダコードを手伝ってもらえますか？私はシェイダーで0回の経験があり、インターネット上でこのようなものを見つけることができませんでした。

Answer 1

おかげで機能するようになりました。私はパフォーマンスを改善し、それを滑らかに見せました。 libGDXのresizeイベントに次のように制服を設定し

varying vec4 v_color; 
varying vec2 v_texCoord0; 

uniform vec2 u_resolution; 
uniform vec2 u_screenOffset; 

uniform sampler2D u_sampler2D; 
const float max = pow(0.2, 4); 

void main() 
{ 
    vec2 pos = (gl_FragCoord.xy - u_screenOffset)/u_resolution; 

    float vignette = pos.x * pos.y * (1.-pos.x) * (1.-pos.y); 

    vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color; 
    color.rgb = color.rgb * smoothstep(0, max, vignette); 

    gl_FragColor = color; 
} 

：

shader.begin(); 
shader.setUniformf("u_resolution", viewport.getScreenWidth(), viewport.getScreenHeight()); 
shader.setUniformf("u_screenOffset", viewport.getScreenX(), viewport.getScreenY()); 
shader.end(); 

をこれがaswell（のみFitViewportでテスト済み）シェーダは、ビューポートで動作することを確認します。

Answer 2

私は偶然、このために素晴らしい解決策を見つけました。正確にはあなたが求めているものではありませんが、実際にはもっと良く見えます。

// RESOLUTION is a vec2 with your window size in pixels. 
vec2 pos = fragCoord.xy/RESOLUTION; 
// Adjust .2 (first pow() argument) below to change frame thickness. 
if (pos.x * pos.y * (1.-pos.x) * (1.-pos.y) < pow(.2,4.)) 
    fragColor = vec4(0,0,0,1); 

それは次のような結果を与える：あなたはそれらの細い線が気に入らない場合は

は、あなただけのイメージをアップスケーリングすることによって、それらを削除することができます。この行を追加することによって行うことができます。

// The .985 is 1/scale_factor. You can try to change it and see how it works. 
// It needs to be adjusted if you change frame thickness. 
pos = (pos - .5) * .985 + .5; 

---

この効果はよさそうだが、それだけではなく、かすかな影を追加するために賢くかもしれません。
同じ方程式を使用して実装するのは簡単です。pos.x * pos.y * (1.-pos.x) * (1.-pos.y)
この値は、ウィンドウの端で0.0から中央の0.5^4になります。
いくつかの簡単な計算を使用して、シャドウをウィンドウのエッジの近くでより厚くすることができます。
Here is an example of how it may look.
^{（Dualityからのスクリーンショット、Ludumのための私のエントリが35をあえて）私のシェーダを@HolyBlackCatする}