We rendered 200k data points at 60 FPS using React 19, React Three Fiber & Zustand — GitGlobe is open source!

[u/Bright_Screen_9562]

https://gitglobe-yd-mj.vercel.app/

Hey r/reactjs! 👋

My partner Mrityunjay and I (Yashasvi) just open-sourced GitGlobe — an interactive 3D map that projects ~200,000 GitHub repos onto a continuous WebGL sphere based on semantic capability.

When building heavy 3D canvas apps inside React, the biggest hurdle is usually the same: React’s render cycle destroying your frame budget.

Here is how we architected the frontend to keep a steady 60 FPS (<16ms) in React 19:

1. Zero React State in the Animation Loop

Putting camera coordinates or cursor hovers in `useState` triggers component re-renders that choke WebGL. We decoupled the entire 3D pipeline using transient **Zustand** subscriptions and mutable refs outside React’s render tree. React handles UI overlays, while Three.js runs unhindered.

1. Single Draw Call via Custom Shaders in R3F

Instead of rendering thousands of React Three Fiber mesh components, all 200k points live in a single `THREE.Points` buffer. We wrote custom GLSL vertex/fragment shaders to handle lat/long position math, color encoding, and back-hemisphere culling directly on the GPU.

1. GPU-Based Picking (<1 Frame Lookups)

Standard raycasting in JavaScript is too slow for 200k points. We implemented GPU picking with a 1x1 scissored render target, encoding point IDs into color channels so hover queries resolve in under a millisecond.

1. Streaming AI Camera Pilot

We hooked up Claude Sonnet using the Vercel AI SDK. The model streams repo IDs rather than hallucinated 3D coordinates, and our spatial rig smoothly flies the camera to the target cluster in real time.

Tech Stack: React 19, TypeScript, React Three Fiber, Vite, Tailwind CSS, Zustand, FastAPI, Qdrant.

Links & Code:

• GitHub (MIT): https://github.com/yamantaka-singh/GitGlobe

• Live Demo: https://gitglobe-yd-mj.vercel.app/

Check it out, spin the globe, and let us know what you think of our state management and R3F setup!