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, phys

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 ES6/TypeScript Setup Scene Configuration Options 2. Camera Systems Free Camera (FPS style) Arc Rotate Camera (Orbit) Universal Camera (Advanced) 3. Lighting Systems Hemispheric Light (Ambient) Directional Light (Sun like) Point Light (Omni directional) Spot Light (Focused) Light Optimization (Include Only Specific Meshes) 4. Mesh Creation Built in Shapes Mesh Transformations Mesh Properties 5. Materials Standard Material PBR Material (Physically Based Rendering) Multi Materials 6. Model Loading GLTF/GLB Import Asset Manager (Batch Loading) 7. Physics Engine Havok Physics Setup Physics Shapes Physics Body Control 8. Animations Direct Animation Animation Class Animation Groups Skeleton Animations (from imported models) Common Patterns Pattern 1: Scene Setup with Default Environment Pattern 2: Async Scene Loading Pattern 3: Interactive Picking Pattern 4: Post Processing Effects Pattern 5: GUI (2D UI) Pattern 6: Shadow Mapping Pattern 7: Particle Systems Integration Patterns Pattern 1: React Integration Pattern 2: WebXR (VR/AR) Pattern 3: Node Material (Visual Shader Editor) Performance Optimization 1. Mesh Optimization 2. Scene Optimization 3. Rendering Optimization 4. Texture Optimization Common Pitfalls Pitfall 1: Memory Leaks Problem : Not disposing resources Solution : Properly dispose Pitfall 2: Performance Issues with Too Many Draw Calls Problem : Each mesh = one draw call Solution : Use instances or merge Pitfall 3: Blocking the Main Thread Problem : Heavy computations blocking render Solution : Use async/incremental loading Pitfall 4: Incorrect Camera Controls Problem : Camera not responding Solution : Always attach controls Pitfall 5: Not Handling Async Operations Problem : Using scene before it's ready Solution : Use callbacks or async/await Pitfall 6: Physics Not Working Problem : Forgot to enable physics or create aggregates Solution : Enable physics first, use aggregates Advanced Topics 1. Custom Shaders 2. Compute Shaders 3. Procedural Textures Debugging Resources [Official Documentation](https://doc.babylonjs.com/) [Playground](https://playground.babylonjs.com/) [Forum](https://forum.babylonjs.com/) [Examples](https://doc.babylonjs.com/examples/) [NPM Package](https://www.npmjs.com/package/@babylonjs/core) Version Notes This skill is based on Babylon.js 7.x. For latest features, consult the official documentation.

babylonjs-engine