web-dev-qa-db-ja.com

WebGLキャンバスを透明にする方法

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

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

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

opacity: 0.5;

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

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

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

csscanvastransparencywebglalpha
17
Jack Sean

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

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

14
Kevin Reid

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の他の場所には表示されないものが表示されます。

つまり、事前に乗算されたアルファとは、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コンテキストを作成するときに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は両方のオプションを提供します。

15
gman