getting-started

fidnii Getting Started

A minimal example showing how to load and display an OME-Zarr image using fidnii.

Quick Start

# From the repository root
bun install
bun run --filter @fideus-labs/fidnii-getting-started dev

Open http://localhost:5174 in your browser.

What This Example Does

Loads an MRI scan from a remote OME-Zarr dataset and renders it in 3D. The image loads progressively - you'll see a low-resolution preview first, then the full resolution.

Dataset: mri_woman.ome.zarr

Code

See main.ts. Essentially:

// Initialize NiiVue
const nv = new Niivue({ backColor: [0, 0, 0, 1] });
await nv.attachToCanvas(canvas);
// Add NiiVue configuration as usual
nv.setSliceType(nv.sliceTypeRender);

// Lazily load OME-Zarr data
const multiscales = await fromNgffZarr(DATA_URL);

// Create image - automatically added to NiiVue and loads progressively
await OMEZarrNVImage.create({ multiscales, niivue: nv });

For more details, see the fidnii README.