b3d-skybox

Procedural sky with sun/moon cycle driven by time of day. Automatically controls a b3dSun sibling's direction, intensity, and color.

Demo

import { b3d, b3dSun, b3dSkybox, b3dGround, b3dBox, b3dSphere, label3d, slider3d } from 'tosijs-3d'
import { orbitCam } from 'tosijs-3d/demo-utils'
import { tosi } from 'tosijs'

const { sky } = tosi({ sky: { timeOfDay: 17 } })

const scene = b3d(
  {
    scenePanel: () => [
      label3d({ text: 'Sky' }),
      slider3d({ label: 'time of day', value: sky.timeOfDay, min: 0, max: 24, step: 0.5 }),
    ],
    sceneCreated(el, BABYLON) {
      orbitCam(el, { alpha: -Math.PI / 2, beta: Math.PI / 3, radius: 15, target: [0, 0, 0] })
    },
  },
  b3dSun(),
  b3dSkybox({ timeOfDay: sky.timeOfDay, realtimeScale: 0, latitude: 40 }),
  // A checkered ground (receives shadows) + a few casters — scrub the time of
  // day and watch the shadows swing long at dawn/dusk and short at noon.
  b3dGround({ width: 20, height: 20, texture: 'checker', textureTiles: 10 }),
  b3dBox({ meshName: 'pillar', size: 1.5, x: -3, y: 0.75, z: 1, color: '#c85a3a' }),
  b3dBox({ meshName: 'crate', size: 1, x: 2, y: 0.5, z: 3, color: '#5aa0c8' }),
  b3dSphere({ meshName: 'ball', diameter: 2, x: 3, y: 1, z: -2, color: '#c8a83a' }),
)
preview.append(scene)

Demo — the encoded sky

A baked sky is a raster of a thing that is almost entirely empty, and the stars are the expensive part. The PAIR that bakeSkyPair() emits splits the sky the way the measurements argued for: nebulae (low-frequency) in a small smooth cube, stars and distant galaxies (points) in a DATA cube the shader decodes — so stars stay points at any zoom instead of being a smear baked at one resolution. Zoom into the band and watch them stay sharp.

import { b3d, b3dSkybox, b3dGround, label3d, slider3d } from 'tosijs-3d'
import { orbitCam } from 'tosijs-3d/demo-utils'
import { tosi } from 'tosijs'

const { sky } = tosi({ sky: { timeOfDay: 23.5 } })

const scene = b3d(
  {
    scenePanel: () => [
      label3d({ text: 'Encoded sky' }),
      slider3d({ label: 'time of day', value: sky.timeOfDay, min: 0, max: 24, step: 0.5 }),
    ],
    sceneCreated(el, BABYLON) {
      orbitCam(el, { alpha: -Math.PI / 2, beta: Math.PI / 3, radius: 15, target: [0, 0, 0] })
    },
  },
  b3dSkybox({
    timeOfDay: sky.timeOfDay,
    realtimeScale: 0,
    starfieldCube: '/sky/nebula',
    starfieldData: '/sky/stars',
    starfieldTilt: '12,25,58',
  }),
  b3dGround({ width: 20, height: 20, texture: 'checker', textureTiles: 10 }),
)
preview.append(scene)

Pin the shipped sky in a document

/sky/stars + /sky/nebula are latest: what the demos load, and a rebake changes them. A document that should keep the sky it was authored against points at a versioned pair instead, which is never rewritten:

b3dSkybox({
  starfieldCube: 'https://3d.tosijs.net/sky/0.8.4/nebula',
  starfieldData: 'https://3d.tosijs.net/sky/0.8.4/stars',
  starfieldDataSize: 1024, // from the manifest — it must match the data
  starfieldTilt: '12,25,58',
})

Each version folder carries a manifest.json with the decode parameters (starfieldDataSize, starfieldTilt) and the recipe it was baked from, so a consumer can read them from beside the data rather than hard-coding them. Versions so far: 0.8.3 (the generateGalaxy sky) and 0.8.4 (the voxel galaxy — far more stars). tosijs-3d#90.

The starfield attributes (starfield*, nebula*) are live: changing one on an existing sky rebuilds the starfield, so applying a document to a sky that is already up works. skyboxSize is the one that is still read once.

Attributes