WebGLRenderingContext: метод blendFuncSeparate()

Базовая линия Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузера. Она доступна во всех браузерах с июля 2015 года.

Примечание: Эта функция доступна в Потоках веб-работы.

Метод WebGLRenderingContext.blendFuncSeparate() API WebGL определяет функцию, используемую для смешивания арифметики пикселей для RGB и альфа-компонентов отдельно.

Синтаксис

blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)

Параметры

srcRGB: Значение GLenum, определяющее множитель для смешивания красного, зеленого и синего (RGB) исходных факторов. Значение по умолчанию: gl.ONE. Возможные значения см. ниже.
dstRGB: Значение GLenum, определяющее множитель для смешивания красного, зеленого и синего (RGB) целевых факторов. Значение по умолчанию: gl.ZERO. Возможные значения см. ниже.
srcAlpha: Значение GLenum, определяющее множитель для смешивания альфа-исходного фактора. Значение по умолчанию: gl.ONE. Возможные значения см. ниже.
dstAlpha: Значение GLenum, определяющее множитель для смешивания альфа-целевого фактора. Значение по умолчанию: gl.ZERO. Возможные значения см. ниже.

Возвращаемое значение

Ничего (undefined).

Исключения

Если srcRGB, dstRGB, srcAlpha или dstAlpha не являются одним из перечисленных возможных значений, выбрасывается ошибка gl.INVALID_ENUM.
Если постоянный цвет и постоянное альфа-значение используются вместе как исходные (srcRGB) и целевые (dstRGB) факторы, выбрасывается ошибка gl.INVALID_ENUM.

Константы

Следующие константы могут быть использованы для srcRGB, dstRGB, srcAlpha и dstAlpha

Формулы для факторов смешивания можно описать так (все значения RGBA находятся в диапазоне от 0 до 1):

цвет(RGB) = (исходный цвет * srcRGB) + (целевой цвет * dstRGB)
цвет(A) = (исходный альфа * srcAlpha) + (целевой альфа * dstAlpha)

В следующей таблице R_S, G_S, B_S, A_S обозначают соответственно красный, зеленый, синий и альфа компонент источника, а R_D, G_D, B_D, A_D обозначают соответственно красный, зеленый, синий и альфа компонент назначения. Аналогично, R_C, G_C, B_C, A_C обозначают соответственно красный, зеленый, синий и альфа компонент константы цвета. Все они имеют значения от 0 до 1 включительно.

Константа	RGB-фактор	Альфа-фактор	Описание
`gl.ZERO`	0,0,0	0	Умножает все цвета на 0.
`gl.ONE`	1,1,1,1	1	Умножает все цвета на 1.
`gl.SRC_COLOR`	R_S, G_S, B_S	A_S	Умножает все цвета на цвета источника.
`gl.ONE_MINUS_SRC_COLOR`	1-R_S, 1-G_S, 1-B_S	1-A_S	Умножает все цвета на 1 минус каждый цвет источника.
`gl.DST_COLOR`	R_D, G_D, B_D	A_D	Умножает все цвета на цвет назначения.
`gl.ONE_MINUS_DST_COLOR`	1-R_D, 1-G_D, 1-B_D	1-A_D	Умножает все цвета на 1 минус каждый цвет назначения.
`gl.SRC_ALPHA`	A_S, A_S, A_S	A_S	Умножает все цвета на альфа-цвет источника.
`gl.ONE_MINUS_SRC_ALPHA`	1-A_S, 1-A_S, 1-A_S	1-A_S	Умножает все цвета на 1 минус альфа-цвет источника.
`gl.DST_ALPHA`	A_D, A_D, A_D	A_D	Умножает все цвета на альфа-цвет назначения.
`gl.ONE_MINUS_DST_ALPHA`	1-A_D, 1-A_D, 1-A_D	1-A_D	Умножает все цвета на 1 минус альфа-цвет назначения.
`gl.CONSTANT_COLOR`	R_C, G_C, B_C	A_C	Умножает все цвета на константу цвета.
`gl.ONE_MINUS_CONSTANT_COLOR`	1-R_C, 1-G_C, 1-B_C	1-A_C	Умножает все цвета на 1 минус константу цвета.
`gl.CONSTANT_ALPHA`	A_C, A_C, A_C	A_C	Умножает все цвета на константу альфа-значения.
`gl.ONE_MINUS_CONSTANT_ALPHA`	1-A_C, 1-A_C, 1-A_C	1-A_C	Умножает все цвета на 1 минус константу альфа-значения.
`gl.SRC_ALPHA_SATURATE`	min(A_S, 1 - A_D), min(A_S, 1 - A_D), min(A_S, 1 - A_D)	1	Умножает цвета RGB на меньшее из альфа-цвета источника или значения 1 минус альфа-цвет назначения. Значение альфа умножается на 1.

Примеры

Чтобы использовать функцию смешивания, вы сначала должны активировать смешивание с помощью WebGLRenderingContext.enable() с аргументом gl.BLEND.

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);

Чтобы получить текущую функцию смешивания, запросите константы BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, и BLEND_DST_ALPHA, которые возвращают одну из констант функции смешивания.

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true

Спецификации

Спецификация
Спецификация WebGL # 5.14.3

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`blendFuncSeparate`	9	12	4	12	5.1	25	4	12	8	1.5	4.4.3

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFuncSeparate