Replace each white spot of image to radial gradient

Question

Recently, I read an article about a sun shader (XNA Sun Shader) and decided to implement it using OpenGL ES 2.0, but I encountered a problem with the shader:

I have two textures, one of them is the fire gradient texture:

The other one is a texture which will have each white part filled using the gradient;

So, I'm going to have a result similar to the image below (do not pay attention to the texture being rendered on a sphere mesh):

I really hope that somebody knows how to implement this shader.

As an alternative, how do I make it in photoshop?

Answer 1

If the source image is bi-level (1-bit black/white), a direct mapping of greyscale to gradient will not suffice.

A possible solution to the problem is to compute a distance field (preferably as an offline task), where each texel encodes the distance to the nearest white texel. You can then use that distance to sample the gradient map.

The images below show a source image and a corresponding signed distance field I had lying around:

Answer 2

As the article states, in the shader you use the luminance value (between 0 and 1, or between black and white) to index the "fire" texture horizontally. This should give you the color that the pixel shader returns:

1. Index the noise texture. This returns a grey color
2. Take any component from the grey color (r, g and b should be the same)
3. Use that value to index the fire texture as x, with y being any value (e.g. 0.5)
4. Return the color from the fire texture

If you're not going to use the addition technique the article describes, it would make more sense to bake the reds and yellows into the texture, so you can save some GPU cycles. I'm not sure how to do this with the Photoshop noise generator, but I suppose you could always draw the edges by hand :)