Skip to main content

Adding Snow to NORAD's Santa Tracker

Gabby Getz

Each year, the Cesium team updates the NORAD Santa Tracker ®app to use the latest version of Cesium and take advantage of any new features available. This year, we are especially excited to make it snow for the first time as Santa takes his Christmas Eve journey around the world using Cesium’s Particle Systems.

Santa particle effects

Snow and sparkle particles generate around Santa.

Often used in video games for special effects, particle systems are a collection of billboard images that are updated every frame according to rules defining certain attributes like position, color, and size. When you combine these rules, you can create some impressive effects like fire, smoke, or—in Santa’s case—snow. We created a snow system surrounding Santa and his reindeer, as well as a trail of sparkles following his sled.

Santa particle effects zoomed out

Snow particles become more translucent as you zoom away from Santa.

Here’s a snow system sample you can plug into Sandcastle and experiment with for yourself:

// Set up the viewer, terrain, and camera
var viewer = new Cesium.Viewer('cesiumContainer', {
    shouldAnimate : true,
    terrainProvider : Cesium.createWorldTerrain()
});

var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
scene.camera.setView({
    destination : new Cesium.Cartesian3(277096.634865404, 5647834.481964232, 2985563.7039122293),
    orientation : {
        heading : 4.731089976107251,
        pitch : -0.32003481981370063
    }
});

var radius = 100000.0;
var startColor = Cesium.Color.WHITE.withAlpha(0.0);
var endColor = Cesium.Color.WHITE.withAlpha(0.9);
var modelMatrix = new Cesium.Matrix4.fromTranslation(scene.camera.position);
var minParticleSize = scene.drawingBufferWidth / 100.0;

// Define how the particles will be updated
var gravityScratch = new Cesium.Cartesian3();
function snowParticleUpdateFunction (particle, dt) {
    var position = particle.position;

    Cesium.Cartesian3.normalize(position, gravityScratch);

    var magnitude = Cesium.Math.randomBetween(-5500.0, -1500.0);
    Cesium.Cartesian3.multiplyByScalar(gravityScratch, magnitude * dt, gravityScratch);

    particle.velocity = Cesium.Cartesian3.add(particle.velocity, gravityScratch, particle.velocity);
}

// Define particle system properties
var properties = {
    modelMatrix : modelMatrix,
    minimumSpeed : -2.0,
    maximumSpeed : 2.0,
    lifeTime : 15.0,
    emitter : new Cesium.SphereEmitter(radius),
    startScale : 1.0,
    endScale : 0.0,
    startColor : startColor,
    endColor : endColor,
    minimumWidth : minParticleSize,
    minimumHeight : minParticleSize,
    maximumWidth : minParticleSize * 2.0,
    maximumHeight : minParticleSize * 2.0,
    forces : [snowParticleUpdateFunction]
};

// Create the snow system
var snowSystem = scene.primitives.add(new Cesium.ParticleSystem(properties));
snowSystem.image = 'https://cesium.com/blog/images/2017/12-20/snow_particle.png';
snowSystem.rate = 500.0;

// Add another particle system for a few special snowflakes
var snowflakeSystem = scene.primitives.add(new Cesium.ParticleSystem(properties));
snowflakeSystem.image = 'https://cesium.com/blog/images/2017/12-20/snowflake_particle.png';
snowflakeSystem.rate = 10.0;

To create the snow particle system, we constructed a SphereEmitter around Santa’s location so that all of the snow particles would spawn around him. The snow particles first appear as transparent and then transition to white. They also shrink in size over their lifetime. This allows the snowflakes to naturally fade in and out of view and appear as a gentle snowfall. We used two slightly different systems, each using their own snowflake images—a soft circle and a larger, more detailed snowflake. In the update function for the particles, snowParticleUpdateFunction, we modify their position by applying a gravitation force towards the center of the globe to make the snow fall.

Be sure to see the snowfall in action and stay up to date on Santa’s travels this Christmas Eve with NORAD Tracks Santa at www.noradsanta.org.