React-babylon-lite

Hey!

Just dropped a new package on npm – big surprise it’s a React renderer react-babylon-lite (RBL). I was waiting to see if anybody was going to pick up the torch…

Anyway wanted to take a stab at it since nobody else was – and with a fresh start to try to fix a few things bugging me about react-babylonjs (@babylonjs/core + gui if you don’t know that one). The things bugging me:

  1. not tree shaking (which would be absolutely ridiculous to not support on babylon lite!)
  2. reconciler boundary restrictions (fixed with Zustand)
  3. factory constructor hacks (use key of fields to trick reconciler). instead factory fields cause re-creation and object swaps
  4. useGltf - didn’t like how my original way wanted to cache the model. Using the AssetContainer is really clean and works well in this way.

Good news is those 4 will be relatively easy to backport into react-babylonjs!

I managed to bring in a lot of the concepts that were working that I did like. Codegen with ts-morph, lifecycle management (attach strategies), dynamic component registration (HostConfigStore → extend), etc.

Wanted also to support a gltfjsx CLI for easier control of .glTF → JSX, so there’s a new library gltfjsx-rbl. This is based on pmndrs gltfjsx, but specific for Babylon Lite. Also, a library to support JSX host elements via plugin (also, let’s you skip needing to add imports yourself) with tree shaking (this was a good learning experience)!

It’s all been tested out with webpack analyzer. I have a bunch of follow up questions for the team with some unexpected things - wouldn’t call them obstacles. I’ll share them later this week - I need some fresh air. Babylon Lite is really a cool library :smiley:

I wrote also a “hook” for somebody who wants to go imperative (like an easy way to put a PG in a React page w/o renderer) brianzinn/babylon-lite-hook: React hooks and Suspense-ready scene component for Babylon Lite (@babylonjs/lite). That’s completely separate from this package, actually - just FYI.

I think I got pretty much the full API down - just missing Navigation (Recast pathfinding) and Gaussian splatting. No plans to add them unless there is an GH issue.

The main library monorepo is here:
brianzinn/react-babylon-lite: React 19+ renderer for Babylon Lite (@babylonjs/lite) — tree-shakeable, Suspense-first, WebGPU-only

There’s docs listing functionality here - how to import or call:
react-babylon-lite/packages/react-babylon-lite/README.md at main · brianzinn/react-babylon-lite

There’s a live demo here that lays down how hooks and components work - I’ve included the JSX beside the code to help connect the dots. Might try to do something later with snippets and a PG like was done for react-babylonjs. Example pages:
react-babylon-lite example

Anyway, if anybody wants to give it a go - would be interested to hear any feedback in the API or how the hooks work.

Cheers! :clinking_beer_mugs:

6 Likes

Amazing! great work!

@PirateJC for visibility

Agreed, this is great!

So cool @brianzinn !!!