The best you can do is using a texture to get the noise from, note that this is not the same as sampling a noise texture, you are just getting the random values from the texture so you can animate it as a normal noise function. This makes it really fast. If you input the same parameters you will return the same output, and the change in the input value goes according to the change in the output value.
// Courtesy of Iñigo Quilez.
float noise( in vec3 x )
vec3 p = floor(x);
vec3 f = fract(x);
f = f*f*(3.0-2.0*f);
vec2 uv = (p.xy+vec2(37.0,17.0)*p.z) + f.xy;
vec2 rg = textureLod( iChannel0, (uv+ 0.5)/256.0, 0.0 ).yx;
return mix( rg.x, rg.y, f.z );
This one is also very fast and actually some smartphones may be better off with no texture calls (faster? I am not sure. You'll have to test)
// Pseudo random number generator.
float hash( vec2 a )
return fract( sin( a.x * 3433.8 + a.y * 3843.98 ) * 45933.8 );
// Value noise courtesy of BigWingz
// check his youtube channel he has
// a video of this one.
// Succint version by FabriceNeyret
float noise( vec2 U )
vec2 id = floor( U );
U = fract( U );
U *= U * ( 3. - 2. * U );
vec2 A = vec2( hash(id) , hash(id + vec2(0,1)) ),
B = vec2( hash(id + vec2(1,0)), hash(id + vec2(1,1)) ),
C = mix( A, B, U.x);
return mix( C.x, C.y, U.y );
The algorithm is pretty simple, you create tiles with your UV's and you assign a random colour to each of the tiles, then you interpolate between them.
Here is a link for you to check Iñigo Quilez but if you are asking for something glsl related you probably know who this guy is.
If you go for the texture based approach you need this texture to get the noise function to work:
Remember to not VFlip it and to have it as GL_REPEAT with MipMap filters.
WebGL Noise2D Demo, comment the VALUENOISE define to see the texture noise.
And a post that I wrote that may be related.