[Solved] Transparent fog?

[chardetm]

Hello everyone!

I wonder if it is possible to "make objects disappear in the distance", just like a fog but playing with the alpha channel. I've tried this:

scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
scene.fogColor = new BABYLON.Color4(0,0,0,0.00001);
scene.fogStart = 30;
scene.fogEnd = 70;

I expected it to work because if I understood correctly the color with fog is computed like distanceCoef*fogColor + (1-distanceCoef)*originalColor where distanceCoef is between 0 and 1. But it seems like these are treated as Color3 and not Color4.

I really need transparency because I don't plan to have a uniform background. Any idea?

To test this you can go to http://playground.babylonjs.com/?2, paste the code above somewhere and set the background color to anything.

Thank you!

EDIT: Added screenshot: here I would like the objects to become transparent in the distance (so appear more and more green), not just black.

EDIT 2: I found an example of exactly what I would like, this is a screenshot from a RockBand game, see how the neck disappears in the distance? 

[GameMonetize]

You have several options:

- Play with LOD because the LOD engine will do exactly what you want when switching between LOD levels

- Just register an event like beforeRender and set mesh.material.alpha manually based on distance

[chardetm]

40 minutes ago, Deltakosh said:

You have several options:

- Play with LOD because the LOD engine will do exactly what you want when switching between LOD levels

- Just register an event like beforeRender and set mesh.material.alpha manually based on distance

Thank you for your reply! The problem I see with what you suggest is that in my case I will have a long mesh with an end close to the camera and an end in the distance, so the different alpha levels should apply even on a single mesh...

I thought of splitting the mesh in several parts but I fear that the limits between the parts become visible if I don't split it in enough parts, and that it may take a lot of resources if I split it in say 100...

[max123]

Your best bet IS fog. And yes, it works best if you have a uniform background of the same colour.

[chardetm]

6 minutes ago, max123 said:

Your best bet IS fog. And yes, it works best if you have a uniform background of the same colour.

The problem is that having a uniform background is not an option for me... 

[max123]

Did you check out the environment demo? http://playground.babylonjs.com/#21HYYA
I don't know what you have for the background, but maybe using a cube map environment can help?

[chardetm]

On 12/14/2016 at 3:12 PM, max123 said:

Did you check out the environment demo? http://playground.babylonjs.com/#21HYYA
I don't know what you have for the background, but maybe using a cube map environment can help?

I have, the issue is that my background is a HTML element under the canvas which is dynamic, that's why I need transparency... 

[BitOfGold]

I also need some kind of material transparency, for LOD transiton. A fade-in distance, a fade-out distance and a fade-ramp length.
(I need this in the material not per mesh because I have lot of vegetation meshes (trees) in an SPS.)

Problem is, I think I cannot work on this until christmas, because I have a printing company to run, 0-24 in this holiday season...
But after the season I think I will send this in a PR with some others like layered fog.
And I think this will solve your problem too.

 

[BitOfGold]

If your meshes are at a fixed position, another option would be a vertex alpha value set by z value.

 

[GameMonetize]

So you would need to have alpha = clamp(1 - distance / maxDistance, 0, 1) correct?

[Nabroski]

just something to think about
http://playground.babylonjs.com/#BRBL3#0

[Nabroski]

@chardetm

Ah, now you added some pictures, so you dont want to move the camera to get transparent background, you will able to move the fog ?

[chardetm]

Sorry for the delay, exams and everything...

So! Thanks to everyone who replied! In the meantime I found a way to do what I want but it feels like I'm using a missile to kill an ant, I'm using an opacityTexture on my mesh. But if I could do it without a texture that would be great!

On 12/15/2016 at 7:49 AM, BitOfGold said:

If your meshes are at a fixed position, another option would be a vertex alpha value set by z value.

 

This sounds promising, how can I do that?

On 12/15/2016 at 9:48 AM, Deltakosh said:

So you would need to have alpha = clamp(1 - distance / maxDistance, 0, 1) correct?

Yes more or less, ultimately I would like it not to be linear all the way but this is the spirit! If I know how to do this I know how to do exactly what I want!

On 12/15/2016 at 12:00 PM, Nabroski said:

just something to think about
http://playground.babylonjs.com/#BRBL3#0

 

On 12/15/2016 at 2:51 PM, Nabroski said:

@chardetm

Ah, now you added some pictures, so you dont want to move the camera to get transparent background, you will able to move the fog ?

I think your solution applies the alpha to the whole mesh, my problem with this is that I want a different alpha for a single mesh because this mesh is very long and I want it to disappear in the distance...

[BitOfGold]

@chardetm
Here is an alpha fog with vertex colors:
http://playground.babylonjs.com/#BRBL3#29

I don't know why the "back" sphere2 sometimes has the vertex alpha of the first sphere. (If you go behind)
EDIT: The rendering order of the meshes changes when you move the camera, and that causes some problems.

[chardetm]

On 12/21/2016 at 7:42 AM, BitOfGold said:

@chardetm
Here is an alpha fog with vertex colors:
http://playground.babylonjs.com/#BRBL3#29

I don't know why the "back" sphere2 sometimes has the vertex alpha of the first sphere. (If you go behind)
EDIT: The rendering order of the meshes changes when you move the camera, and that causes some problems.

Thanks that's exactly what I want to do!

[Pryme8]

Smart UVing, and a alpha texture that fades the model... in the situation of the guitar necks.

or a shader that sets the opacity of the material dependent on distance from the camera.