Neon effect, using an imported material (looks good from up close but not far away)

[bigrig]

Hi all! I see a few posts on creating neon effect using glow layer. I’m wondering if there’s a method to tweak material settings to get a decent neon look without adding additional code or the glow layer (b/c it really slows down frame rate - even though it looks awesome).

I’ve got it working for the most part from up close - but when the camera moves far away, the neon fades into a distant scribble. Is there anyway to bump up the emissiveness of the material so that it looks good at a distance (it’s already at level-1)?

Looks pretty good up close:

But faded out from a few feet away (and as you can see - all of the other neon signs in the distance are barely visible).

Whereas, this is the desired effect (screenshot from blender):

Playground:

Babylon.js Playground

[Evgeni_Popov]

You can try to boost the emissive by doing:

      scene.materials.forEach((mat) => {
          if (mat.emissiveTexture) {
              mat.emissiveTexture.level = 2;
          }
      });

Also, for a fair comparison, you should use the same background and same lighting, because there is more contrast in the Blender screenshot.

[bigrig]

Nice - that is a lot better. Set background to black and bumped up emissive level a bunch (didn’t realize it was possible to go past 1 - as that is the max level in the inspector - logging that to brain for future use).

Beyond emissive level - i’m assuming the only other way to bump up glow factor is either by:

1. making lines thicker
2. glow layer
3. increase contrast (bring down env level further)
   Is that right?

Thx!!
Improved version:

Babylon.js Playground

[Panuchka]

Looks pretty rad with the glow layer on https://playground.babylonjs.com/#WF3VKZ#299

You need to fine tune the textures then I think to prevent everything from glowing

[Evgeni_Popov]

@bigrig

• making lines thicker
• glow layer
• increase contrast (bring down env level further)
  Is that right?

Indeed, that’s what I’m thinking of to improve the effect, but maybe real artists will find other ways!

[bigrig]

Wow! You’re right @Panuchka that looks much better. Esp with emissive and env. levels turned down.
Was afraid that would slow it way down, but seems fine re: fps. A little fog and this is going to be full blade runner.

Babylon.js Playground

[Evgeni_Popov]

@Panuchka

Looks pretty rad with the glow layer

Yes, but the problem is that the boost of the emissive level makes most of the glowing materials appear to be white:

Keeping emissive level to 1 is better I think:

But now we are back to the first problem, where some neons are too faint.

However, by a small change to the glow layer, we could allow the user to boost the emissive for some meshes and not other:

Boost multiplier	Result
1 (no boost)
3
5
10

Note: to perform those screenshots, I directly modified the shader thanks to Spector.

[bigrig]

@Evgeni_Popov

directly modified the shader thanks to Spector.

Thx @Evgeni_Popov.
What does that mean though? ^ How would I replicate?

[mawa]

What if you just push the emissiveTexture level (since you have one) a hell of lot (i.e. 20)

Babylon.js Playground

Edit: In this (rushed) PG, I looked at the ‘cat sign’ (or better said, modified materials of name “Mat_Neon_Atlas_2” and “Mat_Neon_Atlas_1”

Edit: And then actually, one thing I sometimes do as a designer’s trick is that I add a glow (or blur) to my emissiveTexture. And then I explode my emissiveTexture.level (not the emissiveIntensity, else it would turn white) Sometimes with this I don’t even use the gl or hl layers (for saving performance) but I mostly use it just to enhance the FX and enhance it in the distance

Edit1: Sorry, just edited the PG. Forgot that you need to compensate the directIntensity else when you come close to a sign with direct light, the texture will turn white.

[mawa]

Yeah, I really rushed this, sorry . Problem is I don’t have access to my dropbox just now so I cannot really illustrate my approach. I hate doing that but that’s what it is just now

What I wanted to say is: Try add some blur and enough intensity to the albedo(base) color texture already.

Try using this rev in psd texture for the albedo/base. It should give you some blurry/neon fx already. Next, as in my latest PG, push the emissiveTexture.level exploded (to i.e. 20) and compensate with directIntensity to -20.

The base texture with added blur overlay and more coverage on colors (intensity):
Mat_Neon_Atlas_2-(Base-Color)_rev.png.zip (1.6 MB)

Looks something like this on a black BG:

[mawa]

Is it just me or is there some backface culling issue on this white signage to the right?

[Evgeni_Popov]

@bigrig

What does that mean though? ^ How would I replicate?

This PR will add this new possibility:

Effect Layer: Set intensity of effect per mesh

You will need to call glowLayer.setEffectIntensity(mesh, intensity) to set the intensity of the effect per mesh (added bonus, this will also work for the highlight layer):

Babylon.js Playground

(will only work after the PR is merged)

[Calsa]

You are sort of doing it by bumping your Emmisive mat intensity but at the cost of color control, but lighter tint colors “glow” more visually.

So by staying away from darker shades when skinning your glow layer material, (or recolorizing it either programatically after import or back in the art pipeline using in your fav texture tools) you can get a bost in glow.

You can also fake a “glow” around a window or any other glowing thing by feathering the hard edges of the window, door, or other whatever is glowing, with a falling off splash of the glow material around the outer edge. It gives the illusion light is spilling out.

[bigrig]

Amazing tips and tricks everyone. The forum really delivers again! Thx all.

[bigrig]

This doesn’t really run fast enough to be playable, but wow! Fog!!

Babylon.js Playground

[bigrig]

Seems like the non-gpu version runs faster:

Babylon.js Playground

[Evgeni_Popov]

The CPU and GPU particle systems do not behave exactly the same way, as they are two different code paths. You may need to change some parameters slightly to align their behavior.

[mawa]

Let me give you my useless art dir feedback on this. To be honest, I prefer the version without fog. At least, without this kind of fog. So far, I really like your project design because it is consistent and looks consistent in terms of art dir. This fog really looks to me like just a fancy added fx. Of course, my opinion only.

[kloklike]

Hello, is there any way this setEffectIntensity can also be applied to a mesh that only uses emissiveColor (and not emissiveTexture)? Currently it seems to have no effect in this situation

edit: added playground Babylon.js Playground

[Evgeni_Popov]

This PR will add support for the emissive color too:

Effect layer: Intensity also affects emissive color