blend modes
Patricio Gonzalez Vivo
9 years ago
parent
fb64aecccd
commit
9ff99bee35
@ -0,0 +1,21 @@
|
||||
## Image operations
|
||||
|
||||
|
||||
### Invert
|
||||
<div class="codeAndCanvas" data="inv.frag" data-imgs="00.jpg,01.jpg"></div>
|
||||
|
||||
### Add
|
||||
<div class="codeAndCanvas" data="add.frag" data-imgs="00.jpg,01.jpg"></div>
|
||||
|
||||
### Substract
|
||||
<div class="codeAndCanvas" data="sub.frag" data-imgs="00.jpg,01.jpg"></div>
|
||||
|
||||
Absolute difference
|
||||
<div class="codeAndCanvas" data="diff.frag" data-imgs="00.jpg,01.jpg"></div>
|
||||
|
||||
### Multiply
|
||||
<div class="codeAndCanvas" data="mult.frag" data-imgs="00.jpg,01.jpg"></div>
|
||||
|
||||
### PS Blending modes
|
||||
|
||||
<div class="codeAndCanvas" data="blend.frag" data-imgs="00.jpg,rainbow.jpg"></div>
|
||||
@ -0,0 +1,21 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
vec3 color = colorA+colorB;
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
#define BlendLinearDodgef BlendAddf
|
||||
#define BlendLinearBurnf BlendSubstractf
|
||||
#define BlendAddf(base, blend) min(base + blend, 1.0)
|
||||
#define BlendSubstractf(base, blend) max(base + blend - 1.0, 0.0)
|
||||
#define BlendLightenf(base, blend) max(blend, base)
|
||||
#define BlendDarkenf(base, blend) min(blend, base)
|
||||
#define BlendLinearLightf(base, blend) (blend < 0.5 ? BlendLinearBurnf(base, (2.0 * blend)) : BlendLinearDodgef(base, (2.0 * (blend - 0.5))))
|
||||
#define BlendScreenf(base, blend) (1.0 - ((1.0 - base) * (1.0 - blend)))
|
||||
#define BlendOverlayf(base, blend) (base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)))
|
||||
#define BlendSoftLightf(base, blend) ((blend < 0.5) ? (2.0 * base * blend + base * base * (1.0 - 2.0 * blend)) : (sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend)))
|
||||
#define BlendColorDodgef(base, blend) ((blend == 1.0) ? blend : min(base / (1.0 - blend), 1.0))
|
||||
#define BlendColorBurnf(base, blend) ((blend == 0.0) ? blend : max((1.0 - ((1.0 - base) / blend)), 0.0))
|
||||
#define BlendVividLightf(base, blend) ((blend < 0.5) ? BlendColorBurnf(base, (2.0 * blend)) : BlendColorDodgef(base, (2.0 * (blend - 0.5))))
|
||||
#define BlendPinLightf(base, blend) ((blend < 0.5) ? BlendDarkenf(base, (2.0 * blend)) : BlendLightenf(base, (2.0 *(blend - 0.5))))
|
||||
#define BlendHardMixf(base, blend) ((BlendVividLightf(base, blend) < 0.5) ? 0.0 : 1.0)
|
||||
#define BlendReflectf(base, blend) ((blend == 1.0) ? blend : min(base * base / (1.0 - blend), 1.0))
|
||||
|
||||
// Component wise blending
|
||||
#define Blend(base, blend, funcf) vec3(funcf(base.r, blend.r), funcf(base.g, blend.g), funcf(base.b, blend.b))
|
||||
|
||||
#define BlendNormal(base, blend) (blend)
|
||||
#define BlendLighten BlendLightenf
|
||||
#define BlendDarken BlendDarkenf
|
||||
#define BlendMultiply(base, blend) (base * blend)
|
||||
#define BlendAverage(base, blend) ((base + blend) / 2.0)
|
||||
#define BlendAdd(base, blend) min(base + blend, vec3(1.0))
|
||||
#define BlendSubstract(base, blend) max(base + blend - vec3(1.0), vec3(0.0))
|
||||
#define BlendDifference(base, blend) abs(base - blend)
|
||||
#define BlendNegation(base, blend) (vec3(1.0) - abs(vec3(1.0) - base - blend))
|
||||
#define BlendExclusion(base, blend) (base + blend - 2.0 * base * blend)
|
||||
#define BlendScreen(base, blend) Blend(base, blend, BlendScreenf)
|
||||
#define BlendOverlay(base, blend) Blend(base, blend, BlendOverlayf)
|
||||
#define BlendSoftLight(base, blend) Blend(base, blend, BlendSoftLightf)
|
||||
#define BlendHardLight(base, blend) BlendOverlay(blend, base)
|
||||
#define BlendColorDodge(base, blend) Blend(base, blend, BlendColorDodgef)
|
||||
#define BlendColorBurn(base, blend) Blend(base, blend, BlendColorBurnf)
|
||||
#define BlendLinearDodge BlendAdd
|
||||
#define BlendLinearBurn BlendSubstract
|
||||
|
||||
#define BlendLinearLight(base, blend) Blend(base, blend, BlendLinearLightf)
|
||||
#define BlendVividLight(base, blend) Blend(base, blend, BlendVividLightf)
|
||||
#define BlendPinLight(base, blend) Blend(base, blend, BlendPinLightf)
|
||||
#define BlendHardMix(base, blend) Blend(base, blend, BlendHardMixf)
|
||||
#define BlendReflect(base, blend) Blend(base, blend, BlendReflectf)
|
||||
#define BlendGlow(base, blend) BlendReflect(blend, base)
|
||||
#define BlendPhoenix(base, blend) (min(base, blend) - max(base, blend) + vec3(1.0))
|
||||
#define BlendOpacity(base, blend, F, O) (F(base, blend) * O + blend * (1.0 - O))
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
color = BlendMultiply(colorA,colorB);
|
||||
// color = BlendAdd(colorA,colorB);
|
||||
// color = BlendLighten(colorA,colorB);
|
||||
// color = BlendDarken(colorA,colorB);
|
||||
// color = BlendAverage(colorA,colorB);
|
||||
// color = BlendSubstract(colorA,colorB);
|
||||
// color = BlendDifference(colorA,colorB);
|
||||
// color = BlendNegation(colorA,colorB);
|
||||
// color = BlendExclusion(colorA,colorB);
|
||||
// color = BlendScreen(colorA,colorB);
|
||||
// color = BlendOverlay(colorA,colorB);
|
||||
// color = BlendSoftLight(colorA,colorB);
|
||||
// color = BlendHardLight(colorA,colorB);
|
||||
// color = BlendColorDodge(colorA,colorB);
|
||||
// color = BlendColorBurn(colorA,colorB);
|
||||
// color = BlendLinearLight(colorA,colorB);
|
||||
// color = BlendVividLight(colorA,colorB);
|
||||
// color = BlendPinLight(colorA,colorB);
|
||||
// color = BlendHardMix(colorA,colorB);
|
||||
// color = BlendReflect(colorA,colorB);
|
||||
// color = BlendGlow(colorA,colorB);
|
||||
// color = BlendPhoenix(colorA,colorB);
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
vec3 color = abs(colorA-colorB);
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
vec3 color = colorA/colorB;
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Textures</title>
|
||||
<meta name="keywords" content="glsl,shader,textures,uniforms,sampler2D" />
|
||||
<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>
|
||||
|
||||
<!-- CodeMirror -->
|
||||
<link type='text/css' rel='stylesheet' href="../src/codemirror/css/codemirror.css">
|
||||
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/fold/foldgutter.css">
|
||||
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/dialog/dialog.css">
|
||||
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/hint/show-hint.css">
|
||||
<link type='text/css' rel="stylesheet" href="../src/codemirror/theme/neo.css">
|
||||
<script type="text/javascript" src="../src/codemirror.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/search/search.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/dialog/dialog.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/edit/matchbrackets.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/edit/closebrackets.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/comment/comment.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/wrap/hardwrap.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/fold/foldcode.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/fold/brace-fold.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/keymap/sublime.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/addon/hint/show-hint.js"></script>
|
||||
<script type="text/javascript" src="../src/codemirror/mode/clike.js"></script>
|
||||
|
||||
<!-- Highlight -->
|
||||
<link type='text/css' rel='stylesheet' href="../css/github.css">
|
||||
<script type="text/javascript" src="../src/highlight.min.js"></script>
|
||||
|
||||
<!-- Marked -->
|
||||
<script type="text/javascript" src="../src/marked.js"></script>
|
||||
|
||||
<!-- My stuff -->
|
||||
<link type='text/css' rel='stylesheet' href="../css/style.css">
|
||||
<script type="text/javascript" src="../src/glslCanvas.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
|
||||
<hr>
|
||||
<div id="content"> </div>
|
||||
<hr>
|
||||
<ul class="navigationBar" >
|
||||
<li class="navigationBar" onclick="previusPage()">< < Previous</li>
|
||||
<li class="navigationBar" onclick="homePage()"> Home </li>
|
||||
<li class="navigationBar" onclick="nextPage()">Next > ></li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="../src/main.js" defer></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-18824436-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 color = 1.0-texture2D(u_tex0,st).rgb;
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
vec3 color = colorA*colorB;
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@ -0,0 +1,21 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform sampler2D u_tex0;
|
||||
uniform sampler2D u_tex1;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_mouse;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main (void) {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
|
||||
vec3 colorA = texture2D(u_tex0,st).rgb;
|
||||
vec3 colorB = texture2D(u_tex1,st).rgb;
|
||||
|
||||
vec3 color = colorA*colorB;
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
Loading…
Reference in New Issue