Skip to content

Instantly share code, notes, and snippets.

@eladg
Last active November 22, 2022 06:24
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eladg/522baa6d9101b828539d4ed1b194891e to your computer and use it in GitHub Desktop.
Save eladg/522baa6d9101b828539d4ed1b194891e to your computer and use it in GitHub Desktop.
WebGL-HeatMap - Shaders in GLSL
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp int;
precision highp float;
#else
precision mediump int;
precision mediump float;
#endif
varying vec2 off, dim;
varying float vIntensity;
void main(){
float falloff = (1.0 - smoothstep(0.0, 1.0, length(off/dim)));
float intensity = falloff*vIntensity;
gl_FragColor = vec4(intensity);
}
attribute vec4 position, intensity;
varying vec2 off, dim;
varying float vIntensity;
uniform vec2 viewport;
void main(){
dim = abs(position.zw);
off = position.zw;
vec2 pos = position.xy + position.zw;
vIntensity = intensity.x;
gl_Position = vec4((pos/viewport)*2.0-1.0, 0.0, 1.0);
}
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp int;
precision highp float;
#else
precision mediump int;
precision mediump float;
#endif
uniform sampler2D source;
varying vec2 texcoord;uniform float value;
void main(){
gl_FragColor = vec4(texture2D(source, texcoord).rgb*value, 1.0);
}
attribute vec4 position;
varying vec2 texcoord;
void main(){
texcoord = position.xy*0.5+0.5;
gl_Position = position;
}
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp int;
precision highp float;
#else
precision mediump int;
precision mediump float;
#endif
uniform sampler2D source;
varying vec2 texcoord;
float linstep(float low, float high, float value){
return clamp((value-low)/(high-low), 0.0, 1.0);
}
float fade(float low, float high, float value){
float mid = (low+high)*0.5;
float range = (high-low)*0.5;
float x = 1.0 - clamp(abs(mid-value)/range, 0.0, 1.0);
return smoothstep(0.0, 1.0, x);
}
vec3 getColor(float intensity){
vec3 blue = vec3(0.0, 0.0, 1.0);
vec3 cyan = vec3(0.0, 1.0, 1.0);
vec3 green = vec3(0.0, 1.0, 0.0);
vec3 yellow = vec3(1.0, 1.0, 0.0);
vec3 red = vec3(1.0, 0.0, 0.0);
vec3 color = (
fade(-0.25, 0.25, intensity)*blue +
fade(0.0, 0.5, intensity)*cyan +
fade(0.25, 0.75, intensity)*green +
fade(0.5, 1.0, intensity)*yellow +
smoothstep(0.75, 1.0, intensity)*red
);
return color;
}
vec4 alphaFun(vec3 color, float intensity){
float alpha = smoothstep(0.00000000, 1.00000000, intensity);
return vec4(color*alpha, alpha);
}
void main(){
float intensity = smoothstep(0.0, 1.0, texture2D(source, texcoord).r);
vec3 color = getColor(intensity);
gl_FragColor = alphaFun(color, intensity);
}
attribute vec4 position;
varying vec2 texcoord;
void main(){
texcoord = position.xy*0.5+0.5;
gl_Position = position;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment