Альфа рендеринг разница между OpenGL и WebGL

Question

Альфа рендеринг разница между OpenGL и WebGL

Я рендерил ту же сцену, используя тот же самый точный код C ++, один раз в нативный OpenGL в Windows и один раз используя Emscripten для WebGL. Все в сцене выглядит точно так же, за исключением случаев, когда я рендерину что-то с alpha! = 1.0. Разница выглядит так:

Синий куб цвет (0.0, 0.0, 1.0, 0.5)
Шейдер, используемый для рендеринга куба, ничего не делает, кроме рисования цвета.
Справа — то, как это выглядит с OpenGL, и это ожидаемый результат, просто синий с половиной прозрачности. Слева — как это выглядит с Emscripten + WebGL. Похоже, что цвет на самом деле (0.5, 0.5, 1.0, 0.5)

Функция наложения, которую я использую, является стандартной:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Есть ли какая-то разница с альфой в WebGL? Что может вызвать это?

7

c++emscripten opengl webgl

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы установили холст, чтобы он не был предварительно умножен?

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

По умолчанию для WebGL установлено значение true. По умолчанию для большинства приложений OpenGL установлено значение false

Вдобавок к этому WebGL составлен с остальной частью страницы. Как минимум, это цвет фона холста или того, что находится внутри (тело вашего документа).

Чтобы увидеть, если это проблема, попробуйте установить фоновый цвет вашего холста на фиолетовый или что-то, что будет выделяться

<canvas ... style="background-color: #F0F;"></canvas>

или в css

canvas { background-color: #F0F; }

Приложения OpenGL редко сочетаются с чем угодно, поскольку приложения WebGL эффективно ВСЕГДА сочиняются.

Некоторые решения

Выключить альфа

Если вам не нужна альфа в пункте назначения, вы можете отключить ее
```
gl = someCanvas.getContext("webgl", { alpha: false });
```
Теперь альфа будет эффективно 1
Установите альфа на 1 в конце кадра
```
// clear only the alpha channel to 1
gl.clearColor(1, 1, 1, 1);
gl.colorMask(false, false, false, true);
gl.clear(gl.COLOR_BUFFER_BIT);
```
не забудьте установить цветовую маску обратно на все true, если вам нужно
очистить буфер цвета позже
Установите цвет фона холста на черный
```
canvas { background-color: #000; }
```

Если возможно, я бы выбрал отключение альфа. Причина, если альфа отключена, возможно, браузер может отключить смешивание при рисовании холста в браузере. Это может быть увеличение скорости на 10-20% или более в зависимости от графического процессора. Нет никакой гарантии, что какой-либо браузер выполнит эту оптимизацию, только то, что это возможно, тогда как с двумя другими решениями это невозможно или, по крайней мере, гораздо менее вероятно

11