How to change properties on the scene according to the camera position?

[JonathanRev]

Hello good day / night guys,

I am new on the comunity of babylonjs , really happy to have found a great tool to make some games  , i have a concern about if there is a way that according to the camera.position.y  it can change the scene's properties , for example like the fog if i am underwater and change it back to less fog if i am outside the water ?

i've tried this :  "scene.getCameraByName("FreeCamera").position.y<=0"     and   "scene.getCameraByName("FreeCamera").position.y>0"  , but not sure if it is okey to set it inside the : scene.registerBeforeRender ? like this : 

scene.registerBeforeRender(function() {

            if(scene.getCameraByName("FreeCamera").position.y<=0){

                // properties for camera when is inside water
            }
            if(scene.getCameraByName("FreeCamera").position.y>0){

                // properties for camera when is outside water
            }
    });

will this affect performance? , or there is another way to detect camera positions to change properties according to the high level ? , thanks in advance

[Wingnut]

Hiya JR, welcome to the forum.  Good questions, and you are doing it properly.  (although you can probably use camera variable name... instead-of scene.getCameraByName("FreeCamera").

Yes, it WILL affect performance, so get your property changes done quickly, and don't do TOO MANY slow things inside of a registered before-render code-block.  But, I think you'll be pleasantly surprised at BJS's "motor power".  It's a "hot rod"... and it usually wins every drag-race it enters. 

Be sure to search the forum well, on the subject of simulating underwater camera.  I know @Dad72 has done some serious research into this, so maybe he will come visit, and tell us what he discovered.  Aside:  PERHAPS fog is an engine-based effect, and might not allow on-the-fly "live" adjustments, but I could easily be wrong.

SOME folk might say that a post-process/shader would be best... for this challenge.  When your "tests" indicate that the camera is under water, you turn on a "blue, smeary, wavy" post-process.  When out of the water, you turn it off.  A docs search for 'post-process' returns quite a large pile of information about post-processes and renderPipeLine fun.

Welcome again!  I hope smarter people than I... respond soon.  Meantime, you are doing just fine.  There is a feature in the F12 dev tools area of browsers... called "profiling" or something like that.  Although I am not overly familiar with it, rumor has it... that IT is THE BEST performance-testing thing ever.    Learn it well, for God-like speed-testing/tweaking.

Hope this helps.  Stay tuned for more.

[Dad72]

 

I use postprocess to make a realistic underwater effect. The fog did not give the effect I expected.

This is what I do in the loop registerBeforeRender

this.scene.registerBeforeRender(() => {
	// Underwater
	if(this.camera.position.y < this.levelWater && this.blurIsActive == false)
	{
		this.postProcessblur0 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), 20.0, 1.0, this.camera);
		this.postProcessblur1 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), 20.0, 1.0, this.camera);
		this.scene.ambientColor = new BABYLON.Color3(0, 0.1, 0.33);
		this.blurIsActive = true;
	} 
	else if(this.camera.position.y > this.levelWater && this.blurIsActive == true){
		if(this.postProcessblur0)
		{
			this.postProcessblur0.dispose();
			this.postProcessblur1.dispose();			
			this.scene.ambientColor = new BABYLON.Color3(0.33, 0.33, 0.33);
			this.blurIsActive = false;
		}
	}
});

When the camera goes under water, we activate BlurPostProcess and when the camera comes out of the water we dispose the effect.

[Pryme8]

Why not just use scene.activeCamera to access the camera?

[JonathanRev]

Wow it was a fast answer, yes i've been trying this now , you were right @Pryme8  about the "scene.activeCamera" , it would be great to use the variable camera name as well , not sure what you think guys ? i've also created the variables of the colors of the fog outside the scene.registerBeforeRender cause until i know if i set it inside it , it will create that colors ilimited times? not sure if i am wrong?

    scene.fogMode = BABYLON.Scene.FOGMODE_EXP2;

    var colorfogwater = new BABYLON.Color3(10/255, 80/255, 130/255);  // blue underwater

    var colorfogAmbient= new BABYLON.Color3(0.8, 0.8, 0.9);                     

    scene.registerBeforeRender(function() {

            if(scene.activeCamera.position.y<=0){

                scene.fogColor = colorfogwater;
                scene.fogDensity = 0.008;
            }
            if(scene.activeCamera.position.y>0){

                scene.fogColor = colorfogAmbient;
                scene.fogDensity = 0.00001;
            }
    });

it is not a profetional looks cause i am new  , but i think i will try as @Dad72  says about using postprocess instead 

[JonathanRev]

Btw anyone knows how to do the effect of refraction when i am underwater? cause i can not see the mountains from undertwater as you can see on the last image , i've tried to use : water.backFaceCulling = true; but i get this result on the image , the red line is supposed to be the ocean level as well