いくつかの頂点をレンダリングして、もちろんそれらをフラグメントシェーダーに色付けするシェーダープログラムを実行しています。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
私もマスクのエッジをフェードインする必要があると思います。
ありがとうございます!
2回目のパスでどのような形状をレンダリングしますか? –
エッジが薄くなっているにもかかわらず、2次元のベクトル形状が描画されます。 今何をしようとしていますか?順序を入れ替え、アルファマップとしてテクスチャにシェイプをレンダリングし、最初のプログラムに渡します。 –