Phaser home
Log inCreate a game

← Expansion packsBackdrop

Phaser AE

3D Sky and Day Cycle

Pro packv3.0.0-23DBackdrop

A sky for outdoor 3D scenes in which one number, the time of day, drives everything: the colours of the sky, the sun's position and light, the ambient, the fog and the reflections in the water. It is one full-screen pass on WebGPU and WebGL2, light enough for low-end devices.

This is a Pro pack. Upgrade to Phaser Pro to use it in your games.See Phaser Pro →

Released October 14, 2026 · updated October 19, 2026

3D Sky and Day Cycle: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

There is no sky dome. Every pixel turns its own view ray into a colour, so the gradient is exact at any field of view, costs one triangle, and cannot clip, seam or be flown through. The rays ignore the camera's position, so the sky holds steady however far the player travels.

The time dial resolves a palette of keyframes (the zenith, the horizon, the glow band, the sun's colour and strength, the hemisphere ambient and the fog) and a sun path. With driveLighting on, the sky writes the sun, ambient and fog into render-3d's lighting record every step, so the shadows, the fog, the sky and the water all read the same number. Without render-3d composed it simply draws a sky.

In the sky are two cloud decks, chunky billows below and a thin, faster veil above, with silver linings and parallax as the camera travels; a dense twinkling star field with four recognisable constellations that wheel about a tilted pole; a sun with a disc, a glow and a haze; and a moon that lights the scene at deep night. A storm dial thickens and darkens the clouds and dims the light. Whenever the light changes enough to matter, the sky bakes itself into a 256 by 128 environment map with a full mip chain, which water-3d and physically based materials reflect, sunset, night and storm included.

Features

  • One dial — time (0 to 1) or hour (0 to 24), with daySeconds or cycle() to let the day pass.
  • Drives the lighting — sun, ambient and fog written into render-3d, so everything agrees about the hour.
  • Authored days — palette keyframes and a sunPath (rise, set, peak, depth and lean), checked by validatePalette.
  • Two cloud decks — cover, density, scale, speed and wind direction; zero cover skips the cloud work.
  • Stars and constellations — a twinkling field, four constellations that rise and set, and a moon.
  • A storm dial — more and darker cloud and a dimmer sun, reaching the scene's light and fog too.
  • A baked environment map — mipped and rebaked when the light moves, for water and PBR reflections.
  • Sun queries — sunPosition, sunHeight and sunDirection for a sun sprite, a lens flare or lamps that light at dusk.
  • A headless core — skyState, bakeEnv and constellationDirs work without a GPU.
  • WebGPU and WebGL2 — the same sky on both, including low-end devices.

Good for

  • Open-world and exploration games — a day that passes, with light and fog that follow it.
  • Driving games and long journeys — a sky that holds steady over any distance.
  • Survival and farming games — sunHeight as a trigger for lamps, spawns or sleep at dusk.
  • Sea and lake scenes — water that reflects the sky it is lit by.
  • Stylised and alien worlds — a palette and sun path of your own, such as a short, dim day under a violet sky.
  • Weather moments — a storm rolling in over a level.

Make it yours

Every option is also live on game.sky: the time, the length of a day, the compass bearing of sunrise, brightness, haze, stars, cloud cover, density, scale, speed and wind, the storm, and whether the sky drives the lighting. The day itself is data: a palette is a list of keyframes by hour that the sky blends between and wraps round, and a sun path sets when the sun rises and sets and how high it climbs.

Two very different skies: an Earth-like day lasting ninety seconds that starts at dawn while a storm builds; and a red-dwarf world with a five-hour day, a low, dim sun and a violet palette, set entirely through options.

A quick look

A ninety-second day starting at dawn, a storm rolling in, and lamps that know when it is dusk:

game.sky.hour = 5.5;
game.sky.cycle(90);
game.sky.storm = 0.6;
const lampsOn = game.sky.sunHeight < 0.05;

Works with

  • world-3d — the 3D world it needs.
  • render-3d — the sky drives its sun, ambient and fog.
  • water-3d — reflects the sky's environment map.
  • god-rays-3d — light shafts and a lens flare, which the sky does not draw.
  • underwater-3d — takes the fog over while the camera is submerged.
  • skymax — the physically based, volumetric alternative on WebGPU; compose one or the other, never both.
  • backdrop-sky — a flat gradient behind a 2D game.

Good to know

  • The clouds are two projected decks, not volumes: they compress toward the horizon and cannot be flown through. Volumetric clouds are skymax.
  • The four constellations and the star field are built in, and there are no moon phases or cloud shadows.
  • The sun rises and sets once a day, so a midnight sun or a polar night is not something a sun path can describe.
  • While driveLighting is on it writes the lighting every step, so turn it off before setting the renderer's sun yourself.

More Backdrop packs

Show all →