2017-12-14 32 views
0

いくつかの頂点をレンダリングして、もちろんそれらをフラグメントシェーダーに色付けするシェーダープログラムを実行しています。Webgl - 1つのプログラムを使用して前のプログラムをマスクします

私は以前のレンダリングからシェイプをマスクするために使いたい別のプログラムを実行しています。

これまでのところ、最初のものはこのような何かをレンダリングする:

animate_() { 
    requestAnimationFrame(() => this.animate_()); 

    this.gl_.clearColor(0, 0, 0, 0); 
    this.gl_.clear(webgl.COLOR_BUFFER_BIT); 

    this.gl_.useProgram(this.program_); 

    // Runs enableVertexAttribArray, bindBuffer, vertexAttribPointer 
    renderBufferAttribute(this.gl_, this.position_); 

    // Pass through all my uniforms here 
    // ... 

    // Draw triangles 
    this.gl_.drawArrays(webgl.TRIANGLES, 0, 
     this.particleCount_.total * PARTICLE_ARRAY_COUNT/2); 
} 

私は、このようにレンダリングし、第2のプログラムを持っている:

animate_() { 
    requestAnimationFrame(() => this.animate_()); 

    // this.gl_.clearColor(0, 0, 0, 0); 
    // this.gl_.clear(webgl.COLOR_BUFFER_BIT); 

    this.gl_.useProgram(this.program_); 

    renderBufferAttribute(this.gl_, this.position_); 

    this.gl_.drawArrays(webgl.TRIANGLES, 0, 6); 
} 

アイブ氏は、フラグメントシェーダですべての方向に不透明度を設定してみました上記のgl.clearColorとgl.clearを使用しますが、全体をクリアするか、色として設定します。

私はまた、2番目のプログラムの頂点シェーダのキャンバスの半分以上をレンダリングしてみましたが、まだ解決策を見つけることはできません。

また、両方のプログラムでこれらを使用して:

this.gl_.blendFunc(webgl.SRC_ALPHA, webgl.ONE_MINUS_SRC_ALPHA); 
this.gl_.enable(webgl.BLEND); 

がこのさえ可能ですか?

EDIT

私もマスクのエッジをフェードインする必要があると思います。

ありがとうございます!

+0

2回目のパスでどのような形状をレンダリングしますか? –

+0

エッジが薄くなっているにもかかわらず、2次元のベクトル形状が描画されます。 今何をしようとしていますか?順序を入れ替え、アルファマップとしてテクスチャにシェイプをレンダリングし、最初のプログラムに渡します。 –

答えて

0

フラグメントハードウェアからピクセルカラーを削除すると良いでしょうか? - それはまったくフレグメンダーを呼んでいない。

stencilFuncについて詳しくは、ステンシルのように機能し、フラグメントシェーダーの呼び出しを破棄することがあります。それで、「下にある」色を示すために

または一部のOpenGLバリアントについてはhereです。

+0

これはちょうどうまくいくようです。しかし、(私は言及に失敗した)私は実際にマスクの端をフェードする必要があります。ステンシルバッファは浮動小数点値を取ることができますか、それとも厳密に1とゼロを表示または非表示にすることができますか? –