Texture Blending

This page documents the different ways two textures can be blended.

Interpolation

Interpolation uses a "blend factor" parameter to decide which of two textures should be more visible.
When "Interpolating from a to b using x" then

a will be 100% visible when x is 0
b will be 100% visible when x is 1
a will be 50% visible, and b will be 50% visible when x is 0.5
a will be 25% visible, and b will be 75% visible when x is 0.75

and so fourth.

Smoothstep

When "interpolating", usually this refers to "linearly interpolating" (or "lerping"), but there are non-linear ways to interpolate between two textures too.

The most common non-linear way to interpolate is by using "smooth Hermite interpolation" (often referred to as just "smoothstep").

A graph with a linear and a smoothstep curve
A graph with a linear and a smoothstep curve	A linear gradient and the same gradient used as the blend factor when interpolating from black to white using smoothstep	A spherical gradient and the same gradient used as the blend factor when interpolating from black to white using smoothstep

Directional blending

TODO

Distance Blending

By using the distance between the camera and the surface to render as the blend factor, you can blend between textures depending on how far away the camera is.

Usually when doing this, a range is specified before which the blend factor is 0 and after which it is 1, e.g. starting to blend a texture in when 100 units away and making it fully visible at 50 units.

Normal map blending

This is used to combine two normal maps:

The math behind
Normal maps are combined like this using a simple function: float3 BlendNormals(float3 a, float3 b) { a += float3(0, 0, 1); b = float3(-1, -1, 1); return a dot(a, b) / a.z - b; }

Detail Blending

Detail textures are used to add extra detail to a color texture, usually used with with distance blending.

A detail textures default color is a perfect gray (RGB values of 0.5, or #808080), at which the color texture is applied to will not change. Colors darker than this gray will darken the main texture, and lighter ones will brighten it.

`w13_dtd_floor02_dfsp_y_mm1_abd` and `w13_dtd_floor02_dfsp_y_mm1_detail_abd` from Shadow Generations being combined using detail blending

The math behind

A detail texture is blended into a main texture using this function:

float3 BlendDetail(float3 main, float3 detail)
{
	float3 positive = detail * main * 2;
	float3 negative = 1 - (1 - detail) * ((1 - main) * 2);
	bool3 check = main < 0.5;
	
	return check ? positive : negative;
}