Lesson 5

Query stars without Three.js

Lessons 1-4 used a viewer helper. Now we peel that away and use the data stream directly for lists, maps, games, and custom renderers.

Learning goal

This notebook follows the provider-only pattern: create a provider, stream star cells, listen for deltas, and turn those star cells into rows. The required attributes are position, magAbs, teffLog8, and objectRef.

In this lesson, star cells are octree data chunks streamed by the provider. Notebook steps are the editable code blocks you run in order. Rows are app-owned interpretation: the provider does not decide what your app is trying to show.

The rows from this lesson are plain JavaScript objects. You can draw them with Canvas, PixiJS, Phaser, SVG, or your own renderer. SkyKit is not required once you choose to own rendering yourself.

How to read the notebook

Each notebook step runs in the same notebook state. That is why step 1 begins with provider?.dispose?.(): if you rerun the step, the old provider may still be alive. Optional chaining makes the cleanup safe when no provider exists yet, or when a provider implementation has no dispose method.

Step 2 does not download "all stars." It asks for the star cells needed around one observer view, using a demand strategy and a short attribute list. The stream reports progress with deltas, and stars/current marks the first complete answer for that view.

Step 3 is where provider data becomes application data. The helper rowsFromCells() reads packed arrays from each star cell and returns ordinary row objects that the lesson can filter, sort, slice, and render.

Live notebook

Stream stars into a table

Run the notebook steps in order, or edit one step and rerun from there.

Ready.
Run the notebook to render rows.

Things to try

  • Change limitingMagnitude in step 2.
  • Move observerPc to another location in parsecs.
  • Change the sort in step 3 from brightest stars to coolest stars.
  • Add a local filter before slice(0, 40).

What changed in the code

There is no Three.js renderer here. The provider emits deltas such as stars/cells-upsert, stars/cells-remove, and stars/current. The notebook keeps a local cells array of provider star cells, then creates rows by reading coordinate arrays and public star refs.

The comments in the notebook steps are deliberately detailed because this lesson exposes the data lifecycle that the viewer normally hides: open a provider, choose a demand strategy, request attributes, consume async deltas, and dispose of long-lived resources when a run is replaced.

The rendered table intentionally shows a semantic cell key from each star cell, ordinal, x/y/z parsec positions, absolute magnitude, decoded temperature, and whether a StarObjectRef is available. It does not expose provider storage offsets.

Source and next steps

Use the provider examples for deeper diagnostics.

The SkyKit repository includes a minimal stream example with the same provider, star-cell delta, and table-rendering structure.

Use this in a browser

For standalone browser examples, use stable, pinned CDN URLs directly. The lesson does not introduce version constants or URL helper functions.

Browser import
import {
  OCTREE_DEFAULT,
  createStarOctreeProviderService,
} from "https://esm.sh/@found-in-space/star-octree-provider@0.2.0?bundle";
import {
  createObserverShellStrategy,
  createStarCellKey,
  decodeTemperatureK,
} from "https://esm.sh/@found-in-space/star-trees@0.2.0?bundle";

Use this locally

Data-only projects do not need SkyKit or Three.js. Install the focused packages that own provider streaming and star interpretation.

Install
npm install @found-in-space/star-octree-provider@0.2.0 @found-in-space/star-trees@0.2.0
Local imports
import {
  OCTREE_DEFAULT,
  createStarOctreeProviderService,
} from '@found-in-space/star-octree-provider';
import {
  createObserverShellStrategy,
  createStarCellKey,
  decodeTemperatureK,
} from '@found-in-space/star-trees';