Blending functions - Revision history

Millennium: /* Category 3 (Complex) */

2015-10-14T12:03:33Z

‎Category 3 (Complex)

Millennium: /* Category 3 (Complex) */

2015-09-10T18:22:22Z

‎Category 3 (Complex)

Haiddasalami: Created page with "Here are all the Photoshop Blending Modes, in easy to use functions for various languages. ==HLSL== ===Category 1 (Darker)===

float4 Darken (float4 cBase, float4 cBlend)..."

2014-08-06T19:49:45Z

Created page with "Here are all the Photoshop Blending Modes, in easy to use functions for various languages. ==HLSL== ===Category 1 (Darker)=== <pre>float4 Darken (float4 cBase, float4 cBlend)..."

New page

Here are all the Photoshop Blending Modes, in easy to use functions for various languages.

==HLSL==
===Category 1 (Darker)===
<pre>float4 Darken (float4 cBase, float4 cBlend)
{
float4 cNew;
cNew.rgb = min(cBase.rgb, cBlend.rgb);
cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 Multiply (float4 cBase, float4 cBlend)
{
return (cBase * cBlend);
}</pre>

<pre>float4 ColorBurn (float4 cBase, float4 cBlend)
{
return (1 - (1 - cBase) / cBlend);
}</pre>

<pre>float4 LinearBurn (float4 cBase, float4 CBlend)
{
return (cBase + cBlend - 1);
}</pre>

===Category 2 (Lighter)===
<pre>float4 Lighten (float4 cBase, float4 cBlend)
{
float4 cNew;
cNew.rgb = max(cBase.rgb, cBlend.rgb);
cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 Screen (float4 cBase, float4 cBlend)
{
return (1 - (1 - cBase) * (1 - cBlend));
}</pre>

<pre>float4 ColorDodge (float4 cBase, float4 cBlend)
{
return (cBase / (1 - cBlend));
}</pre>

<pre>float4 LinearDodge (float4 cBase, float4 cBlend)
{
return (cBase + cBlend);
}</pre>

===Category 3 (Complex)===
<pre>float4 Overlay (float4 cBase, float4 cBlend)
{
/*
float4 cNew;
if (cBase.r > .5) { cNew.r = 1 - (1 - 2 * (cBase.r - .5)) * (1 - cBlend.r); }
else { cNew.r = (2 * cBase.r) * cBlend.r; }

if (cBase.g > .5) { cNew.g = 1 - (1 - 2 * (cBase.g - .5)) * (1 - cBlend.g); }
else { cNew.g = (2 * cBase.g) * cBlend.g; }

if (cBase.b > .5) { cNew.b = 1 - (1 - 2 * (cBase.b - .5)) * (1 - cBlend.b); }
else { cNew.b = (2 * cBase.b) * cBlend.b; }

cNew.a = 1.0;
return cNew;
*/
// Vectorized (easier for compiler)
float4 cNew;

// overlay has two output possbilities
// which is taken is decided if pixel value
// is below half or not

cNew = step(0.5,cBase);

// we pick either solution
// depending on pixel

// first is case of < 0.5
// second is case for >= 0.5

// interpolate between the two,
// using color as influence value
cNew= lerp((cBase*cBlend*2),(1.0-(2.0*(1.0-cBase)*(1.0-cBlend))),cNew);

cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 SoftLight (float4 cBase, float4 cBlend)
{
float4 cNew;
if (cBlend.r > .5) { cNew.r = cBase.r * (1 - (1 - cBase.r) * (1 - 2 * (cBlend.r)));}
else { cNew.r = 1 - (1 - cBase.r) * (1 - (cBase.r * (2 * cBlend.r))); }

if (cBlend.g > .5) { cNew.g = cBase.g * (1 - (1 - cBase.g) * (1 - 2 * (cBlend.g)));}
else { cNew.g = 1 - (1 - cBase.g) * (1 - (cBase.g * (2 * cBlend.g))); }

if (cBlend.g > .5) { cNew.b = cBase.b * (1 - (1 - cBase.b) * (1 - 2 * (cBlend.b)));}
else { cNew.b = 1 - (1 - cBase.b) * (1 - (cBase.b * (2 * cBlend.b))); }

cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 HardLight (float4 cBase, float4 cBlend)
{
float4 cNew;
if (cBlend.r > .5) { cNew.r = 1 - (1 - cBase.r) * (1 - 2 * (cBlend.r)); }
else { cNew.r = cBase.r * (2 * cBlend.r); }

if (cBlend.g > .5) { cNew.g = 1 - (1 - cBase.g) * (1 - 2 * (cBlend.g)); }
else { cNew.g = cBase.g * (2 * cBlend.g); }

if (cBlend.b > .5) { cNew.b = 1 - (1 - cBase.b) * (1 - 2 * (cBlend.b)); }
else { cNew.b = cBase.b * (2 * cBlend.b); }

cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 VividLight (float4 cBase, float4 cBlend)
{
float4 cNew;
if (cBlend.r > .5) {cNew.r = 1 - (1 - cBase.r) / (2 * (cBlend.r - .5)); }
else {cNew.r = cBase.r / (1 - 2 * cBlend.r); }

if (cBlend.g > .5) {cNew.g = 1 - (1 - cBase.g) / (2 * (cBlend.g - .5)); }
else {cNew.g = cBase.g / (1 - 2 * cBlend.g); }

if (cBlend.b > .5) {cNew.b = 1 - (1 - cBase.b) / (2 * (cBlend.b - .5)); }
else {cNew.b = cBase.b / (1 - 2 * cBlend.b); }

cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 LinearLight (float4 cBase, float4 cBlend)
{
float4 cNew;
if (cBlend.r > .5) {cNew.r = cBase.r + 2 * (cBlend.r - .5); }
else {cNew.r = cBase.r + 2 * cBlend.r - 1; }

if (cBlend.g > .5) {cNew.g = cBase.g + 2 * (cBlend.g - .5); }
else {cNew.g = cBase.g + 2 * cBlend.g - 1; }

if (cBlend.b > .5) {cNew.b = cBase.b + 2 * (cBlend.b - .5); }
else {cNew.b = cBase.b + 2 * cBlend.b - 1; }

cNew.a = 1.0;
return cNew;
}</pre>

<pre>float4 PinLight (float4 cBase, float4 cBlend)
{
float4 cNew;
if (cBlend.r > .5) { cNew.r = max(cBase.r, 2 * (cBlend.r - .5)); }
else {cNew.r = min(cBase.r, 2 * cBlend.r); }

if (cBlend.g > .5) { cNew.g = max(cBase.g, 2 * (cBlend.g - .5)); }
else {cNew.g = min(cBase.g, 2 * cBlend.g); }

if (cBlend.b > .5) { cNew.b = max(cBase.b, 2 * (cBlend.b - .5)); }
else {cNew.b = min(cBase.b, 2 * cBlend.b); }

cNew.a = 1.0;
return cNew;
}</pre>

===Category 4 (Comparison)===
<pre>float4 Difference (float4 cBase, float4 cBlend)
{
return (abs(cBase - cBlend));
}</pre>

<pre>float4 Exclusion (float4 cBase, float4 cBlend)
{
return (.5 - 2 * (cBase - .5) * (cBlend - .5));
}</pre>

[[Category:HLSL]][[Category:Shaders]][[Category:Rendering]][[Category:Code]][[Category:Functions]]

@@ Line 68: / Line 68: @@
 </pre>
-As we see the result values of R, G and B components (except for alpha) for this blending mode depends on it's base layer initial values
+As we see the result values of R, G and B components (except for alpha) for this blending mode depend on it's base layer initial values
 <pre>
 	if (baseColor > .5) then {
@@ Line 82: / Line 82: @@
 </pre>
-Actually we don't want newColor to gradually change between A and B, but only switch A <-> B, so interpolation_value should be strictly equal to 0 or 1. And here is where the [https://msdn.microsoft.com/en-us/library/windows/desktop/bb509665(v=vs.85).aspx step(x, y)] function come in. The equivalent for '''step''' functionality is:
+Actually we don't want newColor to gradually change between A and B, but only switch A <-> B, so interpolation_value must be strictly equal to 0 or 1. And here is where the [https://msdn.microsoft.com/en-us/library/windows/desktop/bb509665(v=vs.85).aspx step(x, y)] function comes in. The equivalent for '''step''' functionality is:
 <pre>
 	float step(x, y) {
@@ Line 93: / Line 93: @@
 </pre>
-Apparently, if it's required to invert output values, just change the order of '''step''' input arguments. Let's assembly all the information we've found out and re-write our shader:
+Apparently, if it's required to invert output values, we just should change the order of '''step''' input arguments. Let's assembly all the information we've found out and re-write our shader:
 <pre>
 	float isLessOrEq = step(cBase, 0.5);
@@ Line 107: / Line 107: @@
 </pre>
-P.P.S. Although compiler will do this work for you at the optimization stage, keep in mind that explicit declaration variables as '''float''' (1.0, 1. or 1.f insted of 1) is more preferable then writing expressions with variables of different types and, in result, mixing '''float''' with '''int'''. It causes implicit type conversion, which sometimes leads to [http://media.moddb.com/images/members/1/691/690410/G-Mans_Ghost.jpg unforeseen consequences].
+P.P.S. Although compiler will do this work for you at the optimization stage, keep in mind that explicit variables declaration as '''float''' (1.0, 1. or 1.f insted of 1) is more preferable then writing expressions with variables of different types and, in result, mixing '''float''' with '''int'''. It causes implicit type conversion, which sometimes leads to [http://media.moddb.com/images/members/1/691/690410/G-Mans_Ghost.jpg unforeseen consequences].