Camera screen, in middle, prblm : displays mini image of all scene's textures (??)

[Thierry Mil]

Hello BabylonJs collegues and friends. 

I have a demo here.   http://free-visit.net/index.php/fr/entrance-moderne-building

My problem, as you can see, is simple :

On the exact CENTER of the camera screen, there is (very) small rectangle containing ALL the textures of my scene.

Why is this so ? I do not know...

I am stuck since 3 days, I can not understand why it does this.

 

If you have any suggestion, even small one, please go for it....

 

Thierry, Paris

 

 

[GameMonetize]

Hello,

this is an object attached to the camera as it's moving with it.

Do you mind turning off all meshes one by one until you find the name of the culprit?

Then call console.dir(mesh.material) to better understand what is going on

[Thierry Mil]

Thankout VERY much Deltakosh.

I will do this.....

[brianzinn]

Have you tried the debugger?  You can turn on bounding boxes and other tricks to find the mesh...

[Thierry Mil]

Hello Deltakosh and brianzinn,

I worked quite a bit. 

Allright, I am getting closer to the problem.

 

- Fact 1)

The spot/stain in the middle is a very tiny pane with all the textures of the mesh of the 3D scene, all disposed from left to right.

 

- Fact 2) .

I do the building of my display in 2 steps, the steps2 is the issue.

     steps 1) Create a pure 3D scene with babylonJs fonction. Everything is fine.

     I see the 30 walls each one with its own texture. Works fine. the variable 'scene' gets the 3D scene.

 

steps 2) I use  2D API GUISystem to build an overlay with buttons.

      Now If I comment allbut the line below, I get the spot./stain

  overlayGuiSystem = new bGUI.GUISystem(scene, engine.getRenderWidth(), engine.getRenderHeight());

 

- I have the feeliong GUISystem is bugged.

- Or maybe I should use GUISystem differently ? By not using the 'scene' variable ? But how? 

 

Please feel free to say anything, because anything can help me.

Thanks 

Thierry, Paris

 

PS: I really LOVE BABYLONJs. Very simple to use, it is a pleasure to use...

 

[GameMonetize]

ping @Dad72 for the GUI question

[Dad72]

Sorry @Deltakosh but it's for bGUI (new bGUI.GUISystem), you need to ping @Temechon

When I was using bGUI I had this problem because two cameras were used, the second camera shows the scene in lowercase.

I suggest using CastorGUI or directly BABYLON.GUI to solve your problem. Temechon no longer supports bGUI at the last news.

[Thierry Mil]

Thank you all for the answers.

Yes I do understand that I have to translate my code to BABYLON.GUI.... [shoots ! ]

Just hope those functions are very cloth to bGUI fonctions...

PS: By the way Dad72, I only have one camera, I just wanted to overlays some buttons on the screen of camera frustrum.

 

I will go to sleep I will tell you tomorow how translation to babylon.GUI is going ...

Thanks Thierry

[Dad72]

11 hours ago, Thierry Mil said:

PS: By the way Dad72, I only have one camera, I just wanted to overlays some buttons on the screen of camera frustrum.

You use bGUI. GUIStystem initializes 2 cameras. which will create your problem.

[Thierry Mil]

Hello Dad72 and Deltakosh for your help.

Sorry for the one week delay. Now, It's WE and I have two days to work on this issue....

YEe Dad72 I now get what you sad. The bgui api is bugued. The second (automatic) camera has a mini 3D map displaid in the center of camera ... for a reason.... It's buggued, yes.

I must move my code from bgui to the new 'experimental 'Babylon.GUI made by Deltakosh. No problem I try this...

-------------------

So this is now the problem I am getting to code the new gui extension called babylon.gui :

Problem 1) I canot access to babylon.gui classes

- I put the babylon.gui.js to my serveur

- and I put in the .html file the code the access to this file.

My .html file It looks like this:
 

     <!-- script src="http://www.babylonjs.com/babylon.js"></script>  -->
	<!-- New babylon 2.5  -->
        <script src="http://www.free-visit.net/js/api/babylon.2.5.js"></script>

	<!-- New babylon.gui du 10/11/2017  -->
        <script src="http://www.free-visit.net/js/api/babylon.gui.js"></script>

Now If I put in my javascript file this instruction (basic instruction of babylon.gui ) :

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

I Get this error when I execute my code in the borwser :

TypeError: this._scene is null

 

 

It seems I did something wrong in the babylon.gui.js declaration

Is is because I use babylon2.5  (perhaps not the lattest) ?

Or I did something wrong in the declaration of babylon.gui.js file  ?

 

Thanks you babylonJs collegues.

Any answer is always good, don't hesitate. :-))

Thierry, Paris

 

[Dad72]

yes BABYLON.GUI was integrated with BABYLON 3.0

[Thierry Mil]

Allright, very good ! I got it ! The message in javascript is amways very surprising ....

So i have to migrate from Babylon 2.5 to 3.0 to fix this. Thank you !

And Dad72, you believe Babylon 3.0 is about as fast as  Babylon 2.5, I mean interms of memory, dowload JS filesize, rendering-3D-Speed, ect...

i mean there is or there was no problem for user to upgrade from Babylon 2.5 to 3.0 in your knowlege... (?).

 

[Dad72]

I think  yes. If you use 3.1 it is better still, it seems faster. But try to see the differences.

[Dad72]

