Home » Articles » Shader Effects: Blend Modes

Shader Effects: Blend Modes

Sized_for_post_6ffbba40-3f1a-453d-8a9a-d105bc1719ab
Nathaniel Meyer | Jul 20, 2012 at 00:00 | 2

Interactive Shader Effects Series

  • Effects
  • Lighting
  • Materials
    • Skin
    • Snow and Ice
    • Water
  • Miscellaneous
    • Transition Effects
  • Procedural
    • 2D, 3D, 4D Noise
    • Sky / Cloud Generation
    • Terrain

Start WebGL Demo

Sorry, it appears you don't have support for WebGL.


In order to run this demo, you must meet the following requirements.

  • You are running the latest version of Mozilla Firefox, Google Chrome, or Safari.
  • You have a WebGL compatible video card with the latest drivers.
  • Your video card is not blacklisted. You can check the current blacklist on Khronos.

Some browsers may require additional configuration in order to get WebGL to run. If you are having problems running this demo, visit the following sites.

Loading %

Source Texture

Source Colour


Dest Texture

Dest Colour


Blend Op

                            
/// <summary>
/// Vertex shader for rendering a 2D plane on the screen. The plane should be sized
/// from -1.0 to 1.0 in the x and y axis. This shader can be shared amongst multiple
/// post-processing fragment shaders.
/// </summary>


/// <summary>
/// Attributes.
/// <summary>
attribute vec3 Vertex;
attribute vec2 Uv;


/// <summary>
/// Varying variables.
/// <summary>
varying vec2 vUv;


/// <summary>
/// Vertex shader entry.
/// <summary>
void main ()
{
    gl_Position = vec4(Vertex, 1.0);
    
    // Flip y-axis
    vUv = vec2(Uv.x, 1.0 - Uv.y);
}
                            
                        
                            
/// <summary>
/// Fragment shader for blending 2 images.
/// </summary>


#ifdef GL_ES
    precision highp float;
#endif


/// <summary>
/// This uber-shader uses this pre-processor directive to specify which blend operation
/// will be performed at runtime. This is preferred over writing a dozen separate fragment
/// shaders.
/// <summary>
#define {BLEND_MODE}


/// <summary>
/// Uniform variables.
/// <summary>
uniform vec4 DstColour;     // Colour (tint) applied to destination texture.
uniform vec4 SrcColour;     // Colour (tint) applied to source texture
uniform sampler2D Sample0;  // Background layer (AKA: Destination)
uniform sampler2D Sample1;  // Foreground layer (AKA: Source)


/// <summary>
/// Varying variables.
/// <summary>
varying vec2 vUv;


/// <summary>
/// Blend the source and destination pixels.
/// This function does not precompute alpha channels. To learn more about the equations that
/// factor in alpha blending, see http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/.
/// <summary>
/// <param name="src">Source (foreground) pixel.</param>
/// <param name="dst">Destiantion (background) pixel.</param>
/// <returns>The blended pixel.</returns>
vec3 blend (vec3 src, vec3 dst)
{
#ifdef ADD
    return src + dst;
#endif

#ifdef SUBTRACT
    return src - dst;
#endif

#ifdef MULTIPLY
    return src * dst;
#endif

#ifdef DARKEN
    return min(src, dst);
#endif

#ifdef COLOUR_BURN
    return vec3((src.x == 0.0) ? 0.0 : (1.0 - ((1.0 - dst.x) / src.x)),
            (src.y == 0.0) ? 0.0 : (1.0 - ((1.0 - dst.y) / src.y)),
            (src.z == 0.0) ? 0.0 : (1.0 - ((1.0 - dst.z) / src.z)));
#endif

#ifdef LINEAR_BURN
    return (src + dst) - 1.0;
#endif

#ifdef LIGHTEN
    return max(src, dst);
#endif

#ifdef SCREEN
    return (src + dst) - (src * dst);
#endif

#ifdef COLOUR_DODGE
    return vec3((src.x == 1.0) ? 1.0 : min(1.0, dst.x / (1.0 - src.x)),
            (src.y == 1.0) ? 1.0 : min(1.0, dst.y / (1.0 - src.y)),
            (src.z == 1.0) ? 1.0 : min(1.0, dst.z / (1.0 - src.z)));
#endif
            
#ifdef LINEAR_DODGE
    return src + dst;
#endif

#ifdef OVERLAY
    return vec3((dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),
            (dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),
            (dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z)));
#endif

#ifdef SOFT_LIGHT
    return vec3((src.x <= 0.5) ? (dst.x - (1.0 - 2.0 * src.x) * dst.x * (1.0 - dst.x)) : (((src.x > 0.5) && (dst.x <= 0.25)) ? (dst.x + (2.0 * src.x - 1.0) * (4.0 * dst.x * (4.0 * dst.x + 1.0) * (dst.x - 1.0) + 7.0 * dst.x)) : (dst.x + (2.0 * src.x - 1.0) * (sqrt(dst.x) - dst.x))),
            (src.y <= 0.5) ? (dst.y - (1.0 - 2.0 * src.y) * dst.y * (1.0 - dst.y)) : (((src.y > 0.5) && (dst.y <= 0.25)) ? (dst.y + (2.0 * src.y - 1.0) * (4.0 * dst.y * (4.0 * dst.y + 1.0) * (dst.y - 1.0) + 7.0 * dst.y)) : (dst.y + (2.0 * src.y - 1.0) * (sqrt(dst.y) - dst.y))),
            (src.z <= 0.5) ? (dst.z - (1.0 - 2.0 * src.z) * dst.z * (1.0 - dst.z)) : (((src.z > 0.5) && (dst.z <= 0.25)) ? (dst.z + (2.0 * src.z - 1.0) * (4.0 * dst.z * (4.0 * dst.z + 1.0) * (dst.z - 1.0) + 7.0 * dst.z)) : (dst.z + (2.0 * src.z - 1.0) * (sqrt(dst.z) - dst.z))));
#endif

#ifdef HARD_LIGHT
    return vec3((src.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - src.x) * (1.0 - dst.x)),
            (src.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - src.y) * (1.0 - dst.y)),
            (src.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - src.z) * (1.0 - dst.z)));
#endif

#ifdef VIVID_LIGHT
    return vec3((src.x <= 0.5) ? (1.0 - (1.0 - dst.x) / (2.0 * src.x)) : (dst.x / (2.0 * (1.0 - src.x))),
            (src.y <= 0.5) ? (1.0 - (1.0 - dst.y) / (2.0 * src.y)) : (dst.y / (2.0 * (1.0 - src.y))),
            (src.z <= 0.5) ? (1.0 - (1.0 - dst.z) / (2.0 * src.z)) : (dst.z / (2.0 * (1.0 - src.z))));
#endif

#ifdef LINEAR_LIGHT
    return 2.0 * src + dst - 1.0;
#endif

#ifdef PIN_LIGHT
    return vec3((src.x > 0.5) ? max(dst.x, 2.0 * (src.x - 0.5)) : min(dst.x, 2.0 * src.x),
            (src.x > 0.5) ? max(dst.y, 2.0 * (src.y - 0.5)) : min(dst.y, 2.0 * src.y),
            (src.z > 0.5) ? max(dst.z, 2.0 * (src.z - 0.5)) : min(dst.z, 2.0 * src.z));
#endif

#ifdef DIFFERENCE
    return abs(dst - src);
#endif

#ifdef EXCLUSION
    return src + dst - 2.0 * src * dst;
#endif
}


/// <summary>
/// Fragment shader entry.
/// <summary>
void main ()
{
    // Get samples from both layers
    vec4 dst = texture2D(Sample0, vUv) * DstColour;
    vec4 src = texture2D(Sample1, vUv) * SrcColour;
    
    // Apply blend operation
    vec3 colour = clamp(blend(src.xyz, dst.xyz), 0.0, 1.0);
    
    // Set fragment
    gl_FragColor.xyz = colour;
    gl_FragColor.w = 1.0;
}

Blend Modes

In the image at the top of the post: lightcycle from Tron Legacy demonstrating a bloom effect. A technique achieved by blending a glowmap with the underlying image.

Introduction

When compositing two or more images, you mix them together using some sort of blend operation. The common blending operation is to mix the foreground onto the background taking into account the alpha channels between the two. This can be handled for you in the fixed function pipeline, but most other useful blending operations must be calculated manually in your shaders. This is primarily a mathematical exercise, so each blending operation will be listed below along with its formula.

Add

pixel = src + dst

OpenGL equivalent: glBlendFunc(GL_ONE, GL_ONE)


Uses: Particles, glows (bloom), lens flare, bright sources.

Subtract

pixel = src - dst

OpenGL equivalent: glBlendEquation(GL_FUNC_SUBTRACT)

Uses: Lens filters (sunglasses).

Multiply

pixel = src * dst

Uses: Grayscale colour tinting.

Darken

pixel = min(src, dst)

OpenGL equivalent: glBlendEquation(GL_MIN)

Uses: Colour filtering, maintain shadows, adjust contrast.

Colour Burn

