Modern web design increasingly relies on interactive 3D elements to engage users. One of the most visually striking effects is a procedural black hole - an animated object that simulates gravity, light bending, and particle motion in real time.
In this article, we explain how our team developed a fully procedural black hole element for the web, using WebGPU, Three.js, and Raymarching, and how it can be applied in interactive websites, WebAR experiences, and gaming projects.
✨ Step-by-Step Creation Process
1. Defining the Core Components
Our black hole consists of three main elements:
- Accretion Disk - particles and dust forming a dynamic rotating disk
- Core - fully absorbs light and acts as the central focal point
- Gravitational Space Distortion - bends rays to simulate lensing and gravity
Each component was developed individually and then combined into a single composition, optimized for real-time rendering.
2. Base Geometry and Raymarching
The object is based on a simple cube. All rendering is handled via a fragment shader.
We use Raymarching:
- Rays are cast from the camera to each pixel
- Rays advance through the volume step by step
- Pixel colors are calculated at every step
- Procedural geometry and lighting are applied
This method allows precise control over particle distribution and light behavior.
3. Procedural Accretion Disk
The accretion disk uses simplex noise for organic texture generation, simulating dust and particle movement.
To avoid common Raymarching artifacts, we applied Jitter, slightly offsetting rays at each step for smooth transitions.
4. Gravitational Light Distortion
We mathematically bend rays during Raymarching to achieve:
- Disk distortion around the core
- Realistic gravitational lensing
- Space attraction effect
Bloom and color grading add a glowing, high-fidelity appearance.
5. Core Layer
The black core absorbs light fully and interacts seamlessly with the disk.
Rendering is split into layers: front disk → core → back disk, creating a realistic depth effect.
6. Space Distortion Behind the Object
Finally, the environment behind the black hole is distorted using the bent rays, producing a convincing gravitational lensing effect.
🛠 Technologies: WebGPU -> JavaScript -> Three.js -> TSL -> Raymarching -> Jitter -> Bloom
The object is fully browser-compatible and can be embedded in any Three.js scene.
🧐 Challenges
Debugging Raymarching - difficult due to complex ray behavior; solved with special visualization modes.
Camera Inside Object - required seamless inner-surface rendering to avoid visual glitches.
👉🏻 Capabilities
The black hole is fully procedural and configurable, with parameters such as:
- Disk density and particle structure
- Gravitational distortion intensity
- Color and Bloom strength
- Core radius and rotation speed
The most notable feature: real-time distortion of everything behind the object.
🦾 Where to use
- Interactive / immersive web projects
- Games and WebAR/WebXR experiences
- Creative portfolios and landing pages
- Brand campaigns and digital installations
The solution is scalable and adaptable for a wide range of web and 3D projects.
⏰ Development Time -> 50 hours
Test it here: https://singularity.misterprada.com/
💡 Conclusion
This project demonstrates the potential of modern web graphics and WebGPU-powered Raymarching to create complex procedural effects.
Our procedural black hole is a perfect example of interactive web animation, combining technical depth, performance, and visually striking design.
🚀If you’re interested in immersive 3D elements in your projects, we’d be happy to connect and discuss!
🚀Check for more: https://esqrd.co/blog?category=latest
🚀Message here: welcome@esqrd.co
Top comments (0)