3

WebGLを使用して表示する簡単な効果を取得しようとしています。当然、これは、GLSLES1.0仕様で定義されているフラグメントシェーダー言語を使用していることを意味します。

私が使用しているコードは、主に他のソースからコピーされています。正方形を設定し、フラグメントシェーダーと頂点シェーダーを使用してピクセルの色を決定します。次のコードは、白い四角を表示するだけです。

gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);

ただし、アルファコンポーネントをに変更すると、1.0代わりに黒い四角が表示されます。

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // displays a black square

フラグメントシェーダーによって出力される色は、以前の色と組み合わせる必要があると思います。（アルファ値に関係なく）最後の色だけが実際に表示される色として選択されていることを確認するにはどうすればよいですか？

または、注文が間違っている可能性があります。おそらく、フラグメントシェーダーの色と組み合わせて白色を生成する後のフェーズがあります。いずれにせよ、アルファ値を0.5に変更すると灰色の四角が表示されるため、何らかのブレンドが行われていることはわかっています。知りたいのですが、白い色はどこから来ているのですか？そして、どうすればそれを取り除くことができますか？

私が知る限り、問題はブレンディング機能に関係していないことです。コードはここのGitHubにあります。GoogleChromeまたはFirefoxで試してみてください。

4

3 に答える 3

5

白い色は WebGLブレンド操作によるものではありません。これは、canvas DOM 要素が存在する Web ページと合成されるために発生します。canvas DOM 要素の背景色を黒に設定すると、問題が修正されます。この現象については、こちらに書かれています。ただし、最も決定的な答えはWebGL 仕様から得られます。合成の動作は、オブジェクトのさまざまな属性を設定することで定義できWebGLContextAttributesます。仕様からの引用：

オプションの WebGLContextAttributes オブジェクトを使用して、バッファーが定義されているかどうかを変更できます。また、カラー バッファにアルファ チャネルを含めるかどうかを定義するためにも使用できます。定義されている場合、アルファ チャネルは HTML コンポジターによって使用され、カラー バッファーがページの残りの部分と結合されます。

したがって、キャンバスの背景を黒に設定する必要のない別の解決策は、次の Javascript コードを使用して WebGL コンテキストを要求することです。

gl = canvas.getContext("experimental-webgl", { alpha: false } );
于 2011-05-31T03:27:17.467 に答える
4

コードを投稿していただけると助かりますが、フラグメントの色と白い背景をブレンドしているように見えます。

考えられる原因は、次のような WebGL 初期化コードです。

    gl.clearColor(1.0, 1.0, 1.0, 1.0);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.enable(gl.BLEND);

これにより、カラー バッファーのクリア カラーが白に初期化され、アルファ ブレンディングが有効になります。

したがって、問題を解決するには、ブレンドを有効にしないでください。つまり、gl.enable(gl.BLEND);ステートメントを失います。

更新: コードを投稿したので、問題は私が推測していたものとは逆のようです。設定したアルファに従って黒い背景が透けて見えるようにしたい場合はgl.disable(gl.BLEND)、

    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.enable(gl.BLEND);
于 2011-05-30T02:35:44.823 に答える
1

私はこのトピック（glsl、webglなど）について何も知りませんが、alphaそれはRGBA値だと私に思わせるとあなたは言いました。つまり、a0.0, 0.0, 0.0, 0.0は黒で、アルファカバレッジは0.0です。言い換えれば、完全に透明です。

0.0, 0.0, 0.0, 1.0アルファカバレッジが1.0の黒です。言い換えれば、完全に不透明です。出力は100％正しいようです。

上記が明確でない場合に備えて、明確にしておきます（私には混乱しているように見えました）。

最後の数字は色の透明度に影響を与えているだけで、最初の3つの数字はそれぞれ赤、緑、青に影響を与えています。

最大/最小値はわかりませんが、Webブラウザ（私の知識分野）では、色は0から255になります。0はその色ではなく、255はすべての色です。

したがって、あなたの場合、0赤、0緑、0青（これはちょうど黒）の正方形を要求しています。ただし、透明度（アルファチャネル）をゼロに設定すると、白としてレンダリングされます（または、より可能性が高いのは透明で、背後にあるものはすべて白です）。アルファ透明度を.5に設定すると、黒（0,0,0のように）がレンダリングされますが、半分しか表示されません。アルファ透明度を1.0に設定すると、完全に不透明な黒い正方形がレンダリングされます。

わかる？

于 2011-05-28T06:18:17.763 に答える