Jump to content

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


JonathanRev
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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 

underwater.jpg

Link to comment
Share on other sites

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

underwater.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...