GitHub pushes become real-time shooting stars — 7 shader-driven planets in Three.js

[nitr0yukkuri]

Hi everyone!

I’ve been building GitHub Planet, a Three.js project that turns GitHub activity into a living 3D planet.

Website: https://githubplanet.dev

Instant demo — no login required:

GitHub Planet

Source: https://github.com/nitr0yukkuri/githubplanet

A developer’s GitHub activity affects the appearance of their planet — programming languages, contributions, and development history are reflected in the world.

But I wanted to go a little further than simply changing the planet’s color.

Each programming language has its own visual identity.

CSS — Directional Color Flow

The CSS planet uses an animated directional color flow across its surface.

I wanted it to feel fluid and constantly changing, while still keeping the shape of the planet readable.

C++ — Plasma + Lightning

The C++ planet uses an animated plasma-like surface together with lightning effects.

Compared with the CSS planet, this one is intentionally much more energetic and unstable.

TypeScript — Defensive Shell

The TypeScript planet is surrounded by multiple transparent shell layers.

The idea was to visually represent the defensive nature of strong typing as structures protecting the planet.

There are currently 7 language-specific planets:

• CSS — directional color flow
• C++ — plasma + lightning
• Go — atmospheric wind
• TypeScript — defensive shell layers
• JavaScript — reactive golden surface
• Rust — desert terrain + animated dust
• Vue — reactive wind

On the Three.js side, I’m experimenting with:

• custom GLSL shaders
• ShaderMaterial
• MeshStandardMaterial.onBeforeCompile()
• transparent layered meshes
• additive blending
• THREE.Points
• animated shader uniforms
• particles and atmospheric effects
• language-specific materials

One of my favorite parts of the project is connecting real GitHub activity to the 3D world itself.

When someone pushes code, the event goes through:

GitHub Push → Webhook → Socket.IO → Three.js

and appears as a shooting star in real time.

So the planet isn’t just generated once from GitHub data — development activity can actually leave a visible trace in the universe.

I’d love to hear some thoughts from people with more experience building shader-heavy Three.js projects:

For effects like these, would you keep extending MeshStandardMaterial with onBeforeCompile(), or would you move more of the language-specific planets toward dedicated ShaderMaterial / TSL implementations?

And visually, I’m also curious:

Which of the language-specific planets feels the most distinct at first glance?

Thanks for checking it out!

[nitr0yukkuri]

Small update!

I’ve cleaned up the showcase a bit and added a no-login demo, so it’s now much easier to jump straight into the project.

Demo:

GitHub Planet

I also updated the post with animated examples of the CSS, C++, and TypeScript planets.

The part I’m most interested in feedback on is still this:

Would you keep pushing MeshStandardMaterial.onBeforeCompile() further for these effects, or start moving more of the language-specific planets toward dedicated ShaderMaterial / TSL implementations?

Also curious which planet feels the most visually distinct at first glance.

Thanks for taking a look!

[PavelBoytchev]

All planets rotate in the same direction.

Is the speed of rotation calculated from some repository parameter or is picked at random? E.g. fast rotating planes could mean more commits in the last month.

I browsed a few dozen of random planets. After the first few, the rest looked like the same, except for the stars.

Do you plan to add some animation on the surface of the planets? Or some mountains? Maybe you already have, but I just didn’t see them.

As for materials, TSL is a better choice for the future, as most likely WebGLRenderer will be dropped out. But if you feel happy performing surgery on shaders’ source code, you may continue with onBeforeCompile.