Manually setting the fog does not take effect

The fog effect is initialized and functions as demonstrated in the example.

However, when attempting to set the fog effect manually, it does not take effect, as shown in the example.

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


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

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

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…

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.

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():


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.