├── .gitignore ├── README.md ├── bleach └── index.glsl ├── brightness └── index.glsl ├── bsc └── index.glsl ├── contrast └── index.glsl ├── dot-screen └── index.glsl ├── film └── index.glsl ├── glitch └── index.glsl ├── grayscale └── index.glsl ├── invert └── index.glsl ├── noise └── index.glsl ├── package.json ├── sepia └── index.glsl └── vignette └── index.glsl /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Color shader functions 2 | ==== 3 | 4 | These methods are to be used with glslify. 5 | 6 | 7 | ## Installation 8 | With npm, to be used with browserify and glslify transform. 9 | ```bash 10 | npm install color-shader-functions --save 11 | ``` 12 | 13 | ## Usage 14 | ```glsl 15 | uniform sampler2D tInput; 16 | uniform vec2 resolution; 17 | uniform float time; 18 | 19 | varying vec2 vUv; 20 | 21 | // Import the methods you need 22 | #pragma glslify: vignette = require(color-shader-functions/vignette) 23 | #pragma glslify: bsc = require(color-shader-functions/bsc) 24 | #pragma glslify: film = require(color-shader-functions/film) 25 | 26 | void main() { 27 | vec4 color = texture2D(tInput, vUv); 28 | 29 | color = vignette(color, 1.4, 2.3, resolution); 30 | color = bsc(color, 0.8, 0.8, 0.9); 31 | color = film(color, vUv, time, 2048.0, 0.4, 0.3); 32 | 33 | gl_FragColor = color; 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /bleach/index.glsl: -------------------------------------------------------------------------------- 1 | const vec4 one = vec4(1.0); 2 | const vec4 two = vec4(2.0); 3 | const vec4 lumcoeff = vec4(0.2125,0.7154,0.0721,0.0); 4 | 5 | vec4 bleach(vec4 color, float famount) { 6 | vec4 luma = vec4(vec3(dot(color, lumcoeff)), color.a); 7 | vec4 amount = vec4(famount); 8 | float luminance = dot(color, lumcoeff); 9 | float mixamount = clamp((luminance - 0.45) * 10.0, 0.0, 1.0); 10 | vec4 branch1 = two * color * luma; 11 | vec4 branch2 = one - (two * (one - color) * (one - luma)); 12 | vec4 result = mix(branch1, branch2, vec4(mixamount)); 13 | return mix(color, result, amount); 14 | } 15 | 16 | #pragma glslify: export(bleach) -------------------------------------------------------------------------------- /brightness/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 brightness(vec4 color, float value) { 2 | return color + vec4(value, value, value, 0.0); 3 | } 4 | 5 | #pragma glslify: export(brightness) -------------------------------------------------------------------------------- /bsc/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 bsc(vec4 color, float brightness, float saturation, float contrast) { 2 | vec3 bColor = color.rgb * brightness; 3 | float intensity = dot(bColor, vec3(0.2125, 0.7154, 0.0721)); 4 | return vec4(mix(vec3(0.5), mix(vec3(intensity), bColor, saturation), contrast), color.a); 5 | } 6 | 7 | #pragma glslify: export(bsc) -------------------------------------------------------------------------------- /contrast/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 contrast(vec4 color, float value) { 2 | return vec4(color.rgb * value, color.a); 3 | } 4 | 5 | #pragma glslify: export(contrast) -------------------------------------------------------------------------------- /dot-screen/index.glsl: -------------------------------------------------------------------------------- 1 | const float angle = 1.57; 2 | 3 | float pattern(vec2 pos, vec2 resolution, float scale) { 4 | vec2 center = .5 * resolution; 5 | float s = sin(angle), c = cos(angle); 6 | vec2 tex = pos * resolution - center; 7 | vec2 point = vec2(c * tex.x - s * tex.y, s * tex.x + c * tex.y) * scale; 8 | return (sin(point.x) * sin(point.y)) * 4.0; 9 | } 10 | 11 | vec4 dotScreen(vec4 color, vec2 pos, vec2 resolution, float scale) { 12 | float average = (color.r + color.g + color.b) / 3.0; 13 | return vec4(vec3(average * 10.0 - 5.0 + pattern(pos, resolution, scale)), color.a); 14 | } 15 | 16 | #pragma glslify: export(dotScreen) -------------------------------------------------------------------------------- /film/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 film(vec4 color, vec2 pos, float ttime, float scCount, float scIntensity, float nIntensity) { 2 | float x = pos.x * pos.y * ttime * 1000.0; 3 | x = mod(x, 13.0) * mod(x, 123.0); 4 | float dx = mod(x, 0.01); 5 | vec2 sc = vec2(sin(pos.y * scCount), cos(pos.y * scCount)); 6 | vec3 cResult = color.rgb + color.rgb * clamp(0.1 + dx * 100.0, 0.0, 1.0); 7 | cResult += color.rgb * vec3(sc.x, sc.y, sc.x) * scIntensity; 8 | cResult = color.rgb + clamp(nIntensity, 0.0, 1.0) * (cResult - color.rgb); 9 | return vec4(cResult, color.a); 10 | } 11 | 12 | #pragma glslify: export(film) -------------------------------------------------------------------------------- /glitch/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 glitch(int byp, vec2 pos, sampler2D tDisp, vec3 seed, vec2 distortion, float col_s) { 2 | if (byp < 1) { 3 | float xs = floor(gl_FragCoord.x / 0.5); 4 | float ys = floor(gl_FragCoord.y / 0.5); 5 | vec4 normal = texture2D(tDisp, pos * seed.z * seed.z); 6 | 7 | if (pos.y < distortion.x + col_s && pos.y > distortion.x - col_s * seed.z) { 8 | if (seed.x > 0.) { 9 | pos.y = 1. - (pos.y + distortion.y); 10 | } 11 | else { 12 | pos.y = distortion.y; 13 | } 14 | } 15 | 16 | if (pos.x < distortion.y + col_s && pos.x > distortion.y - col_s * seed.z) { 17 | if (seed.y > 0.){ 18 | pos.x = distortion.x; 19 | } 20 | else { 21 | pos.x = 1. - (pos.x + distortion.x); 22 | } 23 | } 24 | 25 | pos.x += normal.x * seed.x * (seed.z / 5.); 26 | pos.y += normal.y * seed.y * (seed.z / 5.); 27 | 28 | vec2 offset = amount * vec2(cos(angle), sin(angle)); 29 | vec4 cr = texture2D(tInput, pos + offset); 30 | vec4 cga = color; 31 | vec4 cb = texture2D(tInput, pos - offset); 32 | 33 | color = vec4(cr.r, cga.g, cb.b, cga.a); 34 | } 35 | } -------------------------------------------------------------------------------- /grayscale/index.glsl: -------------------------------------------------------------------------------- 1 | const vec3 luma = vec3( .299, 0.587, 0.114 ); 2 | 3 | vec4 grayscale(vec4 color) { 4 | return vec4(vec3(dot(color.rgb, luma)), color.a); 5 | } 6 | 7 | #pragma glslify: export(grayscale) -------------------------------------------------------------------------------- /invert/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 invert(vec4 color) { 2 | return vec4(1.0 - color.rgb, color.a); 3 | } 4 | 5 | #pragma glslify: export(invert) -------------------------------------------------------------------------------- /noise/index.glsl: -------------------------------------------------------------------------------- 1 | float random(vec2 n, float offset ){ 2 | return 0.5 - fract(sin(dot(n.xy + vec2( offset, 0. ), vec2(12.9898, 78.233)))* 43758.5453); 3 | } 4 | 5 | vec4 noise(vec4 color, vec2 pos, float time, float amount, float speed) { 6 | return color + vec4(vec3(amount * random(pos, 0.00001 * speed * time)), 1.0); 7 | } 8 | 9 | #pragma glslify: export(noise) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "color-shader-functions", 3 | "version": "0.0.2", 4 | "description": "Library of combinable shader color manipulation methods to be used with glslify imports", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/superguigui/color-shader-functions.git" 8 | }, 9 | "keywords": [ 10 | "shader", 11 | "color", 12 | "glsl", 13 | "glslify" 14 | ], 15 | "author": "Guillaume Gouessan ", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/superguigui/color-shader-functions/issues" 19 | }, 20 | "homepage": "https://github.com/superguigui/color-shader-functions#readme" 21 | } 22 | -------------------------------------------------------------------------------- /sepia/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 sepia(vec4 color, float amount) { 2 | float r = color.r; 3 | float g = color.g; 4 | float b = color.b; 5 | 6 | color.r = min(1.0, (r * (1.0 - (0.607 * amount))) + (g * (0.769 * amount)) + (b * (0.189 * amount))); 7 | color.g = min(1.0, (r * 0.349 * amount) + (g * (1.0 - (0.314 * amount))) + (b * 0.168 * amount)); 8 | color.b = min(1.0, (r * 0.272 * amount) + (g * 0.534 * amount) + (b * (1.0 - (0.869 * amount)))); 9 | 10 | return color; 11 | } 12 | 13 | #pragma glslify: export(sepia) 14 | 15 | -------------------------------------------------------------------------------- /vignette/index.glsl: -------------------------------------------------------------------------------- 1 | vec4 vignette(vec4 color, float boost, float reduction, vec2 resolution) { 2 | vec2 center = resolution * 0.5; 3 | float vignette = distance(center, gl_FragCoord.xy) / resolution.x; 4 | vignette = boost - vignette * reduction; 5 | return vec4(color.rgb * vignette, 1.0); 6 | } 7 | 8 | #pragma glslify: export(vignette) --------------------------------------------------------------------------------