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. 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
…Just add some glow 
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.
4 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!!!
2 Likes
Looks great!
As universal constructor it definitely should be published at Snippets section - maybe in the new GUI section
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
4 Likes
i love this!!!
1 Like
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
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 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 
2 Likes