Manually setting the fog does not take effect

Questions
1

The fog effect is initialized and functions as demonstrated in the example.
PG1：https://playground.babylonjs.com/#4XAQDU

1
1934×777 16.6 KB

However, when attempting to set the fog effect manually, it does not take effect, as shown in the example.
PG2：https://playground.babylonjs.com/#4XAQDU#1

2
2962×824 26.4 KB

I need to set the fog effect manually. How can I make it work?

2

Hello!

You have to assign a material to your meshes. Then your code will work.

    const mat = new BABYLON.StandardMaterial("mat")
    sphere.material = mat
    ground.material = mat
2 Likes
4

It is not inherently related to setting the material; when the mesh is without a specified material, it will use the default material. :smile:

5

I agree that there is something weird I’m missing here :thinking:
It appears that the default material makes so that the fog is either enabled or disable but won’t update. While when creating a material manually, then the fog can be changed…

6

Really? I didn’t know it :smiley: Just joking :smiley:

    btn.onPointerClickObservable.add(() => {
        const mat = scene.getMaterialByName("default material")
        sphere.material = mat
        ground.material = mat

        if (scene.fogMode !== 3) {
            scene.fogMode = 3;
            scene.fogStart = 0;
            scene.fogEnd = 20;
        }
        else {
            scene.fogMode = 0;
        }
    });

Make a little bit ot research:

The dirtiness is the key here.

7

Indeed, but the default material is a bit special, so the solution is what @roland said, create a material and don’t use the default material.

To @sebavan: the problem is with this code, where we pass false to subMesh.getMaterial():

3 Likes
8

I found a workaround. Initialize the fog with default settings that don’t affect the scene’s appearance during initialization.

    scene.fogMode = 1;
    scene.fogDensity = 0;

This is a hack, and I don’t consider it a good long-term solution.
PG:https://playground.babylonjs.com/#4XAQDU#5