pn-babylon-dev

Babylon.js core skill

When to use

• Structuring or refactoring a Babylon.js scene
• Adding or configuring cameras, lights, or materials
• Loading and managing assets (GLTF, textures)
• Implementing or tuning animations
• Optimizing draw calls and performance
• Integrating physics (Ammo.js, Cannon.js, Havok)

Scene structure

1. Hierarchy: Use TransformNode for logical groups (e.g. environment, characters, effects). Parent meshes to groups; clear names (name = "env_ground") so objects can be found and disposed.
2. Naming: Use consistent prefixes or suffixes for discoverability and disposal.
3. Disposal: When removing meshes or switching scenes, call mesh.dispose() on materials and meshes. Use scene.dispose() when switching scenes. Reference pn-babylon rule.

Engine and canvas

• Engine: Create new Engine(canvas, antialias, options). Handle resize with engine.resize(). Use engine.runRenderLoop(renderLoop).
• Canvas: Ensure canvas has explicit size; use engine.setSize() or CSS. Handle fullscreen if needed.
• Disposal: Call engine.dispose() when tearing down.

Camera management

• ArcRotateCamera: For orbit/exploration. Set alpha, beta, radius; use attachControl() for input. Tune wheelPrecision, minZ for UX.
• UniversalCamera: For FPS-style. Use keys and speed for movement.
• Follow: Interpolate camera position toward target (lerp or smooth damp). Keep camera behind player; handle clipping.

Lighting

• HemisphericLight: Base ambient; minimal cost. Use as default fill.
• DirectionalLight / PointLight / SpotLight: For key and fill. Limit count for mobile.
• Shadows: Use light.createShadowMap(); shadowMap.renderList for casters. Tune shadowMap.size and bias to avoid artifacts.
• PBR: Use PBRMaterial for physically based rendering; set metallic, roughness, albedoTexture.

Asset loading

• GLTF/GLB: Use SceneLoader.ImportMesh("", path, file, scene, onSuccess). Prefer GLB for single-file.
• Textures: Use Texture with correct path; set uScale/vScale for tiling. Use CubeTexture for environment.
• Caching: Reuse loaded assets; avoid loading same model multiple times. Use AssetsManager for progress and batching.
• Disposal: Dispose textures and meshes when no longer needed.