1

私は、WebGL でステンシル バッファーを半作業的に使用しています。これは Firefox では正常に動作しますが、Chrome (および Internet Explorer も同様) では失敗します。ステンシルが無視されることを除いて、アプリケーションの残りの部分は引き続きエラーなしで機能します。

左：Firefox、右：Chrome

ここでは、Firefox がステンシルを正しく作成しているため、緑色の長方形がレンダリングされ、穴が開いています。ここに jsFiddle のデモがあります: http://jsfiddle.net/XH9eC/3/

ステンシル モードをオンにして、カラー マスクをオフにします。

gl.colorMask(gl.FALSE, gl.FALSE, gl.FALSE, gl.FALSE);
gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);

次に、画面中央の正方形をレンダリングします

次に、ステンシル モードを変更し、色をオンにします。

gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.EQUAL, 0, 0xFF);
gl.stencilOp(gl.ZERO, gl.ZERO, gl.ZERO)

最後に緑の背景をレンダリングします。

重要な場合は、これが背景と正方形のステンシルをレンダリングするために使用するコードです (異なる頂点を使用するだけです)。

var background = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, background);
gl.vertexAttribPointer(position_location, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0,
    800, 600,
    0, 600,
    0, 0,
    800, 0,
    800, 600
]), gl.STATIC_DRAW);

私は他のコードでこの問題に遭遇しましたが、まだ修正していません。Chrome で使用されているステンシル バッファーの他の例を見てきました。

4

1 に答える 1

6

これは Firefox のバグのようです。このテストを Firefoxで実行し、成功するかどうかを確認します。

stencil:true次のように渡して WebGL コンテキストを作成するときに、ステンシル バッファーを要求する必要があるはずです。

    var gl = canvas.getContext("webgl", {stencil:true});

ステンシル バッファーを要求しても、ステンシル バッファーを取得できるとは限りません。使用できることを確認するには

    var contextAttributes = gl.getContextAttributes();
    var haveStencilBuffer = contextAttributes.stencil;
于 2014-06-23T19:16:55.887 に答える