Skip to content

Instantly share code, notes, and snippets.

@avinashselvam

avinashselvam/cellular_noise.glsl

Created November 29, 2025 06:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save avinashselvam/77f51e3efd653d6683f9bbd2a9d05fb2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save avinashselvam/77f51e3efd653d6683f9bbd2a9d05fb2 to your computer and use it in GitHub Desktop.
Download ZIP
Noise Shaders
Raw
cellular_noise.glsl
#version 300 es
precision highp float;
precision highp sampler2D;
// normalized coordinates, (0,0) is the bottom left
in vec2 uv;
// resulting fragment color, you may name it whatever you like
out vec4 out_color;
// size of the canvas in pixels
uniform vec2 u_resolution;
// elapsed time since shader compile in seconds
uniform float u_time;
int hash(vec2 st_int) {
float random = dot(st_int, vec2(123.456, 78.9));
random = 4. * fract(sin(random)*987.654);
return int(random - fract(random));
}
float fade(float t) {
return t * t * t * (t * (t * 6. - 15.) + 10.);
}
vec2 rot(vec2 v, float a){
return mat2x2(
cos(a), -sin(a),
sin(a), cos(a)
) * v;
}
vec2 random2(vec2 st_int) {
float randomx = dot(st_int, vec2(123.456, 78.9));
randomx = fract(sin(randomx)*54.876);
float randomy = dot(st_int, vec2(456.16, 608.9));
randomy = fract(sin(randomy)*987.654);
return rot(vec2(randomx, randomy), sin(u_time));
}
vec2 gradients[4] = vec2[4](vec2(1., 0.), vec2(-1., 0.), vec2(0., 1.), vec2(0., -1.));
void main(){
vec2 st = uv*5.;
vec2 st_int = floor(st);
vec2 st_fract = fract(st);
vec2 fp;
float value = 100.;
for (int i=-1; i<=1; i++) {
for (int j=-1; j<=1; j++) {
fp = vec2(i,j) + random2(st_int + vec2(i,j));
value = min(value, length(fp-st_fract));
}
}
out_color = vec4(vec3(1.-value, 0.1, 0.), 1.);
}
Raw
perlin_noise.glsl
#version 300 es
precision highp float;
precision highp sampler2D;
// normalized coordinates, (0,0) is the bottom left
in vec2 uv;
// resulting fragment color, you may name it whatever you like
out vec4 out_color;
// size of the canvas in pixels
uniform vec2 u_resolution;
// elapsed time since shader compile in seconds
uniform float u_time;
int hash(vec2 st_int) {
float random = dot(st_int, vec2(123.456, 78.9));
random = 4. * fract(sin(random)*987.654);
return int(random - fract(random));
}
float fade(float t) {
return t * t * t * (t * (t * 6. - 15.) + 10.);
}
vec2 rot(vec2 v, float a){
return mat2x2(
cos(a), -sin(a),
sin(a), cos(a)
) * v;
}
void main(){
vec2 st = uv*10.;
vec2 st_fract = fract(st);
vec2 st_int = st - st_fract;
vec2 gradients[4] = vec2[4](vec2(1., 0.), vec2(-1., 0.), vec2(0., 1.), vec2(0., -1.));
vec2 tl = vec2(0., 0.);
vec2 tr = vec2(1., 0.);
vec2 bl = vec2(0., 1.);
vec2 br = vec2(1., 1.);
float tl_v = dot(tl - st_fract, rot(gradients[hash(st_int + tl)], u_time));
float tr_v = dot(tr - st_fract, rot(gradients[hash(st_int + tr)], u_time));
float bl_v = dot(bl - st_fract, rot(gradients[hash(st_int + bl)], u_time));
float br_v = dot(br - st_fract, rot(gradients[hash(st_int + br)], u_time));
float top = mix(tl_v, tr_v, fade(st_fract.x));
float bottom = mix(bl_v, br_v, fade(st_fract.x));
float value = mix(top, bottom, fade(st_fract.y));
out_color = vec4(vec3(0.4, 0., 2.*value), 1.);
}
Raw
simplex_noise.glsl
#version 300 es
precision highp float;
precision highp sampler2D;
// normalized coordinates, (0,0) is the bottom left
in vec2 uv;
// resulting fragment color, you may name it whatever you like
out vec4 out_color;
// size of the canvas in pixels
uniform vec2 u_resolution;
// elapsed time since shader compile in seconds
uniform float u_time;
int hash(vec2 st_int) {
float random = dot(st_int, vec2(123.456, 78.9));
random = 4. * fract(sin(random)*987.654);
return int(random - fract(random));
}
float fade(float t) {
return t * t * t * (t * (t * 6. - 15.) + 10.);
}
vec2 rot(vec2 v, float a){
return mat2x2(
cos(a), -sin(a),
sin(a), cos(a)
) * v;
}
void main(){
vec2 gradients[4] = vec2[4](vec2(1., 0.), vec2(-1., 0.), vec2(0., 1.), vec2(0., -1.));
vec2 st = uv*3.;
float skew_factor = 0.5*(sqrt(3.0)-1.0);
float skewed = (st.x + st.y)*skew_factor;
vec2 index = floor(st + skewed);
float unskew_factor = (3.0-sqrt(3.0))/6.0;
float t = (index.x + index.y)*unskew_factor;
vec2 p0 = st - index + t;
vec2 offset;
if (p0.x > p0.y) offset = vec2(1., 0.);
else offset = vec2(0., 1.);
vec2 p1 = p0 - offset + unskew_factor;
vec2 p2 = p0 - 1. + 2.*unskew_factor;
float c0 = max(0.5 - p0.x*p0.x - p0.y*p0.y, 0.);
float c1 = max(0.5 - p1.x*p1.x - p1.y*p1.y, 0.);
float c2 = max(0.5 - p2.x*p2.x - p2.y*p2.y, 0.);
float n0 = pow(c0, 4.)*dot(rot(gradients[hash(index)], u_time), p0);
float n1 = pow(c1, 4.)*dot(rot(gradients[hash(index + offset)], u_time), p1);
float n2 = pow(c2, 4.)*dot(rot(gradients[hash(index + 1.)], u_time), p2);
float value = (n0+n1+n2)*70.;
out_color = vec4(vec3(value, 0.1, 3.*value), 1.);
}
Raw
white_noise.glsl
#version 300 es
precision highp float;
precision highp sampler2D;
// normalized coordinates, (0,0) is the bottom left
in vec2 uv;
// resulting fragment color, you may name it whatever you like
out vec4 out_color;
// size of the canvas in pixels
uniform vec2 u_resolution;
// elapsed time since shader compile in seconds
uniform float u_time;
float hash(vec2 uv) {
float random = dot(uv, vec2(123.456, 78.9));
random = fract(sin(random)*987.654);
return random;
}
void main(){
out_color = vec4(vec3(hash(uv*u_time)), 1.);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment