Babylon.js Sprites and Particles — 2D Effects in 3D
In this tutorial, you will learn about Babylon.js Sprites and Particles. We cover key concepts, practical examples, and best practices to help you master this topic.
Babylon.js sprites and particles add 2D billboarded effects to 3D scenes for fire, smoke, sparks, and atmospheric effects.
What You'll Learn
By the end of this guide, you will create billboarded sprites with sprite sheets, build fire and smoke particle systems, configure particle emitters with custom textures, use sprites for UI elements, and optimize particle performance with capacity limits.
Basic Sprite
var spriteManager = new BABYLON.SpriteManager('mgr', 'texture.png', 100, 64, scene);
var sprite = new BABYLON.Sprite('sprite', spriteManager);
sprite.position.y = 2;
sprite.size = 1.5;
Particle System
var fire = new BABYLON.ParticleSystem('fire', 500, scene);
fire.particleTexture = new BABYLON.Texture('fire.png', scene);
fire.emitter = new BABYLON.Vector3(0, 0, 0);
fire.minEmitPower = 1;
fire.maxEmitPower = 3;
fire.addSizeGradient(0, 0.5);
fire.addSizeGradient(1, 0.1);
fire.createBoxEmitter(new BABYLON.Vector3(-0.5, 0, -0.5), new BABYLON.Vector3(0.5, 0, 0.5));
fire.start();
Animated Sprites
sprite.playAnimation(0, 5, true, 100); // from cell 0 to 5, loop, 100ms per frame
Custom Particle Texture
var particleSys = new BABYLON.ParticleSystem('particles', 200, scene);
particleSys.particleTexture = new BABYLON.Texture('https://assets.babylonjs.com/textures/particles/flare.png', scene);
particleSys.emitter = sphere;
particleSys.emitter.geometryAlignment = BABYLON.ParticleSystem.PARTICLE_EMITTER_SPHERE;
particleSys.minScaleX = 0.5;
particleSys.maxScaleX = 1.0;
Common Mistakes
1. Sprite Capacity Too Low
SpriteManager capacity set too low causes sprites to not appear. Set capacity to the maximum expected count.
2. Particle Count Too High
More than 10,000 particles drops frame rate significantly. Use 200-1000 for most effects.
3. Emitter Not Attached
Emitter is a Vector3 position. For moving emitters, update emitter position each frame.
4. Missing Particle Texture
Particle system needs a texture. Without it, particles render as white squares.
5. Not Stopping Particles
Particle systems continue emitting until explicitly stopped. Call particleSys.stop() when no longer needed.
Practice Questions
Q1: What is a SpriteManager? A: A manager that handles sprite rendering with batching for performance.
Q2: How many particles can a system handle? A: 200-1000 for good performance. 5000+ needs capacity management.
Q3: How do you make a particle follow a mesh? A: Set the emitter to the mesh: particleSys.emitter = mesh.
Q4: What is a sprite sheet? A: A texture with multiple animation frames arranged in a grid. cellWidth/cellHeight define frame size.
Q5: How do you dispose a particle system? A: Call particleSys.dispose() to free GPU resources.
Challenge: Build a campfire scene with logs, flame particles, smoke particles rising above, and a point light that flickers in sync with the fire.
FAQ
Try It Yourself
Build a fire particle effect.
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js Particles</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Particle System</h2>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
var ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 10, height: 10 }, scene);
// Fire particles
var fire = new BABYLON.ParticleSystem('fire', 500, scene);
fire.particleTexture = new BABYLON.Texture('https://assets.babylonjs.com/textures/particles/flare.png', scene);
fire.emitter = new BABYLON.Vector3(0, 0.5, 0);
fire.minEmitPower = 1;
fire.maxEmitPower = 2;
fire.addSizeGradient(0, 1.0);
fire.addSizeGradient(1, 0.1);
fire.addColorGradient(0, new BABYLON.Color4(1, 0.6, 0, 1));
fire.addColorGradient(0.5, new BABYLON.Color4(1, 0.3, 0, 0.8));
fire.addColorGradient(1, new BABYLON.Color4(0.5, 0, 0, 0));
fire.createBoxEmitter(
new BABYLON.Vector3(-0.3, 1, -0.3),
new BABYLON.Vector3(0.3, 1.5, 0.3)
);
fire.start();
// Smoke particles
var smoke = new BABYLON.ParticleSystem('smoke', 100, scene);
smoke.particleTexture = new BABYLON.Texture('https://assets.babylonjs.com/textures/particles/cloud.png', scene);
smoke.emitter = new BABYLON.Vector3(0, 2, 0);
smoke.minEmitPower = 0.5;
smoke.maxEmitPower = 1;
smoke.addSizeGradient(0, 0.5);
smoke.addSizeGradient(1, 2.0);
smoke.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0.3));
smoke.addColorGradient(1, new BABYLON.Color4(1, 1, 1, 0));
smoke.createBoxEmitter(new BABYLON.Vector3(-0.5, 1, -0.5), new BABYLON.Vector3(0.5, 2, 0.5));
smoke.start();
engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>
What's Next
Integrate physics engine.
Physics Engine — Physics with Havok or Ammo.js. Audio — 3D audio system.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro