Shader - Specular Glitter-Sparkling effect

Question

I am trying to create a glittering effect for my realtime shader but I don't find any good ressources to help me.

Here are an example:

Are there some white paper or tutorial about such effect ?

What is the principle of this effect ?

Answer 1

There's an interesting article AMD - Getting Procedural.

It seems that sparkles are harder than I think. Decent solution: Use 3D position to index 3D noise function, add the view vector, use frac function to further randomize things.

Sparkle:

float specBase = saturate(dot(reflect(-normalize(viewVec), normal),
lightDir));
// Perturb a grid pattern with some noise and with the view-vector
// to let the glittering change with view.
float3 fp = frac(0.7 * pos + 9 * Noise3D( pos * 0.04).r + 0.1 * viewVec);
fp *= (1 - fp);
float glitter = saturate(1 - 7 * (fp.x + fp.y + fp.z));
float sparkle = glitter * pow(specBase, 1.5);

Answer 2

Couldn't this be something as simple as texture mapping with a normal map and a specular map. The normal map to give the glitter some "height" and the the specular map to make them "shiney" when the light is at the necessary angle?

Answer 3

I've done this before with a threshold followed by a couple of blurs and then a blend. In my case it was an interactive shader for stylizing video, so the controls were adjustable, but for something like a game you could probably set them statically.

First you threshold the input image, so everything with luminance below the threshold is set to transparent black (RGBA = 0,0,0,0). Everything with equal or greater luminance than the threshold remains as it is.

Next you apply a directional blur to the thresholded image.

Then apply a directional blur that's pointing 90° from the previous one to the thresholded image. (Note - do not apply it to the already blurred image. This is important! You should end up with 3 images - thresholded image, blurred image, and another blurred image where the blur is 90° from the first.)

Finally, using a simple additive blend, add the 2 blurred images to the original input. (You can now throw out the thresholded image.) The result will be that every pixel that has a luminance above the threshold will now have a sparkly cross on it. You can use more than 2 blurs if you want and adjust their angles so you get 3 or 5 or more points, but it means more passes.

Edit: One thing I forgot to mention - in your videos, it looks like they added a texture of random white dots distributed over the object to give it a glitter-like look.

Also, the above filtering process should be applied in screen-space.