top of page

Why use noise in Shaders

Usefulness of the examples below highly depends on your screen and brightness (crank it up). In perfect conditions, the first image should contain visible lines radiating from the upper left circle. But they aren't supposed to be there. Everything should have been smooth as a newborn baby's butt. So what happened?

There are no textures used, so compression is not the reason. Graphic is generated by shader in real time, and there is no room for floating-point precision error.

Some may want to make an educated guess on where those lines are coming from. This would be a good time to stop reading and take a look at the images.

The answer is fairly simple: turns out 16,777,216 colors are still not enough to fool human eye. Well, not exactly. The brightness of 1000/ms photons and 1100 photons/ms is almost the same to us. But 10 photons and 20 photons - that difference we notice. It's because our eyes have logarithmic vision. And monitors do take that into account when giving more precision to darker shades. But that is still not enough to create enough brightness variety on the darker spectrum of the color palette. So even though the shader outputs a correct number (yes, I checked), monitor ends up displaying only a limited gradation per channel (0 - 255 for Red, Green and Blue).

For the second image (above), I added noise (That is why it is still loading if you have slow internet connection). But not the kind that just placed on top of the image. I displaced the radius value which is used to produce the shadow. The second image still displays a limited range of colors, but because those colors are sort-of shuffled there, lines become less clear. Aside from ones at the edge: (again, depending on the device, time of day, the following image may just look like a black box to you)

There is one last point left to make: when you are using noise in the shader, there is no reason to keep it static. If noise texture is used, sampling UV can be displaced by sin/cos of time. Same if it is generated by some messy formula. So each of those pixels will simmer slightly each frame and noisiness becomes less visible as a result. I still haven't mastered the art of noisiness... well, I can be an annoying bastard sometimes, so I master that kind of noisiness. But when it comes to using it subtly in a shader to smooth out a gradient, there are still areas to work on. Currently, I'm just making sure to have a slider for adjusting it to a current subtle value.

bottom of page