WebGL drawing 2d объектов с различными режимами смешивания

Question

Я пытаюсь выяснить, как делать режимы смешивания в WebGL. До сих пор я использовал родной HTML5 Canvas функции рисования, с помощью которого вы можете просто сделать, например:

var ctx = new Document.getElementById('canvas').getContext('2d'); 
ctx.globalCompositeOperation = 'lighter' 

Теперь я стараюсь, по соображениям производительности, порт это WebGL. Однако мне трудно понять, как я могу влиять на режим наложения в WebGL. Как я понял, шейдер Vertex решает, какие части различных текстур/полигонов видны, а затем формируется фрагментарный шейдер для каждого пикселя видимой части этих текстур/полигонов. Однако, если у меня есть режим смешивания, например, светлее (который берет верхнюю часть каждого из компонентов основного цвета и нового накладываемого цвета), я смущаюсь о роли шейдера вершин и шейдера фрагмента в этом дело.

Кроме того, в библиотеке Pixi.js, которую я использую для рисования с помощью WebGL прямо сейчас, я считаю, что вершинные и фрагментарные шейдеры вызывается только после того, как все объекты были нарисованы в фреймбуфере, другими словами: только после всех объектов помещены. (Шейдеры этой библиотеки могут быть найдены here)

Может ли кто-нибудь объяснить, как правильно использовать режимы смешивания в WebGL?

Answer 1

Vertex shader позиционирует все вершины в пространстве рисования и, при необходимости, передает certing переменные переменные в шейдер фрагмента.

Фрагмент-шейдер - это все вычисления об окончательном цвете пикселя/фрагмента.

Итак, где происходит смешение?

При визуализации сцены, есть конечный цвета буфер (фреймбуфер) и буфер глубина (renderbuffer). Цветовой буфер содержит значение RGBA для некоторого фрагмента в позиции (x, y) на экране, а буфер глубины содержит значение глубины для того же самого фрагмента.

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

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

Полезные ссылки:

• http://learningwebgl.com/blog/?p=859
• http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm (смешивания раздела)

Надеется, что это помогает.