Purnendu Gharami

Your target is clear: a cinematic black hole with a luminous accretion disk, not a conventional spiral galaxy. Looking at your screenshot, I'd keep the nearly pure-black background and the blue particle aesthetic. Those already give you a strong foundation. The biggest change is to make the black hole feel like a massive object bending light and heating matter, rather than a small dark spot surrounded by a cloud of particles. The visual direction 9 Aim for this visual hierarchy: First glance: a clearly defined, pitch-black event horizon. Second glance: an intense, thin, glowing accretion disk wrapping around it. Third glance: particles, plasma turbulence, and subtle gravitational lensing. Background: almost entirely black, with sparse stars so the black hole dominates. Your current image spreads attention across the entire particle cloud. The revised composition should concentrate attention on the center. 2. Redesign the composition A. Event horizon — the focal point yle.fi Make the central silhouette clearly visible, with a clean dark interior. Add a thin, intensely bright photon-ring effect around the silhouette. Keep the ring crisp; avoid turning the entire center into a white blob. The black hole should occupy roughly 10–16% of the image width as a starting composition target, adjusted for the disk's apparent scale. B. Accretion disk — the main spectacle the-science-behind-the-invis… Replace the uniform oval particle cloud with a thin, structured disk. Use a hot white-gold inner region and cooler blue-cyan outer material. Create density bands, uneven clumps, and subtle turbulence instead of evenly distributed dots. Tilt the disk relative to the camera so the near and far sides are visually distinguishable. C. Gravitational lensing — the signature effect tomshw.it Bend the far side of the disk visually around the black hole, creating an arc above the silhouette. Keep the lower and upper arcs connected to the same disk; they should not look like separate floating rings. Add a restrained distortion of the background behind the event horizon. 3. Technical implementation plan Build this as separate rendering layers rather than trying to make one particle system do everything. Layer 5 — Background Black space · sparse stars · subtle distant haze Layer 4 — Accretion-disk particles Orbital paths · density variation · temperature colors Layer 3 — Plasma and emission Inner glow · turbulent filaments · controlled bloom Layer 2 — Lensing and photon ring Distortion pass · luminous arcs · dark silhouette Final composite Exposure · contrast · color grading · vignette A. Rebuild the particle distribution Your screenshot's particle cloud has a fairly smooth oval boundary and an even spread. Give the particles a disk-shaped distribution with a clear inner edge, outer edge, and density variation. For a simple flat disk, sample the orbital radius using: \[ r=\sqrt{r_{\min}^2+u(r_{\max}^2-r_{\min}^2)} \] where \(u\) is a uniform random number between 0 and This produces a uniform distribution over disk area. Then adjust particle density to concentrate more material near the inner disk if desired. For each particle, store: Orbital radius \(r\) Orbital angle \(\theta\) Orbital speed or angular velocity Particle brightness and size Temperature or color variation A small, slowly changing turbulence offset For a Newtonian orbital approximation, angular velocity scales as: \[ \omega(r)\propto r^{-3/2} \] So the inner particles move faster than the outer ones. This gives the disk a much more coherent motion than applying random movement to every particle. For a physically accurate black hole, the inner-orbit behavior requires relativistic corrections; this formula is a starting approximation, not a complete black-hole model. B. Make the light feel hot Use a combination of emissive particle colors and a separate glow pass. Region Suggested appearance Outer disk Deep blue, cyan Mid-disk Blue-white, pale violet Inner disk Gold, amber, white Photon ring Thin, near-white glow Event horizon Nearly pure black Use additive blending for the brightest emission, but keep the main particle layer relatively sharp. Apply bloom after the scene is rendered rather than giving every particle an enormous soft halo. Start with a restrained bloom radius and strength, then increase them until the inner disk looks luminous without losing its structure. The precise values depend on your renderer and exposure settings. C. Add gravitational lensing This is the effect most likely to make the simulation feel extraordinary. A physically convincing black hole bends light from the far side of the disk around the event horizon, so an observer can see part of the disk above the black hole as well as across the front. For a cinematic approximation: Render the background and disk to a texture. Use a screen-space shader to distort the sampled image around the black hole's projected position. Increase the distortion as pixels approach the black hole. Add a separate photon-ring glow and preserve the dark event-horizon silhouette. A simple radial warp can create a stylized effect, but it will not reproduce actual relativistic ray tracing. For more realistic results, trace rays through a Schwarzschild or Kerr spacetime model, or use precomputed lensing maps. D. Animate it without making it chaotic Your simulation should feel powerful, not frantic. Keep the camera fixed. Rotate the disk slowly, with the inner material moving faster than the outer material. Let turbulence evolve gradually rather than flickering randomly. Add occasional subtle brightness variations along the disk. Keep the background stars almost motionless. If you use particle trails, make them faint and short enough to preserve a clean image. The goal is to make the light and matter feel like they are flowing continuously around an immense gravitational object. 4. Concrete rendering targets Use these as starting targets rather than strict physical specifications. Composition 60–75% of the frame width occupied by the main disk and its glow Background 85–95% visually dark, preserving negative space Motion Slow continuous orbital movement, no camera shake Lighting High contrast sharp core with controlled surrounding glow For performance, use GPU-driven particles or instanced rendering where possible. Avoid creating a separate draw call for every particle. Render the glow and lensing effects in a small number of post-processing passes, and scale the effect resolution independently if needed. 5. Implement in this order Composition first: enlarge and clearly frame the black hole, and make the disk's shape recognizable. Particle structure second: establish the inner and outer disk, orbital distribution, and density bands. Lighting third: add emissive inner material, a photon ring, and carefully tuned bloom. Lensing fourth: warp the far-side disk and background around the black hole. Motion fifth: implement differential rotation and subtle turbulence. Polish last: adjust exposure, color balance, framing, and performance. Don't add all the effects at once. Compare screenshots after each step; otherwise, you won't know which change actually improves the result. One thing I need to make this implementation-specific What are you using to build the simulation? Three.js / React Three Fiber Raw WebGL / GLSL shaders HTML Canvas / JavaScript particles Godot Something else What does your current simulation use? Particles and point sprites Shaders and procedural rendering A mix of particles, meshes, and shaders Not sure Get my technical implementation plan With the engine identified, the next step is to turn this into actual rendering changes and code—not just more visual effects." "For your Three.js / React Three Fiber simulation, I'd rebuild the renderer around one principle: The black hole should be a physical-looking object; the accretion disk should be the spectacle; the particles should add detail rather than define the entire image. Your screenshot already has a useful particle foundation. Keep it, but stop asking the particle system to create the black hole, its lighting, and the gravitational lensing all by itself. The implementation below assumes React Three Fiber, Three.js, and TypeScript. It uses GPU-friendly particles, shader-based disk rendering, and a post-processing pass for lensing. Target architecture BlackHoleScene Camera · lighting setup · fixed composition EventHorizon Dark silhouette · photon ring AccretionDisk Procedural plasma · disk geometry DiskParticles Instanced or point-based orbital particles Background Sparse stars · deep black space Post-processing pipeline Render scene → lensing distortion → bloom → tone mapping I'd implement the visual changes in this order: A clearly defined black silhouette. A continuous luminous disk behind and in front of it. Differential orbital motion. Screen-space gravitational-lensing approximation. Bloom, exposure, and subtle turbulence. Don't start by increasing your particle count. Start by improving the composition and the light. 2. Install the rendering dependencies If you already have an R3F project, keep your existing dependencies and add the post-processing packages: npm install three @react-three/fiber @react-three/postprocessing postprocessing Use compatible versions of Three.js, R3F, and React Postprocessing rather than upgrading the entire project blindly. React Postprocessing supports custom GLSL effects and composes them into an effect pipeline. React Postprocessing +1 Suggested file structure: src/ components/ BlackHoleScene.tsx EventHorizon.tsx AccretionDisk.tsx DiskParticles.tsx effects/ GravitationalLensing.tsx shaders/ disk.ts particles.ts 3. Implement the event horizon and luminous disk Start with this scene component. It gives you a real dark sphere, a shader-rendered disk, and a particle layer that can be upgraded independently. BlackHoleScene.tsx import { Canvas } from "@react-three/fiber"; import { Bloom, EffectComposer, Vignette, } from "@react-three/postprocessing"; import { AccretionDisk } from "./AccretionDisk"; import { DiskParticles } from "./DiskParticles"; import { GravitationalLensing } from "../effects/GravitationalLensing"; function BlackHole() { return ( <> {/* Accretion disk behind the event horizon */} <AccretionDisk /> {/* Existing particle simulation, replaced with GPU motion */} <DiskParticles count={40000} /> {/* The black silhouette */} <mesh renderOrder={5}> <sphereGeometry args={[0.72, 96, 96]} /> <meshBasicMaterial color="#000000" /> </mesh> {/* A restrained luminous ring */} <mesh rotation={[Math.PI / 2, 0, 0]} renderOrder={6}> <torusGeometry args={[0.76, 0.018, 12, 256]} /> <meshBasicMaterial color="#fff1c7" toneMapped={false} /> </mesh> </> ); } export default function BlackHoleScene() { return ( <Canvas camera={{ position: [0, 2.4, 8], fov: 38, near: 0.1, far: 100, }} dpr={[1, 1.5]} gl={{ antialias: true }} > <color attach="background" args={["#010208"]} /> <BlackHole /> <EffectComposer multisampling={0}> <GravitationalLensing center={[0.5, 0.5]} radius={0.23} strength={0.012} /> <Bloom intensity={1.15} luminanceThreshold={0.65} luminanceSmoothing={0.25} mipmapBlur /> <Vignette offset={0.2} darkness={0.7} /> </EffectComposer> </Canvas> ); } These are initial artistic settings, not universal optimal values. In particular, the disk orientation and camera position determine whether the ring lines up with the silhouette. The example is a starting composition, not a finished physically accurate black-hole renderer. Important: the torus above is a stylized ring, not a true relativistic photon ring. Also, a black sphere alone does not simulate an event horizon; it supplies the visual silhouette. AccretionDisk.tsx Render a continuous emissive disk underneath the particles. The following shader uses a plane with radial falloff, procedural bands, and animated turbulence. import { useRef } from "react"; import { useFrame } from "@react-three/fiber"; import * as THREE from "three"; const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform float uTime; varying vec2 vUv; void main() { vec2 p = (vUv - 0.5) * 4.0; float r = length(p); float a = atan(p.y, p.x); // Annular disk: no material inside the inner edge. float inner = smoothstep(0.62, 0.76, r); float outer = 1.0 - smoothstep(1.72, 2.0, r); // Several scales of procedural turbulence. float swirl = sin(a * 12.0 - r * 18.0 + uTime * 0.8); float bands = sin(r * 42.0 - a * 3.0 - uTime * 1.2); float noise = 0.65 + 0.2 * swirl + 0.15 * bands; // Brightness concentrates toward the inner disk. float heat = 1.0 - smoothstep(0.7, 1.85, r); float intensity = inner * outer * max(noise, 0.0) * (0.25 + 2.5 * heat); vec3 blue = vec3(0.025, 0.18, 0.65); vec3 cyan = vec3(0.12, 0.75, 1.0); vec3 gold = vec3(1.0, 0.32, 0.055); vec3 white = vec3(1.0, 0.88, 0.62); vec3 color = mix(blue, cyan, heat * 0.5); color = mix(color, gold, pow(heat, 2.0)); color = mix(color, white, pow(heat, 8.0)); gl_FragColor = vec4(color * intensity, intensity); } `; export function AccretionDisk() { const material = useRef<THREE.ShaderMaterial>(null); useFrame(({ clock }) => { if (material.current) { material.current.uniforms.uTime.value = clock.elapsedTime; } }); return ( <mesh rotation={[1.12, 0, 0]} renderOrder={1} > <planeGeometry args={[4.4, 4.4, 1, 1]} /> <shaderMaterial ref={material} vertexShader={vertexShader} fragmentShader={fragmentShader} uniforms={{ uTime: { value: 0 }, }} transparent depthWrite={false} side={THREE.DoubleSide} blending={THREE.AdditiveBlending} toneMapped={false} /> </mesh> ); } This shader is deliberately stylized. It creates a luminous disk, not a physically computed plasma temperature map. Its smooth radial mask, procedural bands, and additive blending should give you a stronger visual foundation than a uniform cloud of dots. One tuning note: r is measured in shader-plane coordinates. The disk dimensions, inner/outer thresholds, sphere radius, and ring radius are related but not identical units. Adjust them together when you change the geometry. 4. Upgrade the particles to GPU-driven orbital motion This is the part that directly upgrades your existing simulation. Instead of updating 40,000 particle positions on the CPU every frame, store each particle's radius, starting angle, and size once. Calculate its position in the vertex shader using elapsed time. DiskParticles.tsx import { useMemo, useRef } from "react"; import { useFrame } from "@react-three/fiber"; import * as THREE from "three"; const vertexShader = ` attribute float aRadius; attribute float aAngle; attribute float aSize; attribute vec3 aColor; uniform float uTime; varying vec3 vColor; varying float vAlpha; void main() { float angularSpeed = 0.42 * pow(aRadius, -1.5); float angle = aAngle + uTime * angularSpeed; vec3 p = vec3( cos(angle) * aRadius, sin(angle) * aRadius, 0.0 ); vec4 mvPosition = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mvPosition; gl_PointSize = clamp( aSize * (260.0 / max(-mvPosition.z, 0.1)), 1.0, 7.0 ); vColor = aColor; vAlpha = 0.72; } `; const fragmentShader = ` varying vec3 vColor; varying float vAlpha; void main() { vec2 p = gl_PointCoord - 0.5; float d = length(p); float alpha = 1.0 - smoothstep(0.05, 0.5, d); if (alpha < 0.01) discard; gl_FragColor = vec4( vColor * 1.35, alpha * vAlpha ); } `; export function DiskParticles({ count = 40000, }: { count?: number; }) { const material = useRef<THREE.ShaderMaterial>(null); const attributes = useMemo(() => { const radius = new Float32Array(count); const angle = new Float32Array(count); const size = new Float32Array(count); const color = new Float32Array(count * 3); const inner = 0.82; const outer = 1.95; for (let i = 0; i < count; i++) { // Uniform sampling over disk area. const u = Math.random(); radius[i] = Math.sqrt( inner * inner + u * (outer * outer - inner * inner) ); angle[i] = Math.random() * Math.PI * 2; size[i] = 1.0 + Math.random() * 2.2; const t = (radius[i] - inner) / (outer - inner); // Hotter inner disk, cooler outer disk. color[i * 3] = THREE.MathUtils.lerp(1.0, 0.08, t); color[i * 3 + 1] = THREE.MathUtils.lerp(0.65, 0.42, t); color[i * 3 + 2] = THREE.MathUtils.lerp(0.24, 1.0, t); } return { radius, angle, size, color }; }, [count]); useFrame(({ clock }) => { if (material.current) { material.current.uniforms.uTime.value = clock.elapsedTime; } }); return ( <points rotation={[1.12, 0, 0]} renderOrder={2}> <bufferGeometry> <bufferAttribute attach="attributes-aRadius" args={[attributes.radius, 1]} /> <bufferAttribute attach="attributes-aAngle" args={[attributes.angle, 1]} /> <bufferAttribute attach="attributes-aSize" args={[attributes.size, 1]} /> <bufferAttribute attach="attributes-aColor" args={[attributes.color, 3]} /> </bufferGeometry> <shaderMaterial ref={material} vertexShader={vertexShader} fragmentShader={fragmentShader} uniforms={{ uTime: { value: 0 } }} transparent depthWrite={false} blending={THREE.AdditiveBlending} toneMapped={false} /> </points> ); } Why this is better The particle positions are calculated on the GPU, reducing per-frame JavaScript work. Inner particles orbit faster than outer particles. The particle distribution has a defined inner and outer radius. Colors vary smoothly from hot inner material to cooler outer material. Soft circular point sprites integrate more naturally with the continuous disk. This still uses a simplified orbital model. It does not calculate relativistic trajectories, and it assumes a thin, flat disk. For a more realistic model, you'll eventually want to account for relativistic orbital behavior and the apparent bending of light. One detail to keep consistent: use the same disk rotation for the particle layer, continuous disk, and any ring that is meant to align with the disk. In the scene code above, set the ring's rotation to [1.12, 0, 0] rather than Math.PI / 2. 5. Add a gravitational-lensing post-processing effect A screen-space shader is a good first approximation. It bends the rendered image around the black hole's projected center, giving you an immediate sense of warped space. Create effects/GravitationalLensing.tsx: import { createEffectComponent, } from "@react-three/postprocessing"; import { Effect } from "postprocessing"; import { Uniform, Vector2, } from "three"; const fragmentShader = ` uniform vec2 center; uniform float radius; uniform float strength; void mainUv(inout vec2 uv) { // Correct for the screen aspect ratio. vec2 p = vec2( (uv.x - center.x) * resolution.x / resolution.y, uv.y - center.y ); float r = length(p); // Limit the effect to the area around the hole. float falloff = 1.0 - smoothstep(0.0, radius, r); // Artistic radial lensing approximation. float bend = strength * falloff / max(r, 0.08); p += normalize(p) * bend; uv = center + vec2( p.x * resolution.y / resolution.x, p.y ); } `; class LensingEffect extends Effect { constructor({ center = [0.5, 0.5], radius = 0.23, strength = 0.002, }: { center?: [number, number]; radius?: number; strength?: number; } = {}) { super("GravitationalLensing", fragmentShader, { uniforms: new Map([ ["center", new Uniform(new Vector2(...center))], ["radius", new Uniform(radius)], ["strength", new Uniform(strength)], ]), }); } } export const GravitationalLensing = createEffectComponent(LensingEffect); This follows the custom-effect pattern supported by React Postprocessing: define an Effect, expose its uniforms, and wrap it as a React component. React Postprocessing +1 How to tune it Lensing strength Subtle → dramatic Start at 0.002. Raise it gradually and watch for excessive stretching. Influence radius Start at 0.23 in aspect-corrected screen coordinates. A larger value affects more of the image. Important limitation This effect warps the entire rendered image, including foreground particles and the black-hole silhouette. It is a cinematic distortion, not a physical ray tracer. Use it as a prototype; for convincing lensing, the next step is to render the disk and background into separate layers or trace rays through a black-hole spacetime. For a proper relativistic renderer, you would trace camera rays backward through the gravitational field, integrate their paths, and sample the disk or background where the rays terminate. A Schwarzschild model is a reasonable starting point for a non-rotating black hole; a Kerr model is needed to account for spin. 6. Get the cinematic lighting right Bloom is what lets bright pixels spread light into neighboring pixels, creating the luminous halo. It works best when your disk has genuine bright regions, rather than when everything is equally bright. React Postprocessing provides a Bloom effect that can be combined with other effects in the composer. GitHub +1 Start with these settings: Setting Starting value Bloom intensity 1.15 Luminance threshold 0.65 Luminance smoothing 0.25 Device pixel ratio 1–1.5 Particle count 40,000 Vignette darkness 0.7 Treat these as starting points. The final result depends on the renderer's color space, tone mapping, and the brightness of your shader output. Three adjustments will matter most: If the center becomes a white blob: reduce bloom intensity or increase the luminance threshold. If the disk looks like neon dots: reduce particle brightness and let the continuous shader carry more of the light. If the scene looks washed out: reduce the overall emission and preserve more nearly black space. Also, make sure your camera is framed around the entire disk rather than just the event horizon. In your original screenshot, the particle field is very wide relative to the central object. A tighter composition will help immediately. 7. Performance and visual debugging Don't optimize only by counting particles. Profile the GPU and rendering passes, particularly at your target resolution. GPU performance Keep particle attributes in typed arrays, avoid rebuilding geometry on each render, and update shader uniforms rather than React state every frame. Transparency and draw order Transparent objects can still render in unexpected orders. Use a consistent disk orientation, depth testing, and render order. Avoid relying on renderOrder alone to make overlapping transparent layers physically correct. Debug one effect at a time Temporarily disable bloom, then lensing, then particles. If the disk looks good without post-processing but bad with it, fix the post-processing rather than changing the particle simulation. 8. Your implementation roadmap Milestone 1 — composition: add the dark sphere, continuous disk, and aligned ring. Get a good static screenshot. Milestone 2 — motion: replace uniform rotation with the GPU orbital shader. Verify that inner particles move faster than outer particles. Milestone 3 — lighting: tune emission and bloom until the inner disk glows without losing detail. Milestone 4 — lensing: add the screen-space approximation, then replace it with a more physical method if needed. Milestone 5 — polish: tune the camera, color grading, and background. Check performance at your target screen resolution. My recommendation: implement Milestone 1 first and don't touch the particle count until the static composition looks compelling. A beautifully shaped, well-lit disk with 5,000 carefully designed particles will often look more convincing than a uniform cloud of 100,000 particles. One final technical distinction: the example shaders are a concrete artistic prototype, not a complete drop-in relativistic simulation. The screen-space lensing effect, disk temperature colors, and orbital equations are approximations. Once the composition is right, a ray-traced lensing model is the upgrade that will take the simulation from a beautiful space effect toward a convincing black-hole visualization." take these into consideration. don't follow blindly. take decision as a senior lazy dev. getting what done in the shortest most optimized path.