javascript - WebGLで長方形の領域をクリアするには?

Question

WebGL には、clearサーフェス全体をクリアするメソッドがあります。表面の特定の長方形だけをクリアする最良の方法は何ですか? たとえば、(50, 50) から始まる 100x100 ピクセルのボックスをすべてゼロ (ARGB 0, 0, 0, 0) に設定したいとします。今考えられるのは、ゼロを書き込むフラグメント シェーダーを使用してクワッドを描画することだけです。もっと簡単な方法はありませんか？

Answer 1

SCISSOR テストを使用して、クリア (および一般的なレンダリング) を四角形に制限できます。

// turn on the scissor test.
gl.enable(gl.SCISSOR_TEST);

// set the scissor rectangle.
gl.scissor(x, y, width, height);

// clear.
gl.clearColor(r, g, b, a);
gl.clear(gl.COLOR_BUFFER_BIT ...);

// turn off the scissor test so you can render like normal again.
gl.disable(gl.SCISSOR_TEST);

Answer 2

webgl コンテキスト内の場合はビューポートの外側にあるものはすべて描画され、シザーの外側にあるものはすべてクリップされ、まったく描画されません!