|
| 1 | +// Directional glow GLSL fragment shader. |
| 2 | +// Based on the "Let it Glow!" pen by "Selman Ay" |
| 3 | +// (https://codepen.io/selmanays/pen/yLVmEqY) |
| 4 | +precision highp float; |
| 5 | + |
| 6 | +// Float uniforms |
| 7 | +uniform float width; // Width of the canvas |
| 8 | +uniform float height; // Height of the canvas |
| 9 | +uniform float sourceX; // X position of the light source |
| 10 | +uniform float |
| 11 | + scrollFraction; // Scroll fraction of the page in relation to the canvas |
| 12 | +uniform float density; // Density of the "smoke" effect |
| 13 | +uniform float lightStrength; // Strength of the light |
| 14 | +uniform float weight; // Weight of the "smoke" effect |
| 15 | + |
| 16 | +// Sampler uniforms |
| 17 | +uniform sampler2D tInput; // Input texture (the application canvas) |
| 18 | +uniform sampler2D tNoise; // Some texture |
| 19 | + |
| 20 | +out vec4 fragColor; |
| 21 | + |
| 22 | +float sourceY = scrollFraction; |
| 23 | +vec2 resolution = vec2(width, height); |
| 24 | +vec2 lightSource = vec2(sourceX, sourceY); |
| 25 | + |
| 26 | +const int samples = 20; // The number of "copies" of the canvas made to emulate |
| 27 | + // the "smoke" effect |
| 28 | +const float decay = 0.88; // Decay of the light in each sample |
| 29 | +const float exposure = .9; // The exposure to the light |
| 30 | + |
| 31 | +float random2d(vec2 uv) { |
| 32 | + uv /= 256.; |
| 33 | + vec4 tex = texture(tNoise, uv); |
| 34 | + return mix(tex.r, tex.g, tex.a); |
| 35 | +} |
| 36 | + |
| 37 | +float random(vec3 xyz) { |
| 38 | + return fract(sin(dot(xyz, vec3(12.9898, 78.233, 151.7182))) * 43758.5453); |
| 39 | +} |
| 40 | + |
| 41 | +vec4 sampleTexture(vec2 uv) { |
| 42 | + vec4 textColor = texture(tInput, uv); |
| 43 | + return textColor; |
| 44 | +} |
| 45 | + |
| 46 | +vec4 occlusion(vec2 uv, vec2 lightpos, vec4 objects) { |
| 47 | + return (1. - smoothstep(0.0, lightStrength, length(lightpos - uv))) * |
| 48 | + (objects); |
| 49 | +} |
| 50 | + |
| 51 | +vec4 fragment(vec2 uv, vec2 fragCoord) { |
| 52 | + vec3 colour = vec3(0); |
| 53 | + |
| 54 | + vec4 obj = sampleTexture(uv); |
| 55 | + vec4 map = occlusion(uv, lightSource, obj); |
| 56 | + |
| 57 | + float random = random(vec3(fragCoord, 1.0)); |
| 58 | + ; |
| 59 | + |
| 60 | + float exposure = exposure + (sin(random) * .5 + 1.) * .05; |
| 61 | + |
| 62 | + vec2 _uv = uv; |
| 63 | + vec2 distance = (_uv - lightSource) * (1. / float(samples) * density); |
| 64 | + |
| 65 | + float illumination_decay = 1.; |
| 66 | + for (int i = 0; i < samples; i++) { |
| 67 | + _uv -= distance; |
| 68 | + |
| 69 | + float movement = random * 20. * float(i + 1); |
| 70 | + float dither = |
| 71 | + random2d(uv + |
| 72 | + mod(vec2(movement * sin(random * .5), -movement), 1000.)) * |
| 73 | + 2.; |
| 74 | + |
| 75 | + vec4 stepped_map = |
| 76 | + occlusion(uv, lightSource, sampleTexture(_uv + distance * dither)); |
| 77 | + stepped_map *= illumination_decay * weight; |
| 78 | + |
| 79 | + illumination_decay *= decay; |
| 80 | + map += stepped_map; |
| 81 | + } |
| 82 | + |
| 83 | + float lum = dot(map.rgb, vec3(0.2126, 0.7152, 0.0722)); |
| 84 | + |
| 85 | + colour += vec3(map.rgb * exposure); |
| 86 | + return vec4(colour, lum); |
| 87 | +} |
| 88 | + |
| 89 | +void main() { |
| 90 | + vec2 pos = gl_FragCoord.xy; |
| 91 | + vec2 uv = pos / vec2(width, height); |
| 92 | + fragColor = fragment(uv, pos); |
| 93 | +} |
0 commit comments