A Babylon.js extension to create a beautiful GUI
bGUI is an extension for the 3D engine Babylon.js providing a set of tools and class to display a game GUI directly into your Babylon 3D game, without any HTML/CSS.
The only solution (for now) to deploy a babylon.js game on mobile platforms (Android/iOS - Windows Phone supports Webgl application natively) is to use Cocoon.js provided by Ludei, with the technology Canvas+ (Webview+ is not so great in term of performance for 3D scenes). However, Canvas+ does not support DOM elements, such as div, img, ... The only solution is to create the GUI directly in the HTML canvas. That's what bGUI do!
bGUI adds automatically to your game an orthographic camera correctly configured (according to the canvas size and the device pixel ratio), and gives you several classes to create your game GUI. A GUIObject is the root class of bGUI, and represents a 3D object (sphere, plane, cube, custom object, ...) translated into the GUI world, and removed from your game world.
bGUI gives you 2 specific classes in order to create HUD easily :
Of course ! First, you have to create a GUISystem, which represents your GUI world. It takes 3 parameters: the Babylon scene where the GUI will be created, and the width and the height of your GUI (in pixels).
var gui = new bGUI.GUISystem(scene, 1200, 780);
Now your GUI is created, you can create a new panel like this:
var headTexture = new BABYLON.Texture("assets/head.png", scene); var head = new bGUI.GUIPanel("head", headTexture, null, gui);
A GUIPanel takes 4 parameters :
bGUI provides a set of methods to update the position of the panel, 3 actually :
You can also use a direct reference to the BABYLON mesh used for any GUIObject. This way, you can use Babylon animations to update your panel for example.
Yes : http://temechon.github.io/bGUI/ Try to click on the images :)