Texture Blending - Revision history

Justin113D: Spelling

2025-08-22T18:10:03Z

Spelling

← Older revision		Revision as of 18:10, 22 August 2025
Line 115:		Line 115:
	\|}		\|}

	== Detail ~~Blending~~ ==		== Detail blending ==
	Detail textures are used to add extra detail to a color texture, usually used with with [[#Distance Blending\|distance blending]].		Detail textures are used to add extra detail to a color texture, usually used with with [[#Distance Blending\|distance blending]].

Justin113D: Provided more info on interpolation

2025-08-21T13:12:38Z

Provided more info on interpolation

← Older revision		Revision as of 13:12, 21 August 2025
Line 12:		Line 12:
	* <code>a</code> will be 25% visible, and <code>b</code> will be 75% visible when <code>x</code> is <code>0.75</code>		* <code>a</code> will be 25% visible, and <code>b</code> will be 75% visible when <code>x</code> is <code>0.75</code>
	and so fourth.		and so fourth.

			Textures that provide a blend factor are usually referred to as "masks".

	[[File:LinearInterpolationExample.png\|frame\|center\|alt=An example of how linear interpolation is used to blend two textures together\|thumb\|An example of how linear interpolation is used to blend two textures together]]		[[File:LinearInterpolationExample.png\|frame\|center\|alt=An example of how linear interpolation is used to blend two textures together\|thumb\|An example of how linear interpolation is used to blend two textures together]]

			As you can see, this behavior is basically like using the mask texture as the second images alpha channel, and then overlaying them.

	=== Smoothstep ===		=== Smoothstep ===

Justin113D: Wording

2025-08-20T21:28:02Z

Wording

← Older revision		Revision as of 21:28, 20 August 2025
Line 86:		Line 86:
	\|}		\|}

	=== Distance ~~Blending~~ ===		=== 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.		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.

Justin113D: Updated linear interpolation section

2025-08-20T10:56:58Z

Updated linear interpolation section

← Older revision		Revision as of 10:56, 20 August 2025
Line 5:		Line 5:
	== Interpolation ==		== Interpolation ==

	Interpolation uses a "blend factor" parameter to decide which of two textures should be more visible.		Interpolation, specifically <b>linear interpolation</b> (or "lerping") uses a "blend factor" parameter to decide which of two textures should be more visible.
	<br/> When "Interpolating from <code>a</code> to <code>b</code> using <code>x</code>" then		<br/> When "Interpolating from <code>a</code> to <code>b</code> using <code>x</code>" then
	* <code>a</code> will be 100% visible when <code>x</code> is <code>0</code>		* <code>a</code> will be 100% visible when <code>x</code> is <code>0</code>
Line 12:		Line 12:
	* <code>a</code> will be 25% visible, and <code>b</code> will be 75% visible when <code>x</code> is <code>0.75</code>		* <code>a</code> will be 25% visible, and <code>b</code> will be 75% visible when <code>x</code> is <code>0.75</code>
	and so fourth.		and so fourth.

			[[File:LinearInterpolationExample.png\|frame\|center\|alt=An example of how linear interpolation is used to blend two textures together\|thumb\|An example of how linear interpolation is used to blend two textures together]]

	=== Smoothstep ===		=== Smoothstep ===

	~~When~~ "interpolating"~~, usually this~~ refers to "linearly interpolating" ~~(or "lerping")~~, but there are non-linear ways to interpolate between two textures too.		Usually "interpolating" refers to "linearly interpolating", 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").		The most common non-linear way to interpolate is by using "smooth Hermite interpolation" (often referred to as just "smoothstep").

Justin113D: Formatting

2025-08-20T10:46:50Z

Formatting

← Older revision		Revision as of 10:46, 20 August 2025
Line 40:		Line 40:

	[[File:DirectionalBlending.png\|center\|frame\|Directional blending in action]]		[[File:DirectionalBlending.png\|center\|frame\|Directional blending in action]]

			==== Variables ====

	The blend factor can also be altered by various variables that game-shaders usually make use of:		The blend factor can also be altered by various variables that game-shaders usually make use of:
