DEV Community

Shinigami
Shinigami

Posted on

From 8 Seconds per Frame to Real-Time 3D Fractals in the Browser

A 20-year journey through code, curiosity, and better tools

About 20 years ago, I wrote my first Mandelbrot renderer.

It was written in C#.
It was single-threaded.
And rendering a single 1920×1080 image took… 8 seconds.

At the time, I didn’t know what I was doing.

I was learning everything step by step — not just fractals, but even basic things like the differences between JPEG, PNG, and BMP.
Multithreading? Never heard of it.
Shaders? Not even on my radar.

But I was fascinated.

Complex numbers, the Mandelbrot set, infinite detail emerging from simple equations — it felt like discovering a hidden layer of reality.


This wasn’t a one-time thing

This fascination never really went away.

About 6 years ago, I revisited the idea and built another project:

👉 https://github.com/Shinigami92/mandelbrot
👉 https://shinigami92.github.io/mandelbrot/

It was already a big step forward compared to my early experiments — but still far away from what I actually wanted:

A real-time 3D fractal explorer.


Fast forward to today

I’m now 33 years old.

And I finally built this:

👉 https://shinigami92.github.io/Fractr/
👉 https://github.com/Shinigami92/Fractr

Fractr — an ultra-performant real-time 3D fractal explorer running in the browser, powered by WebGPU.

With controls that feel more like a video game than a math tool.


What it looks like

Fractr Screenshot 1

Fractr Screenshot 2

Fractr Screenshot 3


What changed?

Honestly?

Two things:

  • WebGPU
  • AI (Claude)

For years, I tried to build a real-time 3D fractal explorer.

And failed.

Again and again.

Not because the idea was impossible — but because the complexity was overwhelming:

  • 3D rendering
  • GPU programming
  • performance constraints
  • math-heavy logic
  • UX that doesn’t feel terrible

It was always just a bit too much.


Built in a weekend (but not by accident)

This time, something was different.

With WebGPU, I had access to modern GPU power directly in the browser.

And with AI tools like Claude, I could finally move fast.

But I want to be very clear about something:

This is not “vibe coding.”


I don’t believe in “vibe coding”

There’s a narrative going around that you can just prompt your way to software.

I don’t buy that.

Yes, AI helped me:

  • explore ideas faster
  • unblock myself
  • iterate quickly

But I still care deeply about the code.

That’s why this project uses:

  • pnpm
  • linting (oxlint)
  • formatting (oxfmt)
  • proper structure

Because I read the code.
I understand the code.
And I want it to be maintainable in the long term.

AI didn’t replace engineering.

It amplified it.


What is Fractr?

Fractr is:

  • A real-time 3D fractal explorer
  • Running entirely in the browser
  • Powered by WebGPU
  • Designed with game-like controls

You don’t just look at fractals.

You move through them.


Controls & Experience

All controls are documented in the settings and in the README.

The goal was simple:

Make exploring fractals feel like a game.

Not like a scientific tool.

(Custom keybinds are coming next.)


Why this matters to me

This project feels like a full-circle moment.

From:

  • waiting 8 seconds for a single frame

to:

  • exploring infinite structures in real time

In the browser.

Same curiosity.

Completely different tools.


What surprised me the most

Not the visuals.
Not the performance.

But how much AI changed the process.

It turns:

“I have no idea how to do this”

into:

“Okay… I can figure this out.”

And that’s a huge difference.


The future

If this is possible in a weekend today…

What will be possible in 5 years?


Contributions welcome

If this resonates with you, I’d love your feedback.

You can contribute in any form:

  • ideas
  • bug reports
  • feature requests
  • pull requests

👉 https://github.com/Shinigami92/Fractr


Final thought

20 years ago, I was happy to render a single image in 8 seconds.

Today, I can explore infinite complexity in real time.

Same curiosity.

Better tools.


Thanks for reading ✨

Top comments (0)