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: fire gradient texture

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

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?


2 Answers 2


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:

raw bi-level bitmap signed distance field

  • \$\begingroup\$ This technique is also incredibly good for text rendering. \$\endgroup\$
    – akaltar
    May 11, 2015 at 19:24

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 :)

  • \$\begingroup\$ It seems to me the noise texture must have gray gradient color too, to detect luminance. Is it right? \$\endgroup\$
    – Nolesh
    Jul 15, 2014 at 13:57
  • \$\begingroup\$ Looking at the image, there is just a bit of gray gradient along the edges, yes. Which is why the final one only has a bit of yellow/red along the edges, and most of it is either white or black. I guess the trick is that the fire texture turns yellow quickly, so even high values will look pale yellow, unless they're really close to 1. \$\endgroup\$
    – Sergio
    Jul 15, 2014 at 16:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .