sky-box

Procedural Sky Dome and Celestial Bodies

Use this skill when creating a reusable dynamic sky for a web-based 3D game.

Pattern

Prefer a large inside-facing sky dome when the sky needs animated color, stars, sunrise/sunset gradients, or sun/moon direction. Use a static skybox only when the scene art is fixed and time of day does not matter.

The sky module should provide:

• a dome mesh with depth writes disabled
• a shader material or sky material with day/night uniforms
• sun and moon disc meshes parented to the scene, marked as infinite distance or otherwise camera-relative
• optional halo meshes or billboard planes for glow
• texture loading for celestial bodies when custom art is needed

import { Mesh, MeshBuilder, Scene, ShaderMaterial, Vector3 } from '@babylonjs/core'

export interface SkyRig {
  skyMaterial: ShaderMaterial
  sunDisc: Mesh
  moonDisc: Mesh
}

export function createSkyRig(scene: Scene): SkyRig {
  const skyMaterial = new ShaderMaterial('sky-material', scene, { vertex: 'sky', fragment: 'sky' }, {
    attributes: ['position'],
    uniforms: ['worldViewProjection', 'dayAmount', 'moonAmount', 'starBoost', 'sunDirection'],
  })
  skyMaterial.backFaceCulling = false
  skyMaterial.disableDepthWrite = true

  const dome = MeshBuilder.CreateSphere('sky-dome', { diameter: 1600, segments: 32, sideOrientation: Mesh.BACKSIDE }, scene)
  dome.material = skyMaterial
  dome.infiniteDistance = true
  dome.isPickable = false

  const sunDisc = MeshBuilder.CreatePlane('sun-disc', { width: 70, height: 70 }, scene)
  const moonDisc = MeshBuilder.CreatePlane('moon-disc', { width: 55, height: 55 }, scene)
  for (const disc of [sunDisc, moonDisc]) {
    disc.billboardMode = Mesh.BILLBOARDMODE_ALL
    disc.infiniteDistance = true
    disc.isPickable = false
  }

  return { skyMaterial, sunDisc, moonDisc }
}

Shader Inputs

Keep shader uniforms generic:

• dayAmount: 0 at night, 1 in daylight
• moonAmount: inverse or separately shaped night visibility
• starBoost: weather/biome multiplier
• sunDirection: normalized direction for glow and horizon tint