A recreational programming project with no vibe coding and built from scratch.
The project is an experimental render of a black hole, where gravity bends space around itself so much that even reflected light becomes visibly distorted in space.
If we place a black hole in front of a star, it distorts the light from it so much that it looks like it bends the star and carves itself into it. If we add a disc ring of hot matter around the black hole, it bends the light coming from it such that it displays a new ring on a new axis and has a second inner ring.
As a newcomer to front-end, I wanted to build something advanced, but still small in scope. For years, I wanted to write ray tracing program, 3d scene, and physics simulation + do it from scratch, without library. After getting blessed by the algorithm gods, I found a few projects about black hole renders done in C++, and that became the perfect match. I go deeper about the development and core concepts here: 📘 This link does not bite.
npm run buildThen you will find it in /dist.
Or you can run it live:
npm install
npm run dev # starts the build/watch loop and serves the app through live-server.The project is pretty much done for me, but these are some improvements I might do in the future:
1. Rewrite the CPU pipeline into WASM (AssemblyScript), including the grid.2. Enhance Milkyway and star noise.
3. Add translucency and movement to the disc.
4. Add textures and reflections to objects, plus an orbiting system.
5. Cache rendered objects for a speed improvement.
6. Add a simple scene editor UI.
7. Add sound design.
- Kavan's video (his repository)
- Tony's simple ray tracer (I believe there was a video, but I cannot find it)
- About Runge-Kutta
- Polar coords
- Useful article about intro with webGPU
- Example of code calculation
- Awesome and daunting pdf from NASA