Babylon.js GUI — Building User Interfaces for 3D
In this tutorial, you will learn about Babylon.js GUI. We cover key concepts, practical examples, and best practices to help you master this topic.
Babylon.js GUI system creates 2D and 3D user interfaces with buttons, sliders, text panels, and input fields rendered as interactive overlays or 3D objects.
What You'll Learn
By the end of this guide, you will create 2D GUI with the AdvancedDynamicTexture, add buttons and sliders with events, style UI with themes, create 3D GUI panels in world space, and build interactive HUD elements.
Basic 2D GUI
var ui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('ui');
var button = BABYLON.GUI.Button.CreateSimpleButton('btn', 'Click Me');
button.width = '150px';
button.height = '50px';
button.color = 'white';
button.background = '#4ecdc4';
button.top = '20px';
button.left = '20px';
button.onPointerUpObservable.add(function() {
alert('Clicked!');
});
ui.addControl(button);
Slider
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.width = '200px';
slider.height = '20px';
slider.color = '#ff6b35';
slider.background = '#e0e0e0';
slider.onValueChangedObservable.add(function(value) {
console.log('Slider value:', value);
});
ui.addControl(slider);
3D GUI
var gui3D = BABYLON.GUI.GUI3DManager.Create('gui3D', scene);
var panel = new BABYLON.GUI.CylinderPanel();
panel.margin = 0.1;
var button3D = BABYLON.GUI.Button.CreateImageButton('btn3d', 'Push', 'icon.png');
button3D.onPointerUpObservable.add(function() {
console.log('3D Button clicked');
});
panel.addControl(button3D);
gui3D.addControl(panel);
panel.position = new BABYLON.Vector3(0, 1, 2);
Common Mistakes
1. FullscreenUI Not Added
Controls added before CreateFullscreenUI are not rendered. Always create the texture first.
2. Absolute vs Relative Positioning
Use 'px' for absolute or '%' for relative sizing. Mixing both on same control is valid.
3. 3D GUI Not Visible
3D GUI panels need a manager and a position. Without position, they render at origin.
4. Not Scaling for Resolution
UI size in pixels may be tiny on high-DPI screens. Set idealWidth for automatic scaling.
5. Event Not Firing on Mobile
Use onPointerUpObservable instead of onClick on mobile. Touch events are pointer events.
Practice Questions
Q1: What is AdvancedDynamicTexture? A: A full-screen 2D UI layer that renders GUI elements over the 3D scene.
Q2: How do you create a 3D button? A: Use BABYLON.GUI.Button.CreateImageButton or CreateSimpleButton, add to a panel, and add to GUI3DManager.
Q3: How do you position UI elements? A: Set top, left, right, bottom properties in pixels or percentage.
Q4: How do you style a button? A: Set color (text), background (fill), fontSize, fontWeight, and cornerRadius.
Q5: How do you create a text block? A: Use new BABYLON.GUI.TextBlock() with text property and add to UI.
Challenge: Build a 3D settings panel with a slider for volume, a toggle for fullscreen, a color picker for the background, and an exit button.
FAQ
Try It Yourself
Build a 2D HUD with button and slider.
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js GUI</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>GUI Demo</h2>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 8, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
var box = BABYLON.MeshBuilder.CreateBox('box', { size: 2 }, scene);
var boxMat = new BABYLON.StandardMaterial('boxMat', scene);
box.material = boxMat;
// GUI
var ui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('ui');
var header = new BABYLON.GUI.TextBlock();
header.text = '3D Controls';
header.fontSize = 24;
header.color = '#333';
header.top = '10px';
header.fontWeight = 'bold';
ui.addControl(header);
var redSlider = new BABYLON.GUI.Slider();
redSlider.minimum = 0;
redSlider.maximum = 1;
redSlider.value = 1;
redSlider.width = '200px';
redSlider.height = '20px';
redSlider.color = '#ff6b35';
redSlider.background = '#e0e0e0';
redSlider.top = '50px';
redSlider.left = '20px';
redSlider.onValueChangedObservable.add(function(v) {
boxMat.diffuseColor.r = v;
});
ui.addControl(redSlider);
var redLabel = new BABYLON.GUI.TextBlock();
redLabel.text = 'Red';
redLabel.fontSize = 14;
redLabel.color = '#666';
redLabel.top = '50px';
redLabel.left = '-120px';
redLabel.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
ui.addControl(redLabel);
var greenSlider = new BABYLON.GUI.Slider();
greenSlider.minimum = 0;
greenSlider.maximum = 1;
greenSlider.value = 0.5;
greenSlider.width = '200px';
greenSlider.height = '20px';
greenSlider.color = '#4ecdc4';
greenSlider.background = '#e0e0e0';
greenSlider.top = '80px';
greenSlider.left = '20px';
greenSlider.onValueChangedObservable.add(function(v) {
boxMat.diffuseColor.g = v;
});
ui.addControl(greenSlider);
engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>
What's Next
Optimize performance.
Optimization — Performance optimization. Collisions — Collision detection.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro