Ошибка WebGL blendFunc или недоразумение?

Я пытаюсь нарисовать полупрозрачный черный треугольник на черном фоне.

введите здесь описание изображения

Вот мой образец: http://codewithoutborders.com/posted/blend.html

BlendFunc установлен и включен (строка 151):

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

Буфер очищается до черного (строка 129):

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Шейдер заполняет полупрозрачным черным цветом (строка 10):

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

Я ожидаю, что треугольник будет черным, поскольку в документах указано, что

result = {foreground}*sourceAlpha + {background}*(1-sourceAlpha)
       = (0,0,0,.5)*.5 + (0,0,0,1)*.5
       = (0,0,0,.75)

который черный, верно?

так откуда серый цвет?


person Spongman    schedule 19.07.2012    source источник


Ответы (1)


(Как неловко. Отвечая на свой вопрос через 3 минуты после публикации, но не до значительного выпадения волос)

серый происходит от белого фона HTML-страницы, просвечивающей после «пробивания» прозрачного на 3/4 отверстия через черный холст.

добавление

style="background:black;"

к тегу решает проблему.

[комментарий gman ниже, это лучшее решение]

person Spongman    schedule 19.07.2012
comment
Вы также можете создать свой холст без альфы, используя canvas.getContext(experimental-webgl, {alpha:false}); - person gman; 19.07.2012
comment
как рассчитывается серый цвет? - person Philippe Oceangermanique; 27.07.2021