3

I am using three.js to call a fragment shader - that shader specifies a color for my material, broken out into rgb - and I want to see if I can multiply those colors by a random value. This is the code I'm using so far:

gl_FragColor = vec4( color.r*.5, color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values

and this is what I'd want to do if it were javascript, though obviously this doesn't work inside a GLSL shader script:

gl_FragColor = vec4( color.r*Math.random(), color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values
mheavers
  • 29,530
  • 58
  • 194
  • 315
  • 1
    Do you want the random number to be different for every fragment, but not change from frame to frame? Do you want it to be the same for every fragment but change from frame to frame? Or do you want both, thus producing a nightmare of flashing pixels for the viewer? – Nicol Bolas May 29 '12 at 16:44
  • Either I suppose. A nightmare of flashing pixels sounds intriguing =) I'm experimenting at this point. – mheavers May 29 '12 at 17:27

1 Answers1

5

For psuedorandom values in a shader I highly recommend Ashima's WebGL noise library. It takes in a x/y/z value and spits out simplex noise. This means it's stable from frame to frame. If you need random values that change pass a time-modulated value into the noise function.

Toji
  • 33,927
  • 22
  • 105
  • 115
  • I can vouch for the quality of their Perlin noise implementation, as I've used it in the past. One of the authors talks a little more about it in this answer: http://stackoverflow.com/a/9823712/19679 – Brad Larson May 29 '12 at 17:44