Advertisement Jump to content
Sign in to follow this  

Rendering Neon Signs

This topic is 3862 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Standard gaussian-blurred glow should work fine. Clicky. You could do HDR-based glow instead, but it's probably overkill.

Share this post

Link to post
Share on other sites
Several ways to do it, depends on what you had in mind with the shaders. The best results would probably be reached with HDR/bloom. You render the neon lights with an intense color, and do a gaussian blur. has a nice little (Delphi) demo doing this.

When rendering to your HDR render target, you could copy the contents to a second smaller buffer that will be used for blurring. I make that buffer smaller (for example, 1/4 of the original screen size) to gain some speed, and when scaling up smaller textures in the end, it will automatically produce some 'blur' when (bi/tri)linear interpolation has been enabled. Another good reason to use a smaller texture is because doing a gaussian blur is a relative heavy task. The less pixels to blur, the faster of course.

color = tex2D( HDR_ScreenBuffer, texcoords );
out.color = min( color-1,0 ); // only pass color if > 1
// and/or apply some extra contrast
out.color = pow( color, <factor> );

Once you have the bright colors in your "blur buffer", you blur it further with a guassian blur. People often do that in 2 directions. First horizontal, then vertical. Check out that demo I mentioned for a blurring shader.

Now you have a small and blurred texture that only contains bright colors (your neon lights). Paste that on top of your final results, et voila.

You can do the same thing without HDR. Just render your scene normally, take a screen capture, and apply the steps above. However, you may loose some color detail, and/or bright lights will simply result in a pure white blur.

If a gaussian blur is too much, you can also do it the Tron way. A long time ago I read some article about a guy doing "Tron" bloom in the old Halflife engine. Yet again, the normal rendered screen was captured into a texture. Apply a bright-pass filter onto that texture like in the shader code above to discard the darker pixels. Now instead of blurring, they rendered that texture 4 (or more) times on top of the normal result, but with a slight offset to the left/right/top/bottom. This will produce a blur as well, although not as smooth as a guassian blur of course. Nevertheless, its a cheap solution. You could downscale that texture as well to a smaller texture to have some extra blur produced by the linear interpolation when rendering it on full screen size on top.

I hope there were some usefull tips for you, good luck!

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!