\[pixel = \left\{ \begin{matrix} 0.0 & src = 0.0 \\ 1.0 - ((1.0 - dst) / src) & src \ne 0.0 \end{matrix} \right\} \]

Uses: Strengthen shadows, colour saturation.

Linear Burn

pixel = (src + dst) - 1.0

Uses: Stronger variant to multiply, strengthen shadows.

Lighten

pixel = max(src, dst)

OpenGL equivalent: glBlendEquation(GL_MAX)

Uses: Colour filtering, maintain highlights, adjust contrast.

Screen

pixel = (src + dst) - (src * dst)

Uses: Increase brightness, used frequently with bloom.

Colour Dodge

\[pixel = \left\{ \begin{matrix} 1.0 & src = 1.0 \\ min(1.0, dst / (1.0 - src)) & src \ne 1.0 \end{matrix} \right\} \]

Uses: Overexposures, increase vividness.

Linear Dodge

pixel = src + dst

Same as addition, different name.

Overlay

\[pixel = \left\{ \begin{matrix} 2.0 * src * dst & dst \le 0.5 \\ 1.0 - 2.0 * (1.0 - dst) * (1.0 - src) & dst \gt 0.5 \end{matrix} \right\} \]

Uses: Sepia effect, duotones, colour grading, tint effect.

Soft Light

\[pixel = \left\{ \begin{matrix} dst - (1.0 - 2.0 * src) * dst * (1.0 - dst) & src \le 0.5 \\ dst + (2.0 * src - 1.0) * (4.0 * dst * (4.0 * dst + 1.0) * (dst - 1.0) + 7.0 * dst) & src \gt 0.5, dst \le 0.25 \\ dst + (2.0 * src - 1.0) * (\sqrt{dst} - dst) & src \gt 0.5, dst \gt 0.25 \end{matrix} \right\} \]

Uses: Modifying contrast, exposing shadows and highlights, vivid bloom.

Hard Light

\[pixel = \left\{ \begin{matrix} 2.0 * src * dst & src \le 0.5 \\ 1.0 - 2.0 * (1.0 - dst) * (1.0 - src) & src \gt 0.5 \end{matrix} \right\} \]

Uses: Identical to overlay except src and dst are swapped. Creates an overlapping colour.

Vivid Light

\[pixel = \left\{ \begin{matrix} 1.0 - (1.0 - dst) / (2.0 * (src - 0.5)) & src \gt 0.5 \\ dst / (1.0 - 2.0 * src) & src \le 0.5 \end{matrix} \right\} \]

Uses: Combines colour dodge and colour burn based on pixel intensity. Used for special effects.

Linear Light

\[pixel = \left\{ \begin{matrix} dst + 2.0 * (src - 0.5) & src \gt 0.5 \\ dst + 2.0 * src - 1.0 & src \le 0.5 \end{matrix} \right\} \]

Uses: Combines linear dodge and linear burn based on pixel intensity. Used for special effects.

Pin Light

\[pixel = \left\{ \begin{matrix} max(dst, 2.0 * (src - 0.5)) & src \gt 0.5 \\ min(dst, 2.0 * src) & src \le 0.5 \end{matrix} \right\} \]

Uses: Combines lighten and darken based on pixel intensity. Used for special effects.

References

  1. W3C SVG Working Group (2009-04-30). “SVG Compositing Specification”. Wikipedia. Retrieved 2012-06-26.

  2. Wikipedia Editors (2012-05-31). “Blend modes”. Wikipedia. Retrieved 2012-06-26.

The source code for this project is made freely available for download. The ZIP package below contains both the HTML and JavaScript files to replicate this WebGL demo.


The source code utilizes the Nutty Open WebGL Framework, which is an open sourced, simplified version of the closed source Nutty WebGL Framework. It is released under a modified MIT license, so you are free to use if for personal and commercial purposes.


Download Source

Tagged: webgl shaders blending

Comments

houston10 | about 12 hours ago

high quality swiss replica watches


swiss Mechanical movement replica watches


high quality replica watches for men


high quality swiss replica watches


high quality replica watches



Replica Men's mechanical watches Jaeger-LeCoultre -Master Compressor Series Q1712440 [12742 ] - $219.00 : replica watches online stores---All Orders Are Free Shipping!, luxurywatchesfake.com










#sddm { margin: 0 auto; padding: 0; z-index: 30; background-color:#F4F4F4; width: 80px; height:23px; float: right; margin-right: 70px;} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 12px arial} #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background: #EAEAE8; color: #666; text-align: center; text-decoration: none} #sddm li a:hover { background: #49A3FF} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 12px arial} #sddm div a:hover { background: #49A3FF; color: #FFF} Welcome! Sign In or Register Your cart is empty