Line 58:		Line 60:
	\|-		\|-
	\| <b>Blend intensity</b>		\| <b>Blend intensity</b>
	\| Changes how quickly the factor reaches a value of 1; Works similar to the bias, where 0.5 is the unchanging "center".		\| Changes how quickly the blend factor reaches a value of 1; <br/>Works similar to the bias, where 0.5 is the unchanging "center".
	\|-		\|-
	\| <b>Blend offset</b>		\| <b>Blend offset</b>
	\| A value added after all other parameters that moves the "starting point" of the factor.		\| A value added after all other parameters that moves the "starting point" of the factor.
	\|}		\|}

			{{notice
			\|type=warn
			\|content=This variable-model has been based off how Shadow Generations directional blend shaders work
			}}

			==== Examples ====

	{\| class="wikitable" style="width: 100%"		{\| class="wikitable" style="width: 100%"

Justin113D: Added directional blending

2025-08-20T10:42:56Z

Added directional blending

@@ Line 31: / Line 31: @@
 === Directional blending ===
-TODO
+Directional blending involves using the [[Normal_mapping#What_are_normals?|normal directions]] of a model and a "target direction" to then calculate the angle between those two directions and using that as the blending factor for interpolate between two textures.
 === Distance Blending ===

Justin113D: Corrected grammar

2025-08-20T08:48:15Z

Corrected grammar

← Older revision		Revision as of 08:48, 20 August 2025
Line 61:		Line 61:
	Detail textures are used to add extra detail to a color texture, usually used with with [[#Distance Blending\|distance blending]].		Detail textures are used to add extra detail to a color texture, usually used with with [[#Distance Blending\|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. ~~COlor~~ darker than this gray will darken the main texture, and lighter ones will brighten it.		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.

	[[File:DetailBlendExample.png\|frame\|center\|<br/><code>w13_dtd_floor02_dfsp_y_mm1_abd</code> and <code>w13_dtd_floor02_dfsp_y_mm1_detail_abd</code> from Shadow Generations being combined using detail blending]]		[[File:DetailBlendExample.png\|frame\|center\|<br/><code>w13_dtd_floor02_dfsp_y_mm1_abd</code> and <code>w13_dtd_floor02_dfsp_y_mm1_detail_abd</code> from Shadow Generations being combined using detail blending]]

Justin113D: Added normal and detail blending

2025-08-19T17:22:29Z

Added normal and detail blending

@@ Line 39: / Line 39: @@
 == Normal map blending ==
-TODO
+This is used to combine two normal maps:
 == Detail Blending ==
-TODO
+Detail textures are used to add extra detail to a color texture, usually used with with [[#Distance Blending|distance blending]].

Justin113D: Added first page version

2025-08-18T20:02:40Z

Added first page version

New page

= 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.
<br/> When "Interpolating from <code>a</code> to <code>b</code> using <code>x</code>" then
* <code>a</code> will be 100% visible when <code>x</code> is <code>0</code>
* <code>b</code> will be 100% visible when <code>x</code> is <code>1</code>
* <code>a</code> will be 50% visible, and <code>b</code> will be 50% visible when <code>x</code> is <code>0.5</code>
* <code>a</code> will be 25% visible, and <code>b</code> will be 75% visible when <code>x</code> is <code>0.75</code>
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").

{| class="wikitable" style="width: 90%; margin: auto;"
|-
|style="width: 30%"|[[File:SmoothstepGraph.png|256px|center|A graph with a linear and a smoothstep curve]]
|style="width: 30%"|[[File:SmoothstepGradientComparison.png|256px|center]]
|style="width: 30%"|[[File:SmoothstepGradientComparison Spherical.png|256px|center]]
|-
|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 ==
TODO

== Detail Blending ==
TODO