bGUI and camera

[Boz]

Hi guys

 

I'm using bGUI to display 2D elements, I created a menu with a 3D scene in background, from the official example here , and it works well.

 

Then I empty the scene (with dispose() method), and start a new one, with a skybox, a ground and a character.

////////////////////	SKYBOX		////////////////////	var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, babylonScene);	var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", babylonScene);	skyboxMaterial.backFaceCulling = false;	skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox/tuto/skybox", babylonScene);	skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;	// Remove light reflection on the box	skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);	skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);	skybox.material = skyboxMaterial;	////////////////////	LIGHTS		////////////////////	// DirectionalLight, used as sunlight    dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-1, -2, -1), babylonScene);	dirLight.intensity = 1;	dirLight.diffuse = new BABYLON.Color3(1, 1, 1);    dirLight.specular = new BABYLON.Color3(0.2, 0.2, 0.2);	dirLight.position = new BABYLON.Vector3(0, 150, 0);	// HemisphericLight, used as ambient light	var hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), babylonScene);	hemiLight.intensity = 0.4;	// Camera	camera = new BABYLON.ArcRotateCamera("targetCamera", 0, 1, 13, BABYLON.Vector3.Zero(), babylonScene);	camera.keysUp = [];	camera.keysDown = [];	camera.keysLeft = [];	camera.keysRight = [];	// camera constraints	camera.lowerBetaLimit = 0.1;	    ////////////////////	GROUND		////////////////////	var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, babylonScene, false);	ground.checkCollisions = true;	ground.receiveShadows = true;	var groundMaterial = new BABYLON.StandardMaterial("ground", babylonScene);	ground.material = groundMaterial;	groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", babylonScene);	groundMaterial.diffuseTexture.uScale = 60;	groundMaterial.diffuseTexture.vScale = 60;

Result :

 

 

the scene is OK, the character walks with ZQSD keys, and the camera is an ArcRotateCamera, rotating around the player.

 

Then I add a single code line to create a bGUI system, in order to add some 2D elements on the left and right of the canvas.

////////////////////	GUI		////////////////////var guiSystem = new bGUI.GUISystem(babylonScene, 200, 150);

And this is what I get :

 

 

The character still walks with ZQSD (but we can not see him)

The camera is still following the character but the skybox appears here, smaller, and moving the mouse make the skybox rotate.

 

From the doc : "Creates a new GUISystem and a new orthographic camera, which size is computed according to the canvas size (canvas.width, canvas.height) and the window device pixel ratio. (The active camera is not updated.)"

 

So why is my active camera not working as before ? Is there any condition to create a GUISystem ? I tried playing with layerMask property, but the results get stranger

Do you know what is the way to go to face this problem ?

 

Thanks in advance

[Temechon]

Hello Pouet! (Nice name btw)

 

Did you update the layermask of the skybox ? I will add a method in GUISystem to do it automatically

Let me 10 minutes please.

[Temechon]

Ok, a new version is here: https://github.com/Temechon/bGUI/tree/master/dist (get 1.3 or 1.3.min).

A new method exists:

guiSystem.updateCamera()

 

Call this after creating your 3D scene (and anytime you add a new 3D object in your scene) to remove this bug with the skybox.

Tell me if it works !

 

Edit: Did you notice the text (and images) are not looking crispy anymore ? 

[Boz]

The fact is my scene is already created, I just remove elements with .dispose()

 

If I create a GUISystem first, I got these errors : Uncaught TypeError: Cannot read property 'cameraRigMode' of null

 

If I create scene elements (lights, camera, models) and then I create the GUISystem, and call the guiSystem.updateCamera() method, skybox disappears but my camera is no longer moving, it just follow the character but do not rotate :/