In the previous article, we talked about the color calculation in Shader and introduced some basic color mixing calculations. However, in the actual Shader filter, the simple addition, subtraction, multiplication and division does not do a good job of restoring the desired effect, and mix() is only one option.
In retrospect, when I get the design manuscript from the designer, I can see that they have applied a lot of layer blending modes in Photoshop. Layer blending mode gives the designer a rich layer blending effect, greatly reducing their manipulation of color, and more naturally blending different layers.
Also, when we want to add different filters to the image through the Shader, the layer blend mode is very useful.
A, definitions,
First, let’s define what a mixed mode is:
Blending mode is a technical term in image processing technology, not only used in the widely used Photoshop, but also in After Effect, Illustrator, Dreamweaver, Fireworks and other software. The main effect is that the color of an object can be mixed with the color of the underlying object in different ways. When you apply a blend mode to an object, you can see the blend mode effect on any object below that object’s layer or group. — Baidu Encyclopedia
Adobe also specifically introduces the mixed mode of knowledge: helpx.adobe.com/cn/photosho…
Here is a brief list of the different mixing modes:
- Normal: Edit or draw each pixel to make it the result color. This is the default mode. (When working with bitmap images or indexed color images, the “normal” mode is also called threshold.)
- Dissolve: Edit or paint each pixel to make it a result color. However, depending on the opacity of any pixel position, the resulting color is randomly replaced by the primary or mixed color pixels.
- Darken: Look at the color information in each channel and select the darker color in the base or blend color as the result color. Replaces pixels that are brighter than the blend color, while pixels that are darker than the blend color remain the same.
- Multiply: View the color information in each channel and Multiply the primary color and mixed color. The resulting color is always a darker color. Any color multiplied with black produces black. Any color with the white multiply stays the same. When you draw with a color other than black or white, the continuous strokes drawn by the drawing tool produce a gradually darkening color. This is similar to the effect of drawing on an image with multiple marker pens.
- Color Burn: Look at the Color information in each channel and darken the base Color to reflect the blend Color by increasing the contrast between the two. No change is produced when mixed with white.
- Linear Burn: Look at the color information in each channel and darken the base color to reflect the blend color by reducing the brightness. No change is produced when mixed with white.
- Darker Color: compares the sum of all channel values of the blend Color and the base Color and shows the Color with the lower value. “Dark color” does not generate a third color (which can be obtained by “darkening” blending) because it will select the smallest channel value from the primary and blend colors to create the resulting color.
- Lighten: Look at the color information in each channel and select the lighter color in the base or blend color as the result color. Pixels darker than the blend color are replaced, and pixels brighter than the blend color remain unchanged.
- Screen: View the color information of each channel, and multiply the complementary color of the mixed color with the primary color. The resulting color is always brighter. The color stays the same when filtered with black. Filtering with white will produce white. The effect is similar to multiple photographic slides projected on top of each other.
- Color Dodge: Looks at the Color information in each channel and lightened the base Color to reflect the blend Color by reducing the contrast between the two. Nothing happens when mixed with black.
- Linear Dodge: Looks at the color information in each channel and brights the base color to reflect the blend color by adding brightness. Nothing happens when mixed with black.
- Lighter Color: Compares the sum of all channel values for the blend and base colors and displays the colors with larger values. “Light color” does not generate a third color (which can be obtained by “lightening” blending) because it will select the maximum channel value from the primary and blend colors to create the resulting color.
- Overlay: Overlay or filter of a color, depending on the base color. A pattern or color is superimposed on an existing pixel while retaining the chiaroscere of the primary color. The primary color is not replaced, but the primary color is mixed with the blend color to reflect the brightness or darkness of the primary color.
- Soft Light: Darkens or lightens a color, depending on the blend color. The effect is similar to that of a diffuse spot light shining on an image. If the blend color (light source) is brighter than the 50% gray, the image is lighter, as if it had been dosed. If the blend color (light source) is darker than 50% gray, the image will be darker, as if it had been deepened. Using pure black or pure white coloring can produce significantly darker or lighter areas, but can not produce pure black or pure white.
- Hard Light: Multiply or filter colors, depending on the color mix. The effect is similar to a dazzling spotlight shining on an image. If the blend color (the light source) is brighter than the 50% gray, the image is brighter, like a filtered effect. This is useful for adding highlights to an image. If the blend color (light source) is darker than 50% gray, the image will be darker, just like the effect after multiply. This is useful for adding shadows to images. Coloring with solid black or white produces solid black or white.
- Vivid Light: Darkens or dulls colors by increasing or decreasing the contrast, depending on the blend color. If the blend color (light source) is brighter than 50% gray, the image is brightened by reducing contrast. If the blend color is darker than 50% gray, darken the image by increasing contrast.
- Linear Light: Darkens or dulls colors by reducing or increasing their brightness, depending on the blend color. If the blend color (light source) is brighter than 50% gray, the image is brightened by increasing brightness. If the blend color is darker than 50% gray, the image is darkened by reducing the brightness.
- Pin Light: Replace the color according to the blend color. If the blend color (light source) is brighter than 50% gray, the pixel darker than the blend color is replaced, leaving the pixel brighter than the blend color unchanged. If the blend color is darker than 50% gray, the pixel lighter than the blend color is replaced, while the pixel darker than the blend color remains unchanged. This is useful for adding special effects to images.
- Hard Mix: Adds the red, green, and blue channel values of the blended colors to the RGB values of the base colors. 255 if the sum of the results of the channel is greater than or equal to 255; If less than 255, the value is 0. Therefore, the red, green, and blue channel values for all mixed pixels are either 0 or 255. This mode changes all pixels to the primary additive color (red, green, or blue), white, or black.
- Difference: Looks at the color information in each channel and subtracts the blend color from the base color, or the base color from the blend color, depending on which color has the greater brightness value. Mixing with white reverses the primary color value; Mix it with black and you get no change.
- Exclusion: Create an effect similar to the “Difference” mode but with lower contrast. Mixing with white reverses the base color value. Nothing happens when mixed with black.
- Subtract: View the color information in each channel and Subtract the mixed color from the primary color. In 8-bit and 16-bit images, any generated negative values are clipped to zero.
- Divide: View the color information in each channel and Divide the mixed color from the primary color.
- Hue: Creates a result color using the lightness and saturation of the primary color and the Hue of the mixed color.
- Saturation: Use the brightness and hue of the primary color and the Saturation of the mixed color to create the resulting color. Painting with this mode on an area with no (0) saturation (grayscale) does not produce any changes.
- Color: Create a result Color using the brightness of the primary Color and the hue and saturation of the mixed colors. This preserves the grayscale in the image and is useful for coloring monochrome images as well as color images.
- Luminosity: Creates the resulting colors with the hue and saturation of the primary colors and the brightness of the mixed colors. This mode creates the opposite effect to the Color mode.
IO /glsl-blend/ jamieowen.github.
Second, the use of
Happily, we don’t have to repeat the above logic, the Github repository already helps us implement most of the hybrid modes: github.com/jamieowen/g… Shader can see directly:
When do I need a layer blend mode? Here’s an example of tiktok, and you can see a special effect called “neon” at the bottom of the video:
In practice, the effect looks like this:
So how can we do that? First, create a neon effect, which is simply a circle with feathered edges, like this:
// Encapsulates a function
vec3 drawLeaks(vec2 _uv, vec2 position, vec2 speed, vec2 size, vec3 resolution, vec3 color, float t, vec2 range) {
vec2 leakst = _uv;
vec2 newsize = normalize(size);
newsize /= abs(newsize.x) + abs(newsize.y);
leakst -= . 5; // Center frame
leakst.x *= resolution.x/resolution.y; // Equal scale
leakst.x -= position.x; // Adjust the position of x
leakst.y -= position.y; // Adjust the position of y
leakst.x -= speed.x * t * 10.; // Speed x
leakst.y -= speed.y * t * 10.; // Speed y
if (newsize.x < newsize.y) // Adjust the size ratio
leakst.y *= newsize.x / newsize.y;
if (newsize.x > newsize.y)
leakst.x *= newsize.y / newsize.x;
float angle = atan(leakst.y, leakst.x); // Cartesian polar coordinates
float radius = length(leakst);
vec3 finalColor = vec3(smoothstep(range.x, range.y, radius))*color*(1.-t); // Presets size& color
return finalColor;
}
void main() {
vec3 leakColor = drawLeaks(myst, vec2(. 0.. 0), vec2(. 0.. 0),
vec2(. 0.. 0), iResolution,
vec3(166./255..66./255..65./255.) *1.5.0..vec2(3..0.));
gl_FragColor = vec4(leakColor, 1.);
}
Copy the codeThe effect is as follows:
At this point, this effect can be thought of as a “Layer” in Photoshop. We will call it the Blend Layer. Then we need to add a Base Layer for the Blend.
// Only the main code is shown here
void main() {
vec3 leakColor = drawLeaks(myst, vec2(. 0.. 0), vec2(. 0.. 0),
vec2(. 0.. 0), iResolution,
vec3(166./255..66./255..65./255.) *1.5.0..vec2(3..0.));
vec3 texelColor = texture2D(texure, myst).rgb;
gl_FragColor = vec4(leakColor + texelColor, 1.);
}
Copy the code
It looks fine, but if the Base Layer is on a white background, there are some problems:
Due to the addition, the color mix will eventually be closer to the brightest color. When any color is added to a white background, it will become brighter and brighter, without the original filter color. The addition can’t work on both dark and white bases. Multiplication? To multiply, you must first change the Blend Layer to a white base (otherwise any color multiplied with a black base is black) :
void main() {
vec3 leakColor = drawLeaks(myst, vec2(. 0.. 0), vec2(. 0.. 0),
vec2(. 0.. 0), iResolution,
vec3((255.- 255.) /255., (255.- 95.) /255., (255.- 32.) /255.), 0..vec2(3..0.));
gl_FragColor = vec4(leakColor, 1.);
}
Copy the code
Then use the multiplication (it’s not pretty, but it’s colored) :
Let’s take a look at the dark background:
To put it simply, calculating color by multiplication is actually a subtractive operation. The color blend only gets darker, and the filters don’t give you a more vibrant performance. So no matter add or multiply, there is no way to blend the filter with the base image. That’s why the layer blend mode is so important.
When designers get their hands on Blend Layer and Base Layer, they will not hesitate to add a “filter” mode to the Blend Layer. The reason why they do this is often due to their understanding of the Blend mode and their daily practice. As engineers, they do not reach their sixth sense.
View the color information for each channel and multiply the complementary color of the mixed color with the primary color. The resulting color is always brighter. The color stays the same when filtered with black. Filtering with white will produce white. The effect is similar to multiple photographic slides projected on top of each other.
The implementation of the filter looks like this:
float blendScreen(float base, float blend) {
return 1.0- ((1.0-base)*(1.0-blend));
}
Copy the codeIn simple terms, the filter is to remove the darker color from the two layers and take the lighter color. Let’s try:
float blendScreen(float base, float blend) {
return 1.0- ((1.0-base)*(1.0-blend));
}
vec3 blendScreen(vec3 base, vec3 blend) {
return vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));
}
void main() {
vec3 leakColor = drawLeaks(myst, vec2(. 0.. 0), vec2(. 0.. 0),
vec2(. 0.. 0), iResolution,
vec3((255.- 255.) /255., (255.- 95.) /255., (255.- 32.) /255.), 0..vec2(3..0.));
vec3 texelColor = texture2D(texture, myst).rgb;
gl_FragColor = vec4(blendScreen(texelColor, leakColor), 1.);
}
Copy the code
The effect was as expected. In fact, the same is true for the “neon” effect we get on Tiktok: the effect is less pronounced on a light base and more pronounced on a dark base. So it’s easy to guess that tiktok’s effect was also filtered to add the neon effect.
Iii. Application Scenario
This is a simple example of blending modes. In fact, with these layer blending modes, we can get a batch of filter effects that can directly line up. However, not all situations are suitable for layer blending. For example, in transitions, mix() is better for blending between two layers.
Layer blend mode is more suitable for situations where local effect + background solid color needs to be applied to a specific image. For example, here is an example, and another example is Light Leak:
Or Lens flare:
