19

透明な背景を持つWebGL キャンバスを持つことは可能ですか? キャンバスを通して Web ページのコンテンツを表示したいと考えています。

これは私が今持っているものです: http://i50.tinypic.com/2vvq7h2.png

ご覧のとおり、WebGL キャンバスの背後にあるテキストは表示されません。CSSでCanvas要素のスタイルを変更して追加すると

opacity: 0.5;

ページは次のようになります: http://i47.tinypic.com/302ys9c.png

これはほとんど私が望んでいるものですが、完全ではありません-CSSアルファ設定によるテキストの色はもちろん同じ黒ではなく、青い形の色は最初の写真と同じ青ではありません.

助けてくれてありがとう！

4

2 に答える 2

22

WebGL はデフォルトで透過的です。これがサンプルです

const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(0.5, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}
<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

ブラウザーは、キャンバス内のピクセルが PRE-MULTIPLIED-ALPHA 値を表していると想定していることに注意してください。つまり、たとえば、クリア カラーを (1, 0, 0, 0.5) に変更すると、HTML の他のどこにも見られないものが得られます。

つまり、Pre-multiplied alpha とは、RGB 部分が既にアルファ値で乗算されていることを意味します。したがって、RGB を 1,0,0 で開始し、アルファが 0.5 の場合。次に、RGB にアルファを掛けると、RGB は 0.5, 0, 0 になります。これは、ブラウザがデフォルトで期待するものです。

WebGL のピクセルが 1,0,0,0.5 の場合、ブラウザーにとって意味がなく、奇妙な効果が得られます。

例を参照してください

const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}
<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

0.5 のアルファ = 黒のテキストの 50% と赤の WebGL キャンバスの 50% と考えても、黒のテキストが赤くなっていることに注意してください。これは、赤が事前に乗算されていないためです。

これを解決するには、WebGL で作成する値が事前に乗算された値を表していることを確認するか、WebGL コンテキストを

const gl = canvas.getContext("webgl", { premultipliedAlpha: false });

1,0,0,0.5 ピクセルが再び機能するようになりました。例：

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
});
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}
<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

これをどのように行うかは、アプリケーション次第です。多くの GL プログラムは事前乗算されていないアルファを想定していますが、HTML5 の他のすべての部分は事前乗算されたアルファを想定しているため、WebGL は両方のオプションを提供します。

于 2012-09-05T22:14:43.080 に答える
16

WebGLはデフォルトでアルファ透過をサポートしていますが、それを使用する必要があります。gl.clearColor(0, 0, 0, 0)最も基本的には、操作の前に、クリアカラーを透明に設定していることを確認してくださいgl.clear。

半透明のオブジェクトを描画したい場合は、ブレンド操作とソートされた描画に入りますが、描画されていない領域を透明にしたいように見えます。これで十分です。

于 2012-09-05T16:56:51.180 に答える