logo
By Lawrence

5 minutes

A Sky Instead of a Void

Everything behind your rocks is clearColor: one near-black RGBA in the scene header, painted over the whole frame every tick. It has served, because the rocks and the tracers have been carrying the eye. Look up and the illusion ends: nothing above you, nothing below, no direction that looks any different from any other.

        "NebulaSky": {}

The plugin needs nothing from you. bjs download dropped src/components/NebulaSky/adapter/register.ts, and the loop in main.ts installs it next to last lesson's before the scene loads.

Why the sky is built from directions

A skybox is six square images on the inside of a cube. The obvious way to make one is to generate six images: six 2D noise fields, six sets of stars. It fails at once. The top edge of the front face and the front edge of the top face are generated on their own, so they don't match, and you get six bright seams framing your view in a perfect cube. Nothing looks less like space.

src/components/NebulaSky/NebulaSky.core.ts
/** Face UV (0..1) → unit direction. Standard cubemap convention. */
export function faceUVToDir(face: number, u: number, v: number): [number, number, number] {
  const a = 2 * u - 1;
  const b = 2 * v - 1;
  let dx: number, dy: number, dz: number;
  switch (face) {
    case 0: dx = 1; dy = -b; dz = -a; break;
    case 1: dx = a; dy = 1; dz = b; break;
    case 2: dx = a; dy = -b; dz = 1; break;
    case 3: dx = -1; dy = -b; dz = a; break;
    case 4: dx = a; dy = -1; dz = -b; break;
    default: dx = -a; dy = -b; dz = -1; break;
  }
  const len = Math.hypot(dx, dy, dz);
  return [dx / len, dy / len, dz / len];
}

Every pixel is turned back into the unit direction you would be looking along to see it, and the colour is a function of that vector. Two pixels either side of a face boundary sit at almost the same angle from the origin, so they resolve to almost the same direction, and therefore almost the same colour. There is no edge to see because the faces were never separate images; they are six windows onto one continuous function of 3D space.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search