Sign in to follow this  
Thierry Mil

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

Recommended Posts

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

 

 

mini_textures_at_center.PNG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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... (?).

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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...

 

Capture.PNG

Share this post


Link to post
Share on other sites

@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();

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :

bGuiWithCenterSpot.PNG

bGuiWithoutCenterSpot.PNG

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.