# Babylonjs Engine

Comprehensive skill for Babylon.js 3D web rendering engine.

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Media
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill babylonjs-engine -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill babylonjs-engine -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill babylonjs-engine -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill babylonjs-engine -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web applications. Triggers on tasks involving Babylon.js, 3D scenes, WebGL/WebGPU rendering, entity-component systems, physics simulations, PBR materials, shadow mapping, or 3D model loading. Alternative to Three.js with built-in editor integration and game engine features.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Babylon.js Engine Skill

## Related Skills
- threejs-webgl: Alternative 3D engine
- react-three-fiber: React integration for 3D
- gsap-scrolltrigger: Animation library
- motion-framer: UI animations

## Core Concepts

### 1. Engine and Scene Initialization

**Basic Setup**
```javascript
// Get canvas element
const canvas = document.getElementById('renderCanvas');

// Create engine
const engine = new BABYLON.Engine(canvas, true, {
  preserveDrawingBuffer: true,
  stencil: true
});

// Create scene
const scene = new BABYLON.Scene(engine);

// Render loop
engine.runRenderLoop(() => {
  scene.render();
});

// Handle resize
window.addEventListener('resize', () => {
  engine.resize();
});
```

**ES6/TypeScript Setup**
```typescript
import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder';

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

// Camera setup
const camera = new FreeCamera('camera1', new Vector3(0, 5, -10), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);

// Lighting
const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene);
light.intensity = 0.7;

// Create mesh
const sphere = CreateSphere('sphere1', { segments: 16, diameter: 2 }, scene);
sphere.position.y = 2;

// Render
engine.runRenderLoop(() => {
  scene.render();
});
```

**Scene Configuration Options**
```javascript
const scene = new BABYLON.Scene(engine, {
  // Optimize for large mesh counts
  useGeometryUniqueIdsMap: true,
  useMaterialMeshMap: true,
  useClonedMeshMap: true
});
```

### 2. Camera Systems

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/babylonjs-engine/SKILL.md