Hey everyone. I've been working on a web-based Gaussian Splatting viewer for the last few months and wanted to share some findings.

Make a viewer that works on any device, including budget phones, without plugins or native apps.

- SparkJS 2.0 for rendering
- Progressive streaming via chunked RAD files
- HTTP Range requests from Cloudflare R2
- Adaptive quality system that detects GPU capabilities in real-time

Real-world results (tested on actual devices):

Scene	Desktop (RTX 3070)	Xiaomi 15 Ultra	Redmi Note 11 (€200)
Tufia (8.5M splats)	60 fps	55 fps	40 fps
XGrids Demo (12M)	60 fps	45 fps	30 fps
50M splats	60 fps	25 fps	15 fps
100M splats	55 fps	15 fps	8 fps

What I got wrong:

1. Optimized too early. Spent weeks on custom compression before realizing `build-lod --rad-chunked --max-sh=3` already hit the sweet spot. The tooling is better than I expected.

2. Ignored the data problem. Users were uploading raw 500MB PLY files and wondering why nothing loaded. Had to build the conversion step into the workflow.

3. Assumed all phones are equal. They're wildly different. The adaptive quality system exists because of this mistake.

What I learned:

- Streaming > monolithic files. Progressive loading changes the UX entirely.
- `--max-sh=3` is the sweet spot for mobile. Higher SH bands have diminishing returns on small screens.
- The web is underrated as a platform for this. More people can click a link than download an app.

Happy to answer questions about the technical details. Live demo:
https://mirador3d.com/v/penthouse-demo

Live demo: https://chroma-delta.vercel.app
(no signup, no upload — boots into a chr20:10M window with five demo tracks pre-loaded from public S3 / UCSC / Ensembl)

What it is

Chroma is a browser-based genome viewer aimed at being a faster, more keyboard-friendly alternative to IGV.js. The whole render path is WebGL2 (hand-written, no Three/Pixi); state lives in Solid.js signals; parsing runs in a Comlink-managed worker pool.

I've been driving the whole project through Claude Code — solo dev plus agents — and after ~50 commits, I've hit the wall on knowing what to ask it to build next, hence this post.

What works today

• 5 demo tracks:
  • hg19 reference FASTA (IGV/Broad mirror)
  • Ensembl gene annotations
  • UCSC phyloP100way conservation BigWig
  • HG00096 1000G BAM
  • HG002 GIAB 300× BAM (hidden by default — too slow to load for the default boot)
• Two-level navigator:
  • top bar = whole chromosome with Mb-scale ticks (click to jump, drag to pan, drag empty to drag-create)
  • bottom bar = local context with drag-create / move / edge-resize / Esc-cancel
• Reference renderer with two modes:
  • colored 1-bp quads at any zoom
  • actual A/C/G/T/N letters via a Canvas2D-baked atlas when basePixelWidth ≥ 12 px
• Gene name labels rendered on a Canvas2D overlay, shrink-wrapped with ellipses at narrow blocks, strand-aware alignment (5' anchors to the leading edge)
• Single-fetch viewport mode at pileup tier (≤50 kb spans): one HTTP Range per nav instead of N tile fetches — 6× speedup on the 1-track B1 cold load (4.7 s → 774 ms)
• Sticky URL → worker dispatch (FNV-1a hash on the file URL) so the per-worker u/gmod parser caches (BAI 8.7 MB) actually get reused instead of scatter-loaded N times
• 64-bit bigint coordinates throughout, with a single sanctioned conversion to Float32 for shader uniforms
• 60 fps pan / zoom on a 1 Mb BAM viewport, p95 fps locked
• 250 unit tests, TypeScript strict + noUncheckedIndexedAccess, ~88 kB main JS gzipped

Tech stack

• Solid.js for the reactive shell (picked over React for fine-grained signals + smaller bundle — the eventual goal is clinical-report embed)
• WebGL2 hand-written, instanced rectangles for everything geometric; Canvas2D overlay only for text labels
• u/gmod**/{bam, bbi, indexedfasta}** for the format parsers
• u/chenglou**/pretext** for unicode-correct text measurement and shrink-wrap on the label overlay
• Comlink worker pool + Cache API for HTTP range coalescing
• Vite + pnpm + Vitest

Honest gaps (what's still broken/missing)

• B1 cold gate target is 300 ms, currently ~3 s for the default 5-track demo — dominated by one-time BAI parse (~3.7 s for HG00096, ~6.6 s for the 300×). Needs either a streamed BAI parse or a cap-at-N read fetch in the worker.
• No CIGAR support — reads render as plain rectangles, no insertions/deletions/mismatches shown
• No VCF track (parser stubbed)
• No hover/select tooltip yet
• Pileup row collisions across tile boundaries are accepted (cross-tile merge is a carry-forward)
• HG002 300× BAM works but takes ~10 s on first nav — that's why it's visible: false in the default seed

What I'm asking the community for

1. Hit it in your browser and try to break it.

Bug reports welcome — please include the locus/zoom level when reporting.

2. Prompt suggestions for what I should build next.

I've been stuck between these and would love opinions:

• VCF track (parser stubbed already)
• CIGAR-aware read rendering with mismatch coloring
• Per-base read sequence letters at deep zoom (would need to extend the SoA ReadTile with packed SEQ)
• Splitview (two viewports side-by-side, IGV style)
• Click-to-pin tooltip with full feature info
• Cap-at-N read fetch for high-coverage BAM (so the 300× track stops being a footgun)
• Label color is reactive to the dark theme
• BED track for arbitrary user regions

Thanks in advance for any feedback.

It's got tons of easter eggs and things to discover and things to learn!

Quick video showing updates to my latest real-estate experience for the web.

Some nice new additions in the form of animated traffic and support for a complete 360° "rendered" tour.

This whole experience is 100% customizable according to the client's project and isn't limited to real-estate but can very effectively be applied to other heavy industrial design segments where a complex product/project needs to be broken down into smaller, interactive chunks to better share and convey to the end clients.

Follow me for more crazier projects that actually solve business problems.✌

Link to the full video: https://www.instagram.com/reel/DX7ktwBN0l6