Как сделать прозрачный холст WebGL

Возможно ли иметь холст WebGL с прозрачным фоном? Я хочу, чтобы содержимое веб-страницы было видимым через холст.

Это то, что у меня есть сейчас: http://i50.tinypic.com/2vvq7h2.png

Как вы можете видеть, текст за холстом WebGL не отображается. Когда я изменяю стиль элемента Canvas в CSS и добавляю

opacity: 0.5;

Страница будет выглядеть так: http://i47.tinypic.com/302ys9c.png

Это почти то, что я хочу, но не полностью - цвет текста из-за настройки CSS-альфа, конечно, не такой же черный, а цвет синей формы не такой синий, как в первом изображении.

Спасибо за любую помощь!

Ответы

Ответ 1

WebGL по умолчанию поддерживает альфа-прозрачность, но вы должны использовать его. В основном, убедитесь, что перед тем, как выполнить операцию gl.clear, установите прозрачный цвет прозрачным, gl.clearColor(0, 0, 0, 0).

Если вы хотите получить полупрозрачные объекты, которые попадают в операции смешивания и отсортированный чертеж, но похоже, что вы просто хотите, чтобы незатянутая область была прозрачной, что для этого достаточно.

Ответ 2

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>