Odd problem with bGUI, showing tiny model

[onetrickwolf]

When I use bGUI at all, even just this line:

var gui = new bGUI.GUISystem(scene, 1024, 768);

It creates a tiny version of my scene on top of the current scene.  In the attached image you can see that in debug mode it is showing the tiny bounding box that is the main model in my scene.  It is always on top of the bigger model and looks pretty bad.  Any way to hide this?

[Temechon]

You have to use the method updateCamera on guiSystem : https://github.com/Temechon/bGUI/blob/master/src/GUISystem.js#L237

[onetrickwolf]

Hmm like this?

var gui = new bGUI.GUISystem(scene, 1024, 768);
gui.updateCamera();

Problem is still happening.

[Temechon]

Call it after creating your gui.

If it's still happening, I will need an access to your code.

[onetrickwolf]

Wait that worked actually it was a dumb error thanks!  I was putting it in the wrong place!

Edited February 22, 2016 by onetrickwolf
Fix did work.

[Temechon]

Cool  I hope you're enjoying working with bGUI !

[dbawel]

Hey onetrickwolf,

I'm glad you asked this - I was having the same problem, and was going to post the same question.

Thanks Temechon!

DB

[Charapagna]

I'm having the same problem.

window.addEventListener("DOMContentLoaded", function() {
    var canvas          = document.getElementById("renderCanvas");
    var engine          = new BABYLON.Engine(canvas, true);
    var scene           = new BABYLON.Scene(engine);
    var assets = [];

    var loader = new BABYLON.AssetsManager(scene);

    var toLoad = [
        {name : "button", src : "assets/button.png" }
    ];

    toLoad.forEach(function(obj) {
        var img = loader.addTextureTask(obj.name, obj.src);
        img.onSuccess = function(t) {
            assets[t.name] = t.texture;
        };
    });

    loader.onFinish = function() {

        init3d(scene, canvas);
        var gui;
        setTimeout(function() {
            /* GUI CREATION when all texture are loaded*/
            gui = new bGUI.GUISystem(scene, engine.getRenderWidth(), engine.getRenderHeight());
            /*gui.enableClick();*/

            // button
            /*var button = new bGUI.GUIPanel("button", assets["button"], null, gui);
            button.relativePosition(new BABYLON.Vector3(0.05, 0.9, 0));
            button.onClick = function() {
                gui.setVisible(!gui.isVisible());
                button.setVisible(true);
            };*/

            gui.updateCamera();}, 10);
        engine.runRenderLoop(function() {
            scene.render();
        });
    };

    loader.load();


});

function init3d (scene, canvas) {
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
    camera.attachControl(canvas, true);

    // Skybox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("babylon/assets/textures/skybox/TropicalSunnyDay", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    // Landscape
    BABYLON.SceneLoader.ImportMesh("Grid", "scenes/", "landscape6.babylon", scene, function (newMeshes) {});
    var sphere = new BABYLON.Mesh.CreateSphere("sphere1", 32, 3, scene);
}

/*function animate (mesh, fps) {
    BABYLON.Animation.CreateAndStartAnimation("", mesh, "rotation.z", 60, fps, mesh.rotation.z, mesh.rotation.z + Math.PI *2, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
}*/

You'll notice I basically copied the whole demo, just added my own mesh instead of the spheres. I did use updateCamera() within the setTimeout function as well as outside the whole onFinish block.
Help?

 

EDIT: Tried with the BabylonJS/assets/meshes/Dude/dude.babylon mesh, does the same thing.

Edited January 8, 2017 by Charapagna
Tried another imported mesh, thought the problem lied with my mesh.

[Temechon]

bGUI is not supported anymore, as it was a side project. You'll have to use the MUCH better canvas2D that is now integrated into the main repository.

Sorry for the convenience...