Ah and Deltakosh always makes sure to keep the compatibilities from one version to another, or the changes are very minimal and easy to do. So launching yourself with 3.1 directly should not be a major worry

[Thierry Mil]

I did go there (the generator) https://www.babylonjs.com/versionbuilder/  (This is the place to have a babylonJs version, right ?).

Even if I select nothing (not even GUI for a try) to generate it and I choose 'minify',  I still get a download file of of 1600 KBytes, to be compared to the 2.5 version wich was 1200 KBytes.

Stil a 33% increase in size....

Inflation, inflation.....  :--!

Anyway I will try it.

thanks Dad72

 

Thierry

 

 

[Thierry Mil]

Allright , it seems to understand the specific 'babylo,n.gui'   instruction now with SUCESS !

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

Works like a charm as you can see !

Thank you again Dad72 !

PS: I will try tomorow to go further and deeper.in the babylon.gui api...

 

[Dad72]

40 minutes ago, Thierry Mil said:

I did go there (the generator) https://www.babylonjs.com/versionbuilder/  (This is the place to have a babylonJs version, right ?).

You can get it from GITHub too :

https://github.com/BabylonJS/Babylon.js/tree/master/dist

[dbawel]

@Thierry Mil-

In bGUI, the function to remove the artifact is:

gui.updateCamera();

DB

[Thierry Mil]

@dbawel

I tried to fix the bGui api bug. But with no sucess.

I used the bGui version 1.3.1 (wich has the new function updateCamera() that fixes the spot i the center).

But it dowsn't change anything to the bug : I still have my dirty spot in center...    :-(

I use the bGui version 1.3.1  like said in the thread her :

(see all bGui versions in https://github.com/Temechon/bGUI/tree/master/dist )

 

overlayGuiSystem = new bGUI.GUISystem(scene, engine.getRenderWidth(), engine.getRenderHeight());
// TMI 12/11/2017 Tentative pour enlever la tache centrale :
console.log("Before overlayGuiSystem.updateCamera() 2");
overlayGuiSystem.updateCamera();

 

 

[dbawel]

For bGUI you must set the function to update the camera as your last line before render. If you are doing this, then a simple playground scene would help to troubleshoot. I dealt with this for several days before finding the correct solution.

DB

[Thierry Mil]

@dbawel

DB, Your are absolubly right !!  

I had previously tried to place the function updateCamera() into various places during the construction of the 3D or 2D things.

But It did stop the display of the dirty spot in the center of Camera screen.

But now that I put it JUST before the engine.runRenderLoop(....scene.render() ...);

... it works ! No more dirty spot ! Great job !

// Here the GuiSystem_instance.updateCamera() function has to be placed 
// JUST BEFORE engine.renderLoop(...) to get rid of the center spot problem
overlayGuiSystem.updateCamera();
engine.runRenderLoop(function () {
          scene.render();
      });

bGUI is really a surprising API.

Hope in a few weeks or month BABYLON.GUI is,mature enough to replace it.

For now, I will stick to it. :-))

Thank you dbawel 

Thierry

 

 

Photos of my sceen Before and after :

[Dad72]

BABYLON.GUI is quite mature at the present time, it works well.

[GameMonetize]

Thanks @Dad72 I appreciate this kind feedback

[Thierry Mil]

Hello again babylonJs friends !

You were right , I took a serious look at  BABYLON.GUI, documentation is good, API looks very good.

So here now, I am "+/-translating' my bgui 2D overlay for BAVYLON.GUI instructions.

I waorks fine as in the manual ! I will defenatly go the BABYLON.GUI !!

-------------

So far so good, everything is good exept one thing :disposition of button on a StackPanel...

Is it a bug ? Is it something I did not get from documentation ?

I have a 'controlPanel' var of type BABYLON.GUI.StackPanel  (the one with a green background).

I am trying to place a button on the right side of it. And it doesn't work : it places the button always on the left side... (?).

1) Here is the code :

 

  controlPanel = new BABYLON.GUI.StackPanel();
   controlPanel.isVertical = false;
   controlPanel.background = "green";
   controlPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
   controlPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
   controlPanel.top = "-50px";
   controlPanel.width = 1.0;
   advancedTexture.addControl(controlPanel);

   // Creates btSoundIsOff on top of controlPanel, on the right side :
       btSoundIsOff_GUI =  BABYLON.GUI.Button.CreateImageOnlyButton("btSoundIsOff_GUI", fvAssetsDirectory+"/icBtSoundOff_32x32.png");
       btSoundIsOff_GUI.thickness = 0;
       btSoundIsOff_GUI.width = "32px";
       btSoundIsOff_GUI.height = "32px";
       btSoundIsOff_GUI.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
       controlPanel.addControl(btSoundIsOff_GUI);

   2) Here is the result (copy of screen) showing the sound button is not places on the right of green-panel....

 Note : If, instead of placing the button on the BABYLON.GUI.StackPanel (aka 'controlPanel' var),
 I place it on BABYLON.GUI.AdvancedDynamicTexture (var 'advancedTexture'),  then the button is ok, I mean buton is placed on the right side (no bug here). 
Maybe this help you to understand where I got it wrong...

Thanks anyway. Any thought is good...

Thierry, Paris

Ps: The link (if is still works) :  http://free-visit.net/index.php/fr/entrance-moderne-building

[Sebavan]

Can you try controlPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT; ?