glsl photoshop blending modes. glslify formatted.
Switch branches/tags
Clone or download
Latest commit 3c5fc93 Jun 29, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_temp simplified setup. overloading on functions Apr 4, 2015
demo update demo Jun 29, 2016
source recompile with base opacity changes Jun 29, 2016
.gitignore simplified setup. overloading on functions Apr 4, 2015
.npmignore npm package updates Apr 11, 2015
LICENSE.md more readme updates Apr 11, 2015
README.md readme change Apr 11, 2015
add.glsl recompile with base opacity changes Jun 29, 2016
all.glsl fixed typo in subtract Apr 11, 2015
average.glsl recompile with base opacity changes Jun 29, 2016
color-burn.glsl recompile with base opacity changes Jun 29, 2016
color-dodge.glsl recompile with base opacity changes Jun 29, 2016
darken.glsl recompile with base opacity changes Jun 29, 2016
difference.glsl recompile with base opacity changes Jun 29, 2016
exclusion.glsl recompile with base opacity changes Jun 29, 2016
glow.glsl recompile with base opacity changes Jun 29, 2016
hard-light.glsl recompile with base opacity changes Jun 29, 2016
hard-mix.glsl recompile with base opacity changes Jun 29, 2016
index.html demo bundle updates Jun 29, 2016
lighten.glsl recompile with base opacity changes Jun 29, 2016
linear-burn.glsl recompile with base opacity changes Jun 29, 2016
linear-dodge.glsl recompile with base opacity changes Jun 29, 2016
linear-light.glsl recompile with base opacity changes Jun 29, 2016
modes.js fixed typo in subtract Apr 11, 2015
multiply.glsl recompile with base opacity changes Jun 29, 2016
negation.glsl recompile with base opacity changes Jun 29, 2016
normal.glsl recompile with base opacity changes Jun 29, 2016
overlay.glsl recompile with base opacity changes Jun 29, 2016
package.json 1.0.3 Jun 29, 2016
phoenix.glsl recompile with base opacity changes Jun 29, 2016
pin-light.glsl recompile with base opacity changes Jun 29, 2016
reflect.glsl recompile with base opacity changes Jun 29, 2016
screen.glsl recompile with base opacity changes Jun 29, 2016
soft-light.glsl recompile with base opacity changes Jun 29, 2016
substract.glsl fixing all shader Apr 5, 2015
subtract.glsl recompile with base opacity changes Jun 29, 2016
vivid-light.glsl recompile with base opacity changes Jun 29, 2016

README.md

glsl-blend

Photoshop blending modes in glsl for use with glslify. Blending modes include Screen, Multiply, Soft Light, Vivid Light, Overlay, etc. Implementations sourced from this article on Photoshop math.

Demo

http://jamieowen.github.io/glsl-blend

Installation

npm install glsl-blend

NPM

stable

Standard Usage

Blend modes can be imported individually using the standard glslify preprocessor syntax.

#pragma glslify: blendAdd = require(glsl-blend/add)
#pragma glslify: blendAverage = require(glsl-blend/average)
#pragma glslify: blendColorBurn = require(glsl-blend/color-burn)
#pragma glslify: blendColorDodge = require(glsl-blend/color-dodge)
#pragma glslify: blendDarken = require(glsl-blend/darken)
#pragma glslify: blendDifference = require(glsl-blend/difference)
#pragma glslify: blendExclusion = require(glsl-blend/exclusion)
#pragma glslify: blendGlow = require(glsl-blend/glow)
#pragma glslify: blendHardLight = require(glsl-blend/hard-light)
#pragma glslify: blendHardMix = require(glsl-blend/hard-mix)
#pragma glslify: blendLighten = require(glsl-blend/lighten)
#pragma glslify: blendLinearBurn = require(glsl-blend/linear-burn)
#pragma glslify: blendLinearDodge = require(glsl-blend/linear-dodge)
#pragma glslify: blendLinearLight = require(glsl-blend/linear-light)
#pragma glslify: blendMultiply = require(glsl-blend/multiply)
#pragma glslify: blendNegation = require(glsl-blend/negation)
#pragma glslify: blendNormal = require(glsl-blend/normal)
#pragma glslify: blendOverlay = require(glsl-blend/overlay)
#pragma glslify: blendPhoenix = require(glsl-blend/phoenix)
#pragma glslify: blendPinLight = require(glsl-blend/pin-light)
#pragma glslify: blendReflect = require(glsl-blend/reflect)
#pragma glslify: blendScreen = require(glsl-blend/screen)
#pragma glslify: blendSoftLight = require(glsl-blend/soft-light)
#pragma glslify: blendSubtract = require(glsl-blend/subtract)
#pragma glslify: blendVividLight = require(glsl-blend/vivid-light)

A foreground and background color is needed to perform a blend operation.

#pragma glslify: blend = require(glsl-blend/screen)

void main() {
    vec4 bgColor = texture2D(bg, vUv);
    vec4 fgColor = texture2D(foreground, vUv);

    vec3 color = blend(bgColor.rgb, fgColor.rgb);
    gl_FragColor = vec4(color, 1.0);
}

Blend modes can also specify an additional opacity parameter.

float opacity = 0.75;
vec3 color = blend(bgColor.rgb, fgColor.rgb, opacity );

Modal Usage

The demo shows all blend modes switchable via a drop down.

For this, there is an additional 'all' glsl function that can be required to import all blend mode functions at once and specify which one to use via an integer. Integers for each blend mode can be imported using the javascript modes module, and passed as a uniform to the shader.

// javascript
var modes = require( 'glsl-blend/modes' );

// using stackgl
myShader.uniforms.blendMode = modes.HARD_LIGHT;
// glsl
#pragma glslify: blend = require(glsl-blend/all)
uniform int blendMode;

// ...

vec3 color = blend( blendMode, bgColor.rgb, fgColor.rgb, 0.75 );

Todo

  • Add Hue, Luminance, Saturation & Color Modes.
  • Implement color conversion functions for the above as separate glsl modules.

Contributing

See stackgl/contributing.

License

MIT. See LICENSE.md for details.