Babylon.js Editor documentation

An overview of the Babylon.js Editor, what it can do, and what you need before getting started.

Introduction

Babylon.js Editor is a visual editor for Babylon.js. It allows you to create and edit scenes, materials, attach scripts and more.
The Babylon.js Editor is available on Windows, macOS, and Linux platforms and can be downloaded for free.

The goal is to provide a simple and easy-to-use interface for creating and editing Babylon.js applications such as video games. It includes a large variety of optimization tools, such as compressed textures generation, LOD collisions and more. It also supports 2D sprites with sprite managers, Gaussian Splatting assets and importing assets from Fab.com using the Fab plugin.

The Babylon.js Editor is free and open-source. You can find the source code on GitHub.

Prerequisites

Node.js must be installed on your computer. It is recommended to have an LTS version >= 20.

Recommended knowledge

By default, projects are based on Next.js. It is highly recommended to have a basic understanding of React and Next.js before starting.
Of course, also a basic understanding of the Babylon.js engine, the most powerful, beautiful, simple, and open web rendering engine in the world.

Chapters

Basics

Creating project: Learn how to create a new project, select project templates, configure package managers, and import existing projects in the editor.
Composing scene: Learn the editor layout, select objects with gizmos, add primitives and 3D models, and manage the assets of your project.
Managing assets: Create and edit your own materials, assign textures, and get the most out of the Assets Browser.
Adding scripts: Attach TypeScript scripts to scene objects and retrieve objects inside them using decorators.
Running project: Play, stop, and refresh your scene directly from the editor without leaving the workspace.

Scripting

Common decorators: Retrieve scene objects, components, animation groups, and asset containers directly inside attached scripts.
Customizing scripts: Expose script properties in the inspector with @visibleAs* decorators so each object can be configured individually.
Listening events: Listen to pointer and keyboard events in attached scripts with @onPointerEvent and @onKeyboardEvent.
Linking assets: Reference JSON, material, and GUI assets from your scripts using @visibleAsAsset.

Assets

Using Sprite Manager: Create sprite managers, configure textures and atlases, animate sprites, and attach scripts to them.
Using Gaussian Splatting: Import Gaussian Splatting assets (.splat, .spz, .sog) into your project, manipulate them in the scene, and enable runtime loading support.

Deploying

Using Babylon.js Editor CLI: Generate all project assets and scenes from the command line, ready to be used in your CI/CD pipeline.

Plugins

Using Fab Plugin: Import Fab.com assets directly into your project with the Fab plugin.

Advanced

Compressing textures: Reduce GPU memory usage with KTX and KTX2 compressed textures.
LOD collisions: Upcoming: reduce collision computation cost with LOD-based colliders.
Optimizing shadows: Upcoming: improve shadow rendering performance.

Tips

Shortcuts: All the keyboard shortcuts available in the editor.
Creating a Skybox: Build a skybox with a cube texture or a procedural Sky Material.

Creating project