Currencies US DollarCNYEuroGB PoundCanadian DollarAustralian DollarJappen YenNorske KroneSwedish KroneDanish Krone Categories Top Brand Watches A. Lange & Söhne Audemars Piguet Blancpain Watches Breguet Watches Glashütte Watches Jaeger-LeCoultre Amvox Watches Fine jewelry Watches Flip Watches Grande Reverso Watches Master Compressor Watches Master Control Watches Master Grande Tradition Watches Master Masters Watches Reverso Watches Other Series Patek Philippe Watches Piaget Watches Vacheron Constantin Luxury Brand Watches Mid-Range Brand Watches Mens Watches Ladies Watches Couple watches Unisex Watch Watch Phenotype Featured -   [more] Replica piaget - dragon and phoenix series G0A36573 men's mechanical watch $25,422.00  $248.00
Save: 99% off Replica Cartier Cartier-SANTOS series W25063X9 Ladies quartz watch $7,717.00  $184.00
Save: 98% off Replica The TAG Heuer TAGHeuer-Lincoln series WJ201B.BA0591 Men mechanical watches $1,257.00  $186.00
Save: 85% off Replica Cartier Cartier-DELICES DE CARTIER Series W1560002 men's mechanical watch $8,584.00  $194.00
Save: 98% off Home ::  Top Brand Watches ::  Jaeger-LeCoultre ::  Master Compressor Watches ::  Replica Men's mechanical watches Jaeger-LeCoultre -Master Compressor Series Q1712440 .jqzoom{ float:left; position:relative; padding:0px; cursor:pointer; width:301px; height:300px; } $(document).ready(function(){ $(".jqzoom").jqueryzoom({ xzoom: 282, //zooming div default width(default width value is 200) yzoom: 282, //zooming div default width(default height value is 200) offset: 5, //zooming div default offset(default offset value is 10) position: "right", //zooming div position(default position value is "right") preload:1, lens:1 }); $("#jqzoomimages").jqzoomimages({ sImgList: ["images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-248.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-249.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-250.jpg"], lImgList: ["images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-248.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-249.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-250.jpg"], vImgList: ["images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-248.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-249.jpg","images//watches_family2_/Jaeger-LeCoultre/Men-s-mechanical-watches-Jaeger-LeCoultre-Master-250.jpg"], pageNo: 1, pagesize: 4, imgWidth: 55, imgHeight: 55, bigImageId: "jqzoomimg" }); });
larger image



Replica Men's mechanical watches Jaeger-LeCoultre -Master Compressor Series Q1712440


$11,822.00  $219.00
Save: 98% off

              <div id="cartAdd">
Add to Cart: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="5353" /><input type="image" src="http://www.luxurywatchesfake.com/includes/templates/polo/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " />          </div>






Series
Master Compressor Series
Style
Male Table
Movement
Automatic mechanical movement
Movement Model
Cal.923
Case
18k Replica Rose Gold
Size
41.5mm
Thickness
13.9mm
Crown
Ordinary
Bottom of the table
-
Table mirror
Copy Sapphire crystal glass
Dial
Black
Watchband
Alligator
Strap Color
Dark brown
Clasp
Folding
Waterproof
50 m
Package
Beautifully packaged box
Function
Date display dual time zone world
Launch of Year
-

【Brand story]

In the depths of the Swiss Jura, an unusual place called Le Sentier. This unknown town, hold the secret of time. Antoine LeCoultre living here with his extraordinary talent, Mr. handedly created one of the proud Swiss watch brand.

Mr. Antoine LeCoultre offspring come from France, Le Sentier refuge Protestants of the sixteenth century. In its work under the influence of the manufacturing machinery equipment industry's father, Antoine LeCoultre also inherited the spirit of the inventor of the constant pursuit of innovation revolution. He actively studying the watch machinery and gear manufacturing technology, its one of the most remarkable invention is the instrument used to make clocks gear.

In 1833, it is by this excellent invention has the foresight to Mr. Antoine LeCoultre set up their own workshops, that is the area of ​​the home, the predecessor of the watch factory. He understands the "gear is a good soul," the truth, combined with the quality of its production gear parts well, now they get the attention of the industry's reputation, a moment in the Swiss watch industry impatient. This success inspired of Mr. Antoine LeCoultre further realize his lifelong dream - their own brand watches. But he did not think his workshop will be the most important in the history of the Vallee de Joux clock factory.

