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
Standard Usage
Blend modes can be imported individually using the standard glslify preprocessor syntax.
# blendAdd = require(glsl-blend/add) # blendAverage = require(glsl-blend/average) # blendColorBurn = require(glsl-blend/color-burn) # blendColorDodge = require(glsl-blend/color-dodge) # blendDarken = require(glsl-blend/darken) # blendDifference = require(glsl-blend/difference) # blendExclusion = require(glsl-blend/exclusion) # blendGlow = require(glsl-blend/glow) # blendHardLight = require(glsl-blend/hard-light) # blendHardMix = require(glsl-blend/hard-mix) # blendLighten = require(glsl-blend/lighten) # blendLinearBurn = require(glsl-blend/linear-burn) # blendLinearDodge = require(glsl-blend/linear-dodge) # blendLinearLight = require(glsl-blend/linear-light) # blendMultiply = require(glsl-blend/multiply) # blendNegation = require(glsl-blend/negation) # blendNormal = require(glsl-blend/normal) # blendOverlay = require(glsl-blend/overlay) # blendPhoenix = require(glsl-blend/phoenix) # blendPinLight = require(glsl-blend/pin-light) # blendReflect = require(glsl-blend/reflect) # blendScreen = require(glsl-blend/screen) # blendSoftLight = require(glsl-blend/soft-light) # blendSubtract = require(glsl-blend/subtract) # blendVividLight = require(glsl-blend/vivid-light)
A foreground and background color is needed to perform a blend operation.
# blend = require(glsl-blend/screen) void
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.
// javascriptvar modes = ; // using stackglmyShaderuniformsblendMode = modesHARD_LIGHT;
// glsl # 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.