Как смешивание работает с фрагментными шейдерами GLSL ES в WebGL? - PullRequest
Новая
       55

Как смешивание работает с фрагментными шейдерами GLSL ES в WebGL?

3 голосов
/ 28 мая 2011

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

Код, с которым я работаю, в основном скопирован из других источников. Он устанавливает квадрат и использует фрагментные и вершинные шейдеры для определения цвета пикселей. Следующий код просто отобразит белый квадрат. 

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

Однако, если я изменю альфа-компонент на 1.0, вместо него будет показан черный квадрат. 

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // displays a black square

Я предполагаю, что цвет, который выводится фрагментным шейдером, должен быть объединен с некоторым предыдущим цветом. Как убедиться, что только последний цвет (независимо от его альфа-значения) является тем, который фактически выбран в качестве цвета для отображения?

Или, возможно, я неправильно понял приказ. Возможно, есть более поздняя фаза, которая объединяется с цветом из фрагментного шейдера для получения белого цвета. В любом случае я знаю, что происходит какое-то смешивание, потому что когда я изменяю значение альфа на 0,5, я получаю серый квадрат. Я просто хочу знать, откуда белый цвет? И как мне от этого избавиться?

Насколько я могу судить, проблема не в функции смешивания. Код есть на GitHub здесь . Попробуйте это в Google Chrome или Firefox.

Ответы [ 3 ]

5 голосов
/ 31 мая 2011

Белый цвет не исходит от операций WebGL blending . Это происходит потому, что элементы DOM canvas * совмещены с веб-страницей, в которой они находятся. Установка черного цвета фона DOM-элемента canvas для решения проблемы. Это явление было написано около здесь . Однако наиболее точный ответ приходит из спецификации WebGL . Поведение компоновки может быть определено путем установки различных атрибутов объекта WebGLContextAttributes. Цитирование из спецификации:

Необязательные атрибуты WebGLContextAttributes объект может быть использован для изменения или не буферы определены. Оно может также использоваться для определения того, является ли Цветовой буфер будет включать в себя альфа канал. Если определено, альфа-канал используется композитором HTML для объединить цветовой буфер с остальным страницы.

Таким образом, альтернативное решение, которое не включает в себя задание фона холста черным, заключается в запросе контекста WebGL со следующим кодом Javascript 

gl = canvas.getContext("experimental-webgl", { alpha: false } );
4 голосов
/ 30 мая 2011

Было бы полезно, если бы вы опубликовали код, но похоже, что вы смешиваете цвет фрагмента с белым фоном.

Возможным виновником может быть некоторый код инициализации WebGL, который выглядит следующим образом: 

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

, который инициализирует чистый цветовой буфер для белого цвета и включает альфа-смешение.

Итак, чтобы избавиться от проблемы, просто не включайте смешивание. Другими словами, потерять оператор gl.enable(gl.BLEND);.

Обновление: Теперь, когда вы опубликовали свой код, похоже, что ваша проблема противоположна тому, что я размышлял. Предполагая, что вы хотите, чтобы черный фон просвечивал в соответствии с установленным альфа-каналом, вы должны заменить gl.disable(gl.BLEND) на 

    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.enable(gl.BLEND);
1 голос
/ 28 мая 2011

Я ничего не знаю об этой теме (glsl, webgl и т. Д.), Но вы сказали alpha, что заставляет меня думать, что это значение RGBA. Таким образом, 0.0, 0.0, 0.0, 0.0 является черным с 0,0 альфа-покрытием. Другими словами, полностью прозрачный.

0.0, 0.0, 0.0, 1.0 черный с альфа-покрытием 1,0. Другими словами, совершенно непрозрачно. Похоже, что выход на 100% правильно.

Позвольте мне уточнить, на случай, если вышесказанное неясно (мне это показалось странным).

Последнее число просто влияет на прозрачность цвета, первые три числа влияют на красный, зеленый и синий соответственно.

Я не уверен в их максимальных / минимальных значениях, но в веб-браузерах (моя область знаний) цвета изменяются от 0 до 255. Где 0 - это не тот цвет, а 255 - это весь этот цвет.

Итак, в вашем случае вы запрашиваете квадрат с 0 красным, 0 зеленым и 0 синим (который просто черный). Однако, когда вы устанавливаете прозрачность (альфа-канал) на ноль, он отображается белым (или, что более вероятно, прозрачным, а все, что находится за ним, является белым). Когда вы устанавливаете альфа-прозрачность на .5, он делает черный (как 0,0,0 должен), но виден только наполовину Когда вы устанавливаете альфа-прозрачность на 1,0, он отображает полностью непрозрачный черный квадрат.

Имеет смысл?

...