In 1900, Jacques-David LeCoultre, Antoine LeCoultre's descendants over the family business, he further plot home to the world and to cooperate with each other with the master clocks of Paris Edmond Jaeger. The deep friendship between them, and the Chief Financial and build each other's cultures, the birth of the Jaeger-LeCoultre watches (Jaeger-LeCoultre) brand was born.

Since it was established in 1833 so far, the plot has obtained more than 220 patents, creating more than 1,000 outstanding movement, beyond the self, with success, impressive achievements have received international recognition. Master, Reverso and Atmos Jaeger LeCoultre has three series, and the production of precision movement.

One of the most famous watch Jaeger LeCoultre Reverso, since its inception in 1931, and almost never modified, classic Art Deco design. Only legendary watch rectangular flip case, it can be configured to different movements, especially the complex structure of the three asked the table, tourbillon and perpetual calendar, 2006, the 75th anniversary of the birth of the Jaeger-LeCoultre Reverso. Jaeger LeCoultre another signature series Master is the ultimate precision watch; most complex placement within the circular case with Jaeger LeCoultre movement structure, enjoys the highest reputation for Jaeger-LeCoultre 1992 Master Series Order under the most 1,000 hours of rigorous quality testing, and establish a the watch quality new paradigm, promotion to Reverso series in 2004. The Master series inspired considerable inspiration LeCoultre brand launched another masterpiece Master Compressor watch series, the perfect combination of elegant elegant demeanor and spirit of the movement. Patented invention - it has LeCoultre the compression coil crown, to write a new page of history of mechanical watches. 1929, Jaeger LeCoultre introduced so far remains the world's smallest mechanical movement records 101 machine: 101 jewelry watches is exquisite, much appreciated, also wear this gem of the Queen Elizabeth II coronation. 2004 launched a new the Ideale series more highlight LeCoultre women perfect elegant jewelry watch design boutique. Jaeger LeCoultre production depend on the operation of the air temperature Atmos clock, since the advent of constantly brought the world surprise, and continues to introduce new, revolutionary innovation.

Nearly two centuries later, Jaeger-LeCoultre watches continue growing. Jaeger-LeCoultre has more than 1,000 employees, is the world's largest and one of the watch factory. Today, the division of Jaeger-LeCoultre factory is 40, and the use of the 20 state of the art production. Over the years has been followed by the concept of the "Watch Valley" where: the only thing necessary Christine pro, in order to produce the best products. This spirit let LeCoultre become the world's largest watch one of the craft heritage watch factory, at the same time watch patent and invention. Each finished heritage Jaeger-LeCoultre 170 year-long tradition, traditional crafts to create compliance with the Vallee de Joux, and integrated into the most advanced modern technology. In order to render the extreme beauty of the watch, Jaeger-LeCoultre watches compatible delicate and elegant Parisian style and the Vallee de Joux long craft tradition, and integration of Parisian society of noble, elegant, Jaeger-LeCoultre brand constantly enrich the connotation.

Mr. Antoine LeCoultre has become legendary, but his spirit still is the Le Sentier today pursued the goal. LeCoultre watches today Bingzhe the past and the attitude to artistic achievement with precise timing for the blog, but they do not be complacent, relying on professional skills and attitude of excellence, clear evidence re given a new watch look. Jaeger LeCoultre watch is not cold timing tool, it's a perfect mechanical process convey a sense of beauty, passion and true. Everyone according to their lifestyle, choose the Jaeger LeCoultre watches; philosophy they embody LeCoultre convey real time culture.



  • Model: 12742 



Related Products Replica Automatic mechanical watches LeCoultre-MASTER Series Q1728471 Ms. Replica Men's mechanical watches Jaeger-LeCoultre-Master Compressor Series Q1712140 Replica Men's mechanical watches LeCoultre - Compressor Extreme World Chronograp series Q1768451 Replica Jaeger LeCoultre - Master Compressor Series Q1738170 men's mechanical watch




Home   Shipping   Wholesale   Order Tracking   Coupons   Payment Methods   Contact Us   REPLICA OMEGA    REPLICA PATEK PHILIPPE    REPLICA ROLEX    REPLICA IWC    REPLICA CARTIER    TOP BRAND WATCHES    Copyright © 2012 All Rights Reserved.

best swiss replica watches


best replica watches


swiss replica watches aaa+


swiss replica watches


replica watches

houston10 | about 12 hours ago

[b]best swiss replica watches[/b]
[b][url=http://www.luxurywatchesfake.com/]bebest swiss replica watches


best replica watches


swiss replica watches aaa+


swiss replica watches


replica watches

Add New Comment

Please Log in or register now to post a comment.
Copyright 2011 DevMaster. All rights reserved. (rev: 994f941)