OpenGL ES 2.0での画像とマスク

Question

私はOpenGL ES 2.0を学んでいます。その仕組みを理解するために、アプリケーションを作成したいと思います。 このアプリには、ユーザーが画像に適用できるフィルタのセットがあります（私は知っていますが、新しいものはありません：P）。このフィルタの

一つは、2枚の画像とマスクを取り、それは現時点では

を（より良い私が取得したいかを説明するためにここに画像）マスクを介してそれらを示す2枚の画像をミックス私は本当に混乱しており、どこからこの効果を生み出すのか分かりません。 私は複数のテクスチャと複数のFrameBuffersで作業する必要があるか、単一のシェーダでしか作業できないことは理解できません。

このプロジェクトで私を助けるヒントはありますか？

EDITは--------

私はこの解決策を見つけたが、私は代わりに、円のマスクラインとして使用する場合、結果はラインが回転している場合は特に、本当に「汚い」です。

precision highp float; 

varying vec4 FragColor; 
varying highp vec2 TexCoordOut; 

uniform sampler2D textureA; 
uniform sampler2D textureB; 
uniform sampler2D mask; 

void main(void){ 
    vec4 mask_color = texture2D(mask, TexCoordOut); 

    if (mask_color.a > 0.0){ 
     gl_FragColor = texture2D(textureA, TexCoordOut); 
    }else { 
     gl_FragColor = texture2D(textureB, TexCoordOut); 
    } 
} 

ステンシルバッファまたはブレンドを使用する方が良いでしょうか？

Answer 1

：

gl_FragColor = step(0.5, vMask.r) * vColor_1 + (1.0 - step(0.5, vMask.r)) * vColor_2; 

または、より良いをちょうど2つの色の間を補間：

gl_FragColor = mix(vColor_1, vColor_2, vMask.r); 

この場合、マスクは平滑化することができます（すなわち、ガウスぼかしで）エイリアシングを少なくします。これは、単一値の閾値化と比較して非常に良好な結果をもたらす。

Answer 2

複数のシェーダやフレームバッファ、複数のテクスチャユニットは必要ありません。 3つのテクスチャユニットを使用して、すべて同じテクスチャ座標でインデックスを作成し、マスクテクスチャを使用して他の2つのテクスチャを選択します。あなただけのレッドチャンネルでバイナリのテストを行うために第三のテクスチャユニットを使用することは非常に効率的ではないので、にマスクをエンコードする方が良いだろうことがわかります

uniform sampler2D uTextureUnit_1; 
uniform sampler2D uTextureUnit_2; 
uniform sampler2D uTextureMask; 
varying vec2 vTextureCoordinates; 

void main() 
{ 
    vec4 vColor_1 = texture2D(uTextureUnit_1, vTextureCoordinates); 
    vec4 vColor_2 = texture2D(uTextureUnit_2, vTextureCoordinates); 
    vec4 vMask = texture2D(uTextureMask, vTextureCoordinates); 

    if (vMask.r > 0.5) 
     gl_FragColor = vColor_1; 
    else 
     gl_FragColor = vColor_2; 
} 

：フラグメントシェーダは次のようになります。テクスチャ1または2のアルファチャンネルが表示されますが、これを開始する必要があります。あなたは高価なifを使用せずに1行でマスクを適用することができます