1

Introduction

JavaScript WebGL Using Image Doubt Point mentioned that two images are superimposed. By default, even if there is a transparent area, it will not be seen through. Now let's look at this transparent processing.

About transparency

Speaking of transparency, the alpha channel is responsible for the color coding, and the transparency is stored in the following ways:

  • Premultiplied Alpha: Indicates that the color information will be multiplied by the transparency information and RGB when it is stored. For example, if RGB is (1, 1, 1) and the transparency is 0.5, then it is stored as: (0.5, 0.5, 0.5, 0.5).
  • Non-premultiplied Alpha: Indicates that RGB and transparent information are stored separately and will not be multiplied. For example, if RGB is (1, 1, 1) and the transparency is 0.5, then the storage is: (1, 1, 1, 0.5)

WebGL texture preprocessing uses the pixelStorei method to specify the color transparency processing method, if you want to use the Premultiplied Alpha method:

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

One of the ways WebGL handles transparency is to use alpha blending.

alpha blend

Alpha blending is the process of mixing the colors of two or more objects using an alpha value (A in RGBA). In this scene, multiple textures are drawn and overlapped, assuming that texture C is drawn first, and then texture D is drawn, then texture D is the source color, and texture C is the destination color.

To use this feature, first enable:

gl.enable(gl.BLEND);

Then specify the way to mix:

blendEquation

void blendEquation(enum mode)

mode values of 061e4c6a9608df are:

  • FUNC_ADD : The source color component is added to the destination color component.
  • FUNC_SUBTRACT : Source color component minus destination color component.
  • FUNC_REVERSE_SUBTRACT : The destination color component minus the source color component.

This method only specifies the mixing method. If you want to see the final effect, you need to use it together blendFunc or blendFuncSeparate Take a look at the pseudocode logic at the bottom of article

This is example .

blendEquationSeparate

void blendEquationSeparate(enum modeRGB, enum modeAlpha)

The value of the two parameters of this method is the blendEquation method, the difference is that the color is divided into two separate parts: RGB and A.

blendFunc

void blendFunc(enum sfactor, enum dfactor);
  • sfactor : constant, the weight factor of the source color in the mixed color, one more value than dfactor SRC_ALPHA_SATURATE .
  • dfactor : constant, the weight factor of the target color in the mixed color.

Mixed colors are calculated as:

混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor

The calculation here is for each color component. The S code source color is set below, D represents the target color, and each component is represented by lowercase rgba. Let's take a look at the constant value of the weight factor part:

constantR componentG componentB componentA component
ZERO0000
ONE1111
SRC_COLORS.rS.gS.bS.a
ONE_MINUS_SRC_COLOR(1-S.r)(1-S.g)(1-S.b)(1-S.a)
DST_COLORD.rD.gD.bD.a
ONE_MINUS_DST_COLOR(1-D.r)(1-D.g)(1-D.b)(1-D.a)
SRC_ALPHAS.aS.aS.aS.a
ONE_MINUS_SRC_ALPHA(1-S.a)(1-S.a)(1-S.a)(1-S.a)
DST_ALPHAD.aD.aD.aD.a
ONE_MINUS_DST_ALPHA(1-D.a)(1-D.a)(1-D.a)(1-D.a)

There are also constant values that can be used with the method blendColor(red, green, blue, alpha)

constantR componentG componentB componentA component
CONSTANT_COLORredgreenbluealpha
ONE_MINUS_CONSTANT_COLOR(1-red)(1-green)(1-blue)(1-alpha)
CONSTANT_ALPHAalphaalphaalphaalpha
ONE_MINUS_CONSTANT_ALPHA(1-alpha)(1-alpha)(1-alpha)(1-alpha)

If you don't use blendColor specify components, you can also use these constants because there are default values:

gl.getParameter(gl.BLEND_COLOR) // 默认对应分量都是 0

About the value of the first parameter is SRC_ALPHA_SATURATE :

constantR componentG componentB componentA component
SRC_ALPHA_SATURATEmin(S.a, 1-D.a)min(S.a, 1-D.a)min(S.a, 1-D.a)1

The following are examples:

  • example without blendColor method.
  • blendColor with the example using the 061e4c6a96b9aa method.

blendFuncSeparate

void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)

The value of this method parameter blendFunc method parameter, the difference is that the color is divided into two separate parts: RGB and A.

References


XXHolic
363 声望1.1k 粉丝

[链接]