Neon light GUI Text

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

download

1 Like

Hiya WR… good to see you again.

Here’s an unfinished method. https://www.babylonjs-playground.com/#2ARI2W#21

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.

2 Likes

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

1 Like

…Just add some glow :slight_smile:
https://www.babylonjs-playground.com/#SBDQFV

If we add more dynamic textures it is possible to use uScale, uOffset and the whole bunch of parameters.
https://www.babylonjs-playground.com/#SBDQFV#1

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

3 Likes

Pretty neat!

Or imitate neon effect with GUI buttons (simplest example)
https://www.babylonjs-playground.com/#ZI9AK7#303

1 Like

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

https://www.babylonjs-playground.com/#2ARI2W#30

2 Likes

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” - https://www.babylonjs-playground.com/#165IV6#914
And with small offset of the clone - https://www.babylonjs-playground.com/#165IV6#917


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 - https://www.babylonjs-playground.com/#165IV6#919 (and dispose materials which we don’t need anymore).

And finally we may add some simple effects https://www.babylonjs-playground.com/#165IV6#921
It is possible even to imitate vintage dribble, like in this CSS example
https://codepen.io/eldinor/pen/vYBbJeW

3 Likes

i love this!!!

1 Like

@Wingnut
@labris

It’s a booze week
https://www.babylonjs-playground.com/#KLGZ8I

flickering neon
https://www.babylonjs-playground.com/#KLGZ8I#1

2 Likes

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.

https://playground.babylonjs.com/#18MK9J

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?

3 Likes

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 ?

@sebavan https://playground.babylonjs.com/#18MK9J#1

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:

https://playground.babylonjs.com/#18MK9J#2

2 Likes