Sign in to follow this  

Rendering Neon Signs

This topic is 3461 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

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. www.delphi3d.net 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!
Rick

Share this post


Link to post
Share on other sites

This topic is 3461 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this