Neon light GUI Text

Hmm just wondering, how can I get the neon effect by just using Babylon.js GUI system?


1 Like

Hiya WR… good to see you again.

Here’s an unfinished method.

Picture this. When the yellow text outlines turn ON, you turn-on a background image of “the glow”, that you painted in a 2D paint program. You would need to carefully “fit” the glow-background-image… to whatever words you put on the neon sign.

I was too lazy to make a custom glow-background image for the beer sign… sorry. But I think you get the idea. The back-glow comes from a background image, and the textBlock comes from GUI.

You could also COMPLETELY paint the sign(s)… including the text, in a 2D paint program, and then use a GUI Image control to display it. You would still be using GUI, but just barely. Mostly, you would be using a 2d paint program. Created in paint program, displayed in GUI.

That’s the only way I could think-of. HighlighttLayer and GlowLayer effects COULD possibly be created for GUI text, but it wouldn’t be easy, I would say.


Thanks very much, i got the picture clearly :+1:

1 Like

…Just add some glow :slight_smile:

If we add more dynamic textures it is possible to use uScale, uOffset and the whole bunch of parameters.

Or add more usual textures (ambient, roughness) to create great visual effects - all within one plane.


Pretty neat!

Or imitate neon effect with GUI buttons (simplest example)

1 Like

A combination of wingnut and labris’ idea = Babylonjs digital clock!!!


Looks great!
As universal constructor it definitely should be published at Snippets section - maybe in the new GUI section :slight_smile:

1 Like

If we go off the plane (making the question a bit wider) we can use tubes (actually it is even possible to make 3D tube fonts).
Here is the simplest example with letter “P” -
And with small offset of the clone -

Then we can add some plane where the neon signs are usually somehow mounted; then merge, clone, position and merge again - to have just 1 mesh at the end - (and dispose materials which we don’t need anymore).

And finally we may add some simple effects
It is possible even to imitate vintage dribble, like in this CSS example


i love this!!!

1 Like


It’s a booze week

flickering neon


I would do a tube that was extruded by a bezier path, so that way you can keep it as a single object (like a real neon sign) and then use the UV to create gaps in the lighting and then add a glow layer.

this will make it so you could add noise and other things easily and it will all be tileable.

just a quick mock-up, I did not add the painted areas I was talking about, but Ideally, the tube that passes behind the other one’s glass would be black.

also is there any reason emissiveTexture does not add to the glow layer?


Just to add some context to the topic - several neon signs from Fallout 4.
(If you build voxel world you definitely need some customizable neon constructor for settlers :slight_smile:

1 Like

emissive texture should work with the glow layer, could you share your broken example ?


It is because there is alpha in the generated texture :slight_smile: I did never see this one coming.

I ll fix it asap.

1 Like

But actually it does not impact as much as your emissiveColor (multiply with the texture one) being all black :wink: