4

シーン内に多数の円が隣り合っています (白い円と異なる色の円)。白い丸だけぼかしたい。(私の場合、白は (1,1,1) を意味します。)

私の質問は、フラグメント シェーダーだけで白いフラグメントを選択してぼかすにはどうすればよいですか?

私はGLSLでこのようなことをしたい:

if (my_current_fragment's_color == white)
{blur current fragment;}
else
{do not blur current fragment}

(ぼかし効果が機能していますが、フラグメントの色に基づいてコードで決定を下すことができないため、シーン全体が不適切にぼかしられています。)

どうすればいいですか？上記の GLSL 言語のコードと正確に一致するものは何ですか? フラグメントの色が白かどうかを判断するにはどうすればよいですか? 皆さん、何か考えはありますか？

必要に応じて、ここに私のコードがあります：

    vertexShader: [
        //"#define KERNEL_SIZE 25.0",
        "uniform vec2 uImageIncrement;",
        "varying vec2 vUv;",
        "void main() {",
        "vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join("\n"),
    fragmentShader: [
        //"#define KERNEL_SIZE 25",
        "uniform float cKernel[ KERNEL_SIZE ];",
        "uniform sampler2D tDiffuse;",
        "uniform vec2 uImageIncrement;",
        "varying vec2 vUv;",
        "void main() {",
            "vec2 imageCoord = vUv;",
            "vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
            "for( int i = 0; i < KERNEL_SIZE; i ++ ) {",


            "sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
            //THE ABOVE LINE SHOULD BE RUN FOR WHITE FRAGMENTS ONLY. BUT HOW?


            "imageCoord += uImageIncrement;",
            "}",
            "gl_FragColor = sum;",
        "}"
4

1 に答える 1

8

これは非常に難しく、最初から白い円を別のフレーム バッファにレンダリングできない限り、ある程度の妥協点を見つけ出す必要があります。

これで始めるとしましょう。

青の背景にピンクの三角形の上に白い円

ぼかしカーネルを白いピクセルにのみ適用すると、次のようになります。

青い背景のピンクの三角形の上にぼやけたインテリアの白い円

青のピクセルはぼかしカーネルを取得しないため、白のピクセルが青に染み込むことはありません。ピンクとブルーのピクセルのみが白に染み込む可能性があります。

したがって、画像を白い部分と白い部分以外に分けようとします。

白丸 青い背景のピンクの三角形の上の黒い円

次に、白い部分を別々にぼかし、再結合できます (複数のステップで、またはすべて同じシェーダーで)。しかし、あなたはそれを何と再結合するかを考え出さなければなりません. 元の画像と再結合すると、ハード エッジの白が残ります。白以外の部分だけの画像と再結合すると、代わりにハードな黒のエッジが得られます。

青い背景のピンクの三角形の上に光輪のある白い円 青い背景のピンクの三角形の上に光輪と黒い縁がある白い円

ソリューション

  • 最初に白い円を別のテクスチャにレンダリングし、それをぼかして、他のすべての上に重ねることができます。

  • カーネルが「外側」にぼやける (膨張する) ようにカーネルをスケーリングできるため、黒い背景に対して白い円をぼかすと、白いピクセルは白いままになります。これでエッジがなくなります。

  • 白い円の近くの画像の領域をぼかすことができますが、正確には白い円と同じではありません。たとえば、ぼかした白い円をアルファ マスクとして使用して、ぼかした画像とシャープな画像をブレンドできます。

  • まず、白い円がぼやけて見えるようにする方法を見つけることができます。

于 2012-12-25T01:09:03.580 に答える