webdevpuneet.com

Related Snippets

175 in Animations category
8–13 of 60

Babylon.js Particle Fountain

Vanilla SVG Icon Morph (No Library)

Status Icon Morph — Spinner to Check/Cross

Inbox Row Expand — Vanilla FLIP Detail View

Layout Switcher Container Morph

3D Swipe Card Stack

Babylon.js Particle Fountain — Gravity-Fed ParticleSystem Snippet

Babylon.js Particle Fountain · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsCanvasJS Libraries

Copy & paste

Source Code

Requires
JS · babylon.js
<div class="bpf-stage">
  <div class="bpf-head">
    <span class="bpf-tag">Babylon.js · ParticleSystem</span>
    <h2>Particle Fountain</h2>
    <p>Thousands of particles emitted upward, pulled down by gravity, fading out over their lifetime.</p>
  </div>
  <canvas id="bpfCanvas"></canvas>
  <div class="bpf-controls">
    <label class="bpf-label">Emit rate
      <input type="range" id="bpfRate" min="50" max="1000" value="350" />
    </label>
    <button class="bpf-btn" id="bpfColor">Cycle color</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Procedural particle texture
A radial-gradient sprite is drawn to a DynamicTexture at runtime, no image asset needed.
Cone-shaped point emitter
createPointEmitter with direction1/direction2 vectors defines a natural upward spray.
Real gravity simulation
A constant downward gravity vector produces an arcing fountain shape organically.
Lifetime-based fade
colorDead with zero alpha fades each particle out smoothly as its lifetime ends.
Additive glow blending
BLENDMODE_ONEONE makes overlapping particles brighten instead of layering flatly.
Live emit-rate control
A slider adjusts ps.emitRate in real time with no restart needed.
Palette cycling
One button swaps the full color1/color2/colorDead set to a different preset scheme.
Orbit camera included
ArcRotateCamera lets the fountain be viewed from any angle while running.

About this UI Snippet

Babylon.js Particle Fountain — Emission, Gravity, and Fade Explained

Screenshot of the Babylon.js Particle Fountain snippet rendered live

A particle fountain looks complex but is really four independent, composable systems working together: how particles are shaped (texture), where they start and in what spread (emitter), what forces act on them after emission (gravity), and how they visually disappear (lifetime-based color/alpha). Babylon.js's ParticleSystem exposes all four as plain properties, no custom shader code required.

A procedural sprite, no image asset

Instead of loading a PNG dot, the sprite is drawn at runtime onto a BABYLON.DynamicTexture, which wraps an offscreen <canvas> you can draw into with the normal 2D Canvas API:

var grad = ctx.createRadialGradient(...); grad.addColorStop(0, 'rgba(255,255,255,1)'); ... ctx.fillRect(0, 0, texSize, texSize); dynTex.update();

A radial gradient from opaque white at the center to transparent at the edge produces a soft glowing dot — exactly the shape you want for a particle, generated in a few lines instead of shipping an asset.

createPointEmitter defines the spray shape

ps.createPointEmitter(new BABYLON.Vector3(-0.5, 4, -0.5), new BABYLON.Vector3(0.5, 5.5, 0.5)) is what gives the fountain its cone shape rather than a single perfectly straight jet. Every new particle starts at ps.emitter's position, and its initial direction is chosen by picking a random value between the emitter's direction1 and direction2 vectors on each axis — so direction1 = (-0.4, 1, -0.4) and direction2 = (0.4, 1, 0.4) together define a narrow upward cone that varies slightly in x and z while staying strongly biased toward +y. Widen those vectors and the fountain sprays wider; narrow them and it becomes a tight jet.

Gravity, not a scripted arc

ps.gravity = new BABYLON.Vector3(0, -9.1, 0) is applied by the particle system to every live particle's velocity every update tick, exactly like real gravity accelerates a thrown object downward. This is why the fountain arcs and falls back down convincingly — nobody scripted a parabola; it emerges from constant downward acceleration acting on the particles' initial upward velocity, the same physics as a ball thrown into the air.

Lifetime-driven fade, via colorDead

