# Babylon.js — Powerful 3D Game and Rendering Engine

> Babylon.js is a powerful, beautiful, simple, open 3D game and rendering engine for the web. WebGL + WebGPU, Playground IDE, Node Material Editor, GUI system, physics, and VR/AR support. Microsoft-backed with enterprise polish.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i @babylonjs/core
```

```ts
import {
  Engine, Scene, ArcRotateCamera, HemisphericLight, MeshBuilder, Vector3,
} from "@babylonjs/core";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new ArcRotateCamera("cam", -Math.PI / 2, Math.PI / 3, 10, Vector3.Zero(), scene);
camera.attachControl(canvas, true);

new HemisphericLight("light", new Vector3(0, 1, 0), scene);
MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);
const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
box.position.y = 1;

engine.runRenderLoop(() => scene.render());
window.addEventListener("resize", () => engine.resize());
```

## Intro

Babylon.js is a powerful, beautiful, simple, and open 3D game and rendering engine for the web. Originally created at Microsoft by David Catuhe, it brings AAA-game-engine features (PBR, physics, advanced post-processing, VR/AR) into a single JavaScript/TypeScript framework. Used by Adobe, Airbus, Siemens, and many enterprises.

- **Repo**: https://github.com/BabylonJS/Babylon.js
- **Stars**: 25K+
- **Language**: TypeScript
- **License**: Apache 2.0

## What Babylon.js Does

- **PBR materials** — physically based rendering with IBL
- **Node Material Editor** — visual shader authoring
- **Playground** — online IDE for experiments and sharing
- **GUI system** — 2D and 3D in-scene UI
- **Physics** — Havok, Cannon, Oimo integrations
- **Animation** — keyframe, skeletal, morph targets, FBX import
- **Post-processing** — bloom, DOF, SSAO, motion blur
- **WebXR** — VR/AR with controller support
- **WebGPU** — experimental next-gen backend
- **glTF 2.0** — first-class import with KHR extensions

## Architecture

Engine manages the GL/GPU context. Scene holds Cameras, Lights, Meshes, Materials, Nodes. Mesh builders provide primitives; loaders handle glTF/OBJ/STL/BabylonNative formats. Everything is strongly typed with TypeScript.

## Self-Hosting

Client library.

## Key Features

- PBR materials
- Node Material Editor (visual shaders)
- WebGL + WebGPU backends
- Physics plugins (Havok, Cannon, Oimo)
- WebXR (VR/AR)
- glTF 2.0 loader
- Built-in Inspector for debugging
- Playground IDE
- GUI system (2D + in-scene 3D)
- TypeScript-first

## Comparison

| Engine | Focus | Ecosystem | Languages |
|---|---|---|---|
| Babylon.js | Games + enterprise 3D | Large | TS/JS |
| Three.js | Flexible 3D lib | Largest | JS |
| PlayCanvas | Collab editor | Medium | JS |
| Unity WebGL | Full game engine | Huge | C# |
| Godot HTML5 | Full game engine | Medium | GDScript |

## FAQ

**Q: Babylon.js vs Three.js？**
A: Babylon is a full game engine (scenes, physics, animation, editor) that works out of the box; Three.js is a smaller 3D library — more flexible but requires assembling your own toolchain. Enterprise projects tend to pick Babylon; art and experimental projects tend to pick Three.

**Q: Does it support WebGPU?**
A: Yes. Enable `WebGPUEngine` (still being refined). Progressively usable from v7+.

**Q: What about the Node Material Editor?**
A: A visual node editor — design shaders online, then export as Babylon materials. You can build complex effects without writing GLSL.

## Sources & Credits

- Docs: https://doc.babylonjs.com
- GitHub: https://github.com/BabylonJS/Babylon.js
- License: Apache 2.0

---
Source: https://tokrepo.com/en/workflows/babylon-js-powerful-3d-game-rendering-engine-3ae90ed5
Author: Script Depot