Hello everyone, this is my OpenGL ES advanced advanced series of articles, there is a corresponding project on my Github, welcome to follow, link: github.com/kenneycode/…

Today I’m going to introduce you to color blending in OpenGL, what is color blending? Color blending is combining two colors according to certain rules to get a new color. Let’s look at a picture:

For example, we have two colors, one is pure blue ARGB(255, 0, 0, 255), and the other is pure green ARGB(255, 0, 255, 0). When mixing, we take half of each to get the mixed color ARGB(255, 0, 127, 127). That’s the basic concept of color blending.

So when do you want to mix colors? Let’s take a look at the most common case where we render one texture with a transparent part onto another. What happens?

You might say, isn’t that obvious? The transparent part will reveal the base image, but if you render in OpenGL without blending, you’ll find something like this:

The transparent part does not reveal the bottom image. Why is this? Since color blending is turned off by default, when blending is turned off, rendering one color over another will completely overwrite the original color, resulting in a color with alpha zero that reveals the bottom layer of black.

Let’s look at how to use color blending to solve this problem. First we need to turn on color blending:

// Enable color blending
// Enable color blend
GLES30.glEnable(GLES30.GL_BLEND)
Copy the code

It is also necessary to set the mixing mode. The so-called mixing mode is to specify how to mix the source color (the color to be rendered) and the target color (the existing base color). For example, at the beginning of the article, the source color and target color are mixed in the way of 0.5, which can be expressed as follows:

Mix color = source color * source factor + target color * target factorCopy the code

OpenGL has a variety of built-in blending methods, which are set by glBlendFunc(). The first parameter is to set the source factor, and the second parameter is to set the target factor.

// Set the blending mode
// Set blend functions
GLES30.glBlendFunc(GLES30.GL_SRC_ALPHA, GLES30.GL_ONE_MINUS_SRC_ALPHA)
Copy the code

GL_SRC_ALPHA takes the alpha of the source color as the factor. GL_ONE_MINUS_SRC_ALPHA takes 1 minus the alpha of the source color as the factor. What effect does this get?

Let’s start by mixing the transparent part of the source color with the opaque part of the target color (base color). Suppose our target color is ARGB_DST=(1.0, a, B, c) and the source color is ARGB_SRC=(0.0, d, e, f).

At this time:

Color = ARGB_SRC *0.0 + ARGB_DST * (1.0 - 0.0) = ARGB_DST
Copy the code

Let’s look at the opaque part of the source color mixing with the opaque part of the target color (base color). Suppose our target color is ARGB_DST=(1.0, a, b, c) and the source color is ARGB_SRC=(1.0, d, e, f).

At this time:

Color = ARGB_SRC *1.0 + ARGB_DST * (1.0 - 1.0) = ARGB_SRC
Copy the code

So the effect is that the transparent part of the source image is exactly the color of the base image, which means that the base image is completely transparent, and the opaque part of the source image is exactly the color of the source image:

So you get the right result.

Let’s try GL_ONE again:

GLES30.glBlendFunc(GLES30.GL_ONE, GLES30.GL_ONE)
Copy the code

This is the

Color = ARGB_SRC *1.0 + ARGB_DST * 1.0
Copy the code

To see the effect:

There are a number of mixed mode can be set, specific can query the official document: www.khronos.org/registry/Op…

The built-in blending method sometimes fails to meet our requirements, such as implementing:

Blended color = source color *0.123+ Target color *0.877
Copy the code

In this case, the built-in mixing method cannot be implemented because the mixing factor cannot be arbitrarily set. You can implement it in the Fragment shader yourself.

The code is in my Github OpenGLESPro project, which corresponds to SampleColorBlend. The project link is: [github.com/kenneycode/…] (github.com/kenneycode/…

Thanks for reading!