Each particle is assigned a random lifetime between minLifeTime and maxLifeTime. Over that lifetime, Babylon interpolates the particle's color from color1/color2 (chosen randomly per particle at spawn) toward colorDead — and colorDead here is set with alpha 0:

ps.colorDead = new BABYLON.Color4(PALETTES[i][0].r, PALETTES[i][0].g, PALETTES[i][0].b, 0);

Fading alpha to zero rather than just changing hue is what makes particles disappear smoothly at the end of their life instead of blinking out of existence on their last rendered frame.

Additive blending for a glow

ps.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE switches from normal alpha blending to additive blending — overlapping particles' colors sum instead of layering opaquely, so the water source of a fountain looks bright and glowing where particle density is highest, rather than looking like a flat sprite stack.

Reusing it

The same four-part model — texture, emitter shape, forces, lifetime fade — applies to smoke, sparks, snow, or magic effects; only the vectors and colors change. Pair it with a Babylon.js Spinning Product Viewer to see the same ArcRotateCamera/render-loop setup used for a mesh instead of a particle system.

Step by step

How to Use

  1. 1
    Add the Babylon.js CDNInclude the babylon.js UMD build for the global BABYLON namespace.
  2. 2
    Paste HTML, CSS, and JSA canvas renders a glowing particle fountain emitting from a small base disc.
  3. 3
    Watch the arc formGravity pulls emitted particles back down, producing a natural fountain arc.
  4. 4
    Drag the emit rate sliderps.emitRate changes live, thickening or thinning the stream.
  5. 5
    Click Cycle colorSwaps color1/color2/colorDead to a different palette from a preset list.
  6. 6
    Orbit the cameraDrag on the canvas to view the fountain from different angles via ArcRotateCamera.

Real-world uses

Common Use Cases

Celebratory effects
Fire a fountain on success states or achievement unlocks, with particles that fade out smoothly as their lifetime ends.
3D landing page centrepieces
Add an ambient animated focal point to a hero section, built from a point emitter cone with direction vectors defining the spread.
Particle system teaching
Break a fountain into four composable systems of texture, emitter, forces and lifetime, in a clearly commented reference.
Game effect prototyping
Start from a working spark or smoke emitter, with a constant downward gravity vector producing the arc.
Procedural texture learning
Study a minimal DynamicTexture example that draws a radial-gradient sprite in code, so no image file is needed.

Got questions?

Frequently Asked Questions

It is drawn at runtime into a BABYLON.DynamicTexture, which exposes a standard CanvasRenderingContext2D via getContext(). A radial gradient from opaque white at the center to transparent at the edges is filled into it and dynTex.update() uploads it as the particle texture, avoiding any external asset request.

It sets the emission shape by defining two direction vectors, direction1 and direction2. Every particle spawns at the emitter position and picks a random initial direction with each axis independently interpolated between those two vectors, producing a cone spray rather than a single straight-line jet.

ps.gravity applies a constant downward acceleration to every particle's velocity on each update tick, exactly like real gravity. Particles start with strong upward velocity from minEmitPower/maxEmitPower, and gravity continuously reduces that vertical velocity until it reverses, producing the natural parabolic fountain arc with no scripted curve.

Each particle is assigned a random lifetime between minLifeTime and maxLifeTime, and Babylon interpolates its color from its spawn color (color1/color2) toward colorDead over that lifetime. Setting colorDead's alpha channel to 0 means the interpolation ends in full transparency, so the particle visually fades rather than vanishing on its last rendered frame.

It switches the particle system from standard alpha blending to additive blending, where overlapping particle colors are summed rather than composited normally. This makes dense clusters of particles -- like near the emitter -- appear brighter and glowing, which reads as more energetic/fluid than flat alpha-blended sprites.

Initialize the Engine, Scene, ParticleSystem, and DynamicTexture once inside a useEffect (React) or onMounted (Vue) against a canvas ref, keep a reference to the ParticleSystem instance to update emitRate or call dispose() on unmount, and drive UI controls (sliders, buttons) through normal component state that writes to that instance's properties directly rather than re-creating the particle system on every render.