Glow layer without increasing brightness

[thomasaull]

I’m trying to adjust the glow layer to my needs, basically what I’m trying to achieve is to use a different blend mode, so my pixels behind the glow do not get highlighted.

My basic scene looks like this:

I hooked into the glow layer like:

import { GlowLayer } from '@babylonjs/core/Layers/glowLayer'
import { Color4 } from '@babylonjs/core/Maths/math.color'
import { Constants } from '@babylonjs/core/Engines/constants'

export class MyGlowLayer extends GlowLayer {
  constructor(name, scene, options) {
    super(name, scene, options)
    this.neutralColor = new Color4(0, 0, 0, 0)
    this._effectLayerOptions.alphaBlendingMode = Constants.ALPHA_COMBINE
  }
}

to update the blend mode and neutral color. The resulting texture used for the glow layer looks like this:

I’m facing two problems here:

• The not glowing mesh is black (I can solve this by using the addIncludedOnlyMesh option I think
• Around the glowing mesh there is a black halo, it looks like it’s a premultiplied alpha, this is the issue I can’t get sorted

I know I’m wading pretty deep in the internals of babylonjs, but maybe there is an easy way how I can hook into the proper place and adjust this. Any pointers?

EDIT: Playground: https://playground.babylonjs.com/#LRFB2D#1

[syntheticmagus]

Hi thomasaull,

I’m not sure I quite understand the effect you’re going for as, to my knowledge, adding the glow color to pixels in the vicinity is what the glow effect is supposed to do as that’s what makes the mesh look like it’s glowing. Can you help me understand better what the result should look like? If the goal is to frame a mesh without affecting more distant pixels, could you do this using settings like texture and kernel size instead of blend mode?

glow layer and alpha fresnel | Babylon.js Playground (babylonjs.com)

[thomasaull]

Hey @syntheticmagus, thanks for your answer Basically what I’m trying to achieve is a large soft glow around the emissive object, but the pixel brightness should not be added to the final value, instead it should just use a transparent color of the original value (the transparency basically a result of a large blur kernel size). I did a quick mockup in photoshop using different blend modes, maybe it helps to illustrate it a bit:

Left: Original, Middle: Current Glow Layer, Right: What I want

[syntheticmagus]

Okay, thank you for the example. I might not be enough of an artist to fully understand the goal—to me, the one on the right just looks like a darker shade of yellow—but ALPHA_MAXIMIZED should avoid summing the colors, I think. Is this more akin to the effect you’re looking for?

glow layer and alpha fresnel | Babylon.js Playground (babylonjs.com)

[sebavan]

@syntheticmagus you nailed it !!!

the main issue with combine only would be the blur. As you noticed, you see a black halo cause the blur is blurring black from the background and the actual color so combine would not work correctly here.

Do you want to do a PR allowing to customize the blend mode ?

[sebavan]

This could be added to the glow layer options

[thomasaull]

@sebavan Is it possible at all for the blurred pixels to mix with transparency instead of a black color?

[sebavan]

it would require the clear color of the glow effect to be identical to the emissive one or a blur on alpha only which means a custom shader for the effect.

@Evgeni_Popov might help with this one ?

[Evgeni_Popov]

Have you tried to set the neutral color to your emission color as @sebavan suggested? It seems it should work (with neutralColor.a = 0).

[thomasaull]

Yeah the problem is, in the final scene there will be at least two different emission colors

[Evgeni_Popov]

@sebavan

or a blur on alpha only which means a custom shader for the effect.

We can’t currently override the shader used by the blur effect, except by modifying BABYLON.ShaderStore.ShadersStore["kernelBlurPixelShader"] / BABYLON.ShaderStore.IncludesShadersStore["kernelBlurFragment"] / BABYLON.ShaderStore.IncludesShadersStore["kernelBlurFragment2"].

For eg:

Babylon.js Playground

However, there’s still the problem of making the color change depending on the mesh, which I don’t know how to do as the blur pass is a global pass on the screen…

[thomasaull]

@Evgeni_Popov @sebavan Even though I’m not very familiar with shader programming I think I understand enough to get the problem. It’s probably difficult to solve, especially with the different emissive colors, so I’m going to try to dial it in with the glow effect provided. I really appreciate your help though, thanks for that!

[sebavan]

Yup without the right color on the background the blur will always pull in other colors, so the only workable things are basically none combined alpha blend equations hence the default ADD but I guess @syntheticmagus maximize would work ?

[Evgeni_Popov]

@thomasaull To test MAXIMIZE, try to do:

var gl = new BABYLON.GlowLayer("glow", scene);
gl._effectLayerOptions.alphaBlendingMode = BABYLON.Constants.ALPHA_MAXIMIZED;

[sebavan]

If that works out, I ll try to add the options, please let us know ?

[thomasaull]

It actually does not make any visual difference in my case:

Not sure why. Can you give me a pointer where I can get the NeonPipe gltf from the playground, so I can test it with my code?

In the playground it does look different: https://playground.babylonjs.com/#LRFB2D#204

[roland]

Hi!
I bet you have overlooked it. Line 7 contains the base url and filename.

[sebavan]

Here it is Website/build/assets/NeonPipe at master · BabylonJS/Website · GitHub

[thomasaull]

@roland Yes I have seen this, but I was too lazy to get all the additional textures from the network tab

@sebavan Thanks for the pointer. I checked it in my project and at first it wasn’t working. I did a bit more digging and it looks like the problem is the Default Post Processing Pipeline I was using, completely deactivating it did the trick:

[thomasaull]

To be more specific it looks like the FXAA is the setting which causes the ALPHA_MAXIMIZED to not work properly

Edit: No it’s both, the “Image processing” and “FXAA”