How to achieve gradient transparency and glow

Gradient transparency and glow exist simultaneously

2 Likes

Hello, glow is an additional process so this should work out of the box as long as your transparent objects have emissive color.


外发光并且带有渐变透明这种效果如何实现呢

is it a shader?
if so maybe something like this?

https://playground.babylonjs.com/#411D8A#8

https://playground.babylonjs.com/#411D8A

Outer light emitting and transparent with a gradient this effect how to achieve it

is what that was in English(source: google translate). :slight_smile:

for a path with lines you can use a texture directly on planes or ribbon ?

mmh I was trying to make a very simple example about putting the diffuseTexture with alpha, setting an emissiveColor, and adding a glowLayer, but I don’t understand why the glow appears only when I disable the diffuseTexture?

https://www.babylonjs-playground.com/#6WDNN5#3

The glow layer like highlights do not support alpha blending:
https://www.babylonjs-playground.com/#6WDNN5#4

ok so, simply add an emissive color + a glowLayer do the trick https://www.babylonjs-playground.com/#6WDNN5#5

glow No gradient

So why not using just a texture on a plane ?

It could work nicely with planes (it is basically what particles do)

Transparency failure when using glow

but without the glow, you bake it in the texture.

Thank you

Like this: https://www.babylonjs-playground.com/#88AZQ#81

The result is good.

CreateTube Transparency failure when using glow !

Hence why we were discussing planes !

From your first picture, we are seeing planes not tubes on the arrow. For tubes you could try using opacityFresnels and emissive

Don’t forget the DefaultRenderingPipeline too, with Bloom effect available.

1 Like