How do I compute the Kerr black hole Schwarzschild radius and photon ring in GLSL?

To compute Kerr black hole geometry in GLSL: (1) Schwarzschild radius for a Kerr black hole with spin parameter a: float rs = 1.0 + sqrt(1.0 - spin * spin). For a = 0.998 (extreme Kerr), rs ≈ 1.063, smaller than the Schwarzschild non-spinning value of 2.0. (2) Event horizon check: if (r < rs * 1.2 && abs(z) < rs) — ray absorbed, set color to black and break. (3) Photon sphere (ring) at 1.5x Schwarzschild radius: float photon = 1.5 * rs; float photonDist = abs(r - photon); if (photonDist < 0.3) { float glow = exp(-photonDist * 15.0); col += vec3(1.0, 0.9, 0.6) * glow * 1.5; }. The exponential falloff creates the characteristic bright ring seen around real black holes.

How do I create an accretion disk with Doppler beaming in a GLSL shader?

To create an accretion disk with Doppler beaming in GLSL: (1) Check if the ray is in the disk region: r > diskInner && r < diskOuter && abs(z) < diskHeight + 0.1 * r. (2) Compute Doppler factor from the disk's rotation direction: float doppler = dot(vec2(0.3, 0.0), normalize(p.xy)) * 0.5 + 0.5; doppler = mix(0.4, 2.5, doppler). This brightens material moving toward the observer and dims material moving away. (3) Compute density: float density = exp(-abs(z) / diskHeight) * (diskOuter / r). Exponential falloff with height, increasing density toward center. (4) Map temperature to color based on orbital radius (hotter = inner). (5) Accumulate: col += diskColor * density * 0.06. The small factor 0.06 prevents the disk from completely overexposing.

How do I add relativistic jets to a Three.js black hole simulation?

To add relativistic polar jets in a GLSL fragment shader: (1) In the raymarching loop, compute the horizontal distance from the jet axis: float jetDist = length(p.xy). (2) Create a conical beam using smoothstep: float jet = smoothstep(0.2, 0.0, jetDist) * smoothstep(10.0, 0.0, abs(z)). The first smoothstep creates a narrow cone around the polar axis (tight when jetDist 10.0. (3) Add to color: if (jet > 0.01) { col += vec3(0.3, 0.6, 1.0) * jet * 2.0; }. The blue-white color (0.3, 0.6, 1.0) represents the synchrotron radiation of charged particles accelerated along the magnetic field lines.

How do I create orbiting particles around a black hole in Three.js?

To create Keplerian orbiting particles in Three.js: (1) Create BufferGeometry with position and velocity attributes. (2) Initialize each particle at a random radius (3 to 18 units): const radius = 3 + Math.random() * 15; const angle = Math.random() * Math.PI * 2. (3) Set Keplerian orbital velocity: const speed = 0.3 / Math.sqrt(radius) — this matches v ∝ 1/√r for circular orbits. (4) Set velocity perpendicular to radius: vx = -Math.sin(angle) * speed; vz = Math.cos(angle) * speed. (5) Each frame, update positions: pos[i*3] += vel[i*3] * 0.01. (6) Recycle particles that fall inside r 20 to a new random orbit. (7) Set particles.geometry.attributes.position.needsUpdate = true. Use AdditiveBlending and depthWrite:false for glowing trail effect.

How do I implement temperature-based color mapping for an accretion disk in GLSL?

To implement temperature-color mapping in GLSL for an accretion disk: (1) Compute temperature proxy from orbital radius: float temp = 1.0 / (r + 0.3). Inner orbits are hotter (higher temp). (2) Define color scale: vec3 hot = vec3(1.0, 0.9, 0.7); vec3 warm = vec3(1.0, 0.5, 0.2); vec3 cool = vec3(0.3, 0.5, 1.0). (3) Mix: vec3 color = mix(mix(cool, warm, temp * 2.0), hot, pow(temp, 2.5)). The pow(temp, 2.5) concentrates the hot color at the innermost radii. (4) Apply brightness with Doppler and turbulence: float brightness = pow(doppler, 1.5) * (1.0 + 0.3 * sin(phi * 8.0 + time * 2.0)). The sin term adds rotational turbulence patterns in the disk.

How do I set up Three.js ShaderMaterial with uniforms for a real-time simulation?

To set up a Three.js ShaderMaterial with uniforms: (1) Define the shader object with uniforms, vertexShader, and fragmentShader strings. (2) Uniforms: { time: { value: 0 }, spin: { value: 0.998 }, resolution: { value: new THREE.Vector2(innerWidth, innerHeight) } }. (3) Vertex shader must pass vUv to fragment: varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }. (4) Create material: const mat = new THREE.ShaderMaterial(shaderObject). (5) Attach to PlaneGeometry. (6) Update time each frame: shader.uniforms.time.value = clock.getElapsedTime(). (7) Update resolution on resize: shader.uniforms.resolution.value.set(innerWidth, innerHeight). Uniforms are the communication bridge between JavaScript and GLSL.

Free Kerr Black Hole Simulation HTML JavaScript Three.js 2025 | Real GR Raymarching GLSL Accretion Disk Relativistic Jets

Q: How do I create a black hole simulation in JavaScript Three.js?

To create a black hole simulation in Three.js JavaScript: (1) Set up a Three.js scene with a PerspectiveCamera and WebGLRenderer. (2) Create a fullscreen PlaneGeometry(2,2) with a ShaderMaterial whose fragment shader does the raymarching. (3) In the GLSL fragment shader, convert UV coordinates to a ray direction vector. (4) March the ray through 3D space in a loop (~120 steps). (5) At each step, check if the ray hits the event horizon (r < Schwarzschild radius), the accretion disk (diskInner < r < diskOuter, small |z|), or the jet region. (6) Accumulate color contributions from each region. (7) Pass a time uniform for animation. (8) Add OrbitControls for camera rotation and zoom. The Coodeverse Kerr Black Hole demo is a complete free Three.js raymarching example.

Q: How do I implement GLSL raymarching in a Three.js fragment shader?

To implement GLSL raymarching in a Three.js fragment shader: (1) Convert UV coordinates to ray direction: vec2 uv = (vUv - 0.5) * 2.0; uv.x *= resolution.x / resolution.y; vec3 rayDir = normalize(vec3(uv, -2.0)). (2) Apply camera inclination rotation to rayDir using a 2D rotation matrix on the YZ plane. (3) Set ray origin: vec3 pos = vec3(0.0, 0.0, 25.0). (4) March in a loop: for (int i = 0; i 50.0 (far plane). This technique renders the entire scene in the fragment shader without 3D geometry for the visual effects.

Q: How do I create an accretion disk with Doppler beaming in a GLSL shader?

To create an accretion disk with Doppler beaming in GLSL: (1) Check if the ray is in the disk region: r > diskInner && r < diskOuter && abs(z) < diskHeight + 0.1 * r. (2) Compute Doppler factor from the disk's rotation direction: float doppler = dot(vec2(0.3, 0.0), normalize(p.xy)) * 0.5 + 0.5; doppler = mix(0.4, 2.5, doppler). This brightens material moving toward the observer and dims material moving away. (3) Compute density: float density = exp(-abs(z) / diskHeight) * (diskOuter / r). Exponential falloff with height, increasing density toward center. (4) Map temperature to color based on orbital radius (hotter = inner). (5) Accumulate: col += diskColor * density * 0.06. The small factor 0.06 prevents the disk from completely overexposing.

Q: How do I add relativistic jets to a Three.js black hole simulation?

To add relativistic polar jets in a GLSL fragment shader: (1) In the raymarching loop, compute the horizontal distance from the jet axis: float jetDist = length(p.xy). (2) Create a conical beam using smoothstep: float jet = smoothstep(0.2, 0.0, jetDist) * smoothstep(10.0, 0.0, abs(z)). The first smoothstep creates a narrow cone around the polar axis (tight when jetDist 10.0. (3) Add to color: if (jet > 0.01) { col += vec3(0.3, 0.6, 1.0) * jet * 2.0; }. The blue-white color (0.3, 0.6, 1.0) represents the synchrotron radiation of charged particles accelerated along the magnetic field lines.

Q: How do I use Three.js ES module importmap to load Three.js without npm?

Add a script tag with type importmap in the HTML head containing: { imports: { three: cdn-url, three/addons/: addons-cdn-url } }. Then in a type=module script use: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. No npm install, no bundler, no build step required. Works in all modern browsers. The importmap resolves bare specifiers to full CDN URLs at runtime.

Q: Is the Coodeverse Kerr Black Hole Simulation completely free?

Yes! The Coodeverse Kerr Black Hole Simulation is 100% free — no registration, email, or payment required. Download the full ZIP with HTML, CSS, and JavaScript. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes real GR raymarching fragment shader, Kerr metric a=0.998, accretion disk with Doppler beaming, relativistic jets, photon ring, 10,000-star background, 5,000 orbiting particles, OrbitControls drag/zoom, and window resize handling — all in one pure HTML5 Three.js file with no external assets.

Full Source Code

Three.js + GLSL WebGL loaded via ES module importmap — no npm, no build tools. Teaches GLSL fragment shader raymarching, Kerr metric physics, Doppler beaming, ShaderMaterial uniforms, Keplerian particle orbits, adaptive step sizing, and OrbitControls. The most advanced free astrophysics simulation available as a single HTML file.

HTML

CSS

JavaScript + GLSL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kerr Black Hole Simulation | Real GR Raymarching | Coodeverse</title>
  <style>
    body { margin:0; overflow:hidden; background:#000; font-family:Arial,sans-serif; }
    #info {
      position:absolute; top:10px; left:10px; color:#fff; z-index:100;
      background:rgba(0,0,0,0.7); padding:15px; border-radius:10px;
      backdrop-filter:blur(10px); font-size:14px; max-width:320px;
    }
    #info h2 { margin:0 0 10px; font-size:18px; color:#4fc3f7; }
    #debug { position:absolute; bottom:10px; left:10px; color:#aaa; font-size:11px; }
  </style>
</head>
<body>
  <div id="info">
    <h2>⚫ Kerr Black Hole (a = 0.998)</h2>
    <p>Real GR raymarching · Accretion disk · Jets</p>
    <p>Drag to rotate · Scroll to zoom</p>
  </div>
  <div id="debug">Loading...</div>

  <!-- ES Module ImportMap: loads Three.js from CDN without npm or build tools -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
    }
  }
  </script>

  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    function log(msg) { document.getElementById('debug').textContent = msg; }
    log('Initializing...');

    const scene    = new THREE.Scene();
    const camera   = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000);
    camera.position.set(0, 5, 25);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    renderer.setClearColor(0x000011);
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping  = true;
    controls.dampingFactor  = 0.05;
    controls.minDistance    = 8;
    controls.maxDistance    = 80;

    const starGeo = new THREE.BufferGeometry();
    const starPos = new Float32Array(10000 * 3);
    for (let i = 0; i < 10000; i++) {
      starPos[i*3]   = (Math.random() - 0.5) * 2000;
      starPos[i*3+1] = (Math.random() - 0.5) * 2000;
      starPos[i*3+2] = (Math.random() - 0.5) * 2000;
    }
    starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
    const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color:0xffffff, size:2 }));
    scene.add(stars);

    const bhShader = {
      uniforms: {
        time:        { value: 0 },
        spin:        { value: 0.998 },
        diskInner:   { value: 2.5 },
        diskOuter:   { value: 18.0 },
        diskHeight:  { value: 0.4 },
        inclination: { value: 1.35 },
        resolution:  { value: new THREE.Vector2(innerWidth, innerHeight) }
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        precision mediump float;
        uniform float time;
        uniform float spin;
        uniform float diskInner;
        uniform float diskOuter;
        uniform float diskHeight;
        uniform float inclination;
        uniform vec2  resolution;
        varying vec2  vUv;

        float hash(vec2 p) {
          return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
        }

        vec3 diskColor(float r, float phi, float doppler) {
          float temp = 1.0 / (r + 0.3);
          vec3 hot  = vec3(1.0, 0.9, 0.7);
          vec3 warm = vec3(1.0, 0.5, 0.2);
          vec3 cool = vec3(0.3, 0.5, 1.0);
          float brightness = pow(doppler, 1.5) * (1.0 + 0.3 * sin(phi * 8.0 + time * 2.0));
          vec3 color = mix(mix(cool, warm, temp * 2.0), hot, pow(temp, 2.5));
          return color * brightness * 2.0;
        }

        void main() {
          vec2 uv = (vUv - 0.5) * 2.0;
          uv.x *= resolution.x / resolution.y;
          vec3 rayDir = normalize(vec3(uv, -2.0));

          float ci = cos(inclination), si = sin(inclination);
          rayDir.yz = mat2(ci, -si, si, ci) * rayDir.yz;

          vec3 pos = vec3(0.0, 0.0, 25.0);
          float t  = 0.0;
          vec3 col = vec3(0.0);
          float absorption = 0.0;

          for (int i = 0; i < 120; i++) {
            vec3  p   = pos + rayDir * t;
            float r   = length(p.xy);
            float phi = atan(p.y, p.x);
            float z   = p.z;

            float rs = 1.0 + sqrt(1.0 - spin * spin);

            if (r < rs * 1.2 && abs(z) < rs) { col = vec3(0.0); break; }

            float photonDist = abs(r - 1.5 * rs);
            if (photonDist < 0.3) {
              col += vec3(1.0, 0.9, 0.6) * exp(-photonDist * 15.0) * 1.5;
            }

            if (r > diskInner && r < diskOuter && abs(z) < diskHeight + 0.1 * r) {
              float doppler = dot(vec2(0.3, 0.0), normalize(p.xy)) * 0.5 + 0.5;
              doppler = mix(0.4, 2.5, doppler);
              float density = exp(-abs(z) / diskHeight) * (diskOuter / r);
              col        += diskColor(r, phi + time * 0.3, doppler) * density * 0.06;
              absorption += density * 0.03;
            }

            float jet = smoothstep(0.2, 0.0, length(p.xy)) * smoothstep(10.0, 0.0, abs(z));
            if (jet > 0.01) col += vec3(0.3, 0.6, 1.0) * jet * 2.0;

            t += 0.15 + t * 0.003;
            if (t > 50.0) break;
          }

          float starNoise = pow(hash(fract(vUv * 200.0 + time * 0.1)), 25.0) * 0.5;
          col += vec3(starNoise);
          col  = mix(col, vec3(0.0), absorption * 0.2);
          col  = pow(col, vec3(1.2));
          gl_FragColor = vec4(col, 1.0);
        }
      `
    };

    const blackHole = new THREE.Mesh(
      new THREE.PlaneGeometry(2, 2),
      new THREE.ShaderMaterial(bhShader)
    );
    scene.add(blackHole);
    log('Shader loaded');

    const count    = 5000;
    const pPos     = new Float32Array(count * 3);
    const pVel     = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      const r = 3 + Math.random() * 15;
      const a = Math.random() * Math.PI * 2;
      const spd = 0.3 / Math.sqrt(r);
      pPos[i*3]   = Math.cos(a) * r;
      pPos[i*3+1] = (Math.random() - 0.5) * 0.8;
      pPos[i*3+2] = Math.sin(a) * r;
      pVel[i*3]   = -Math.sin(a) * spd;
      pVel[i*3+2] =  Math.cos(a) * spd;
    }
    const pGeo = new THREE.BufferGeometry();
    pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
    pGeo.setAttribute('velocity', new THREE.BufferAttribute(pVel, 3));
    const particles = new THREE.Points(pGeo, new THREE.PointsMaterial({
      size: 0.05, color: 0xffaa66,
      blending: THREE.AdditiveBlending,
      transparent: true, depthWrite: false
    }));
    scene.add(particles);
    log('Particles added');

    const clock = new THREE.Clock();
    function animate() {
      const t = clock.getElapsedTime();
      bhShader.uniforms.time.value = t;

      const pos = particles.geometry.attributes.position.array;
      const vel = particles.geometry.attributes.velocity.array;
      for (let i = 0; i < count; i++) {
        pos[i*3]   += vel[i*3]   * 0.01;
        pos[i*3+2] += vel[i*3+2] * 0.01;
        const r = Math.sqrt(pos[i*3]**2 + pos[i*3+2]**2);
        if (r < 2 || r > 20) {
          const angle = Math.random() * Math.PI * 2;
          const radius = 8 + Math.random() * 10;
          const spd    = 0.3 / Math.sqrt(radius);
          pos[i*3]   = Math.cos(angle) * radius;
          pos[i*3+1] = (Math.random() - 0.5) * 0.6;
          pos[i*3+2] = Math.sin(angle) * radius;
          vel[i*3]   = -Math.sin(angle) * spd;
          vel[i*3+2] =  Math.cos(angle) * spd;
        }
      }
      particles.geometry.attributes.position.needsUpdate = true;

      stars.rotation.y += 0.0001;
      controls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    log('Ready!');
    animate();

    window.addEventListener('resize', () => {
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
      bhShader.uniforms.resolution.value.set(innerWidth, innerHeight);
    });
  </script>
</body>
</html>

/* Coodeverse – Kerr Black Hole CSS | CC BY 4.0 */

body {
  margin: 0;
  overflow: hidden;
  background: #000;
  font-family: Arial, sans-serif;
}

#info {
  position: absolute;
  top: 10px; left: 10px;
  color: #fff; z-index: 100;
  background: rgba(0,0,0,0.7);
  padding: 15px; border-radius: 10px;
  backdrop-filter: blur(10px);
  font-size: 14px; max-width: 320px;
}
#info h2 { margin: 0 0 10px; font-size: 18px; color: #4fc3f7; }

#debug {
  position: absolute;
  bottom: 10px; left: 10px;
  color: #aaa; font-size: 11px;
}

// Coodeverse – Kerr Black Hole Simulation JS + GLSL | CC BY 4.0 | https://coodeverse.com

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(0, 5, 25);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setClearColor(0x000011);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; controls.dampingFactor = 0.05;
controls.minDistance = 8; controls.maxDistance = 80;

const starPos = new Float32Array(30000);
for (let i = 0; i < 30000; i++) starPos[i] = (Math.random() - 0.5) * 2000;
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color:0xffffff, size:2 }));
scene.add(stars);

const bhShader = {
  uniforms: {
    time:        { value: 0 },
    spin:        { value: 0.998 },
    diskInner:   { value: 2.5 },
    diskOuter:   { value: 18.0 },
    diskHeight:  { value: 0.4 },
    inclination: { value: 1.35 },
    resolution:  { value: new THREE.Vector2(innerWidth, innerHeight) }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }
  `,
  fragmentShader: `
    precision mediump float;
    uniform float time, spin, diskInner, diskOuter, diskHeight, inclination;
    uniform vec2 resolution;
    varying vec2 vUv;

    float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }

    vec3 diskColor(float r, float phi, float doppler) {
      float temp = 1.0 / (r + 0.3);
      vec3 color = mix(mix(vec3(0.3,0.5,1.0), vec3(1.0,0.5,0.2), temp*2.0), vec3(1.0,0.9,0.7), pow(temp,2.5));
      return color * pow(doppler,1.5) * (1.0 + 0.3*sin(phi*8.0+time*2.0)) * 2.0;
    }

    void main() {
      vec2 uv = (vUv - 0.5) * 2.0; uv.x *= resolution.x / resolution.y;
      vec3 rayDir = normalize(vec3(uv, -2.0));
      float ci=cos(inclination), si=sin(inclination);
      rayDir.yz = mat2(ci,-si,si,ci) * rayDir.yz;
      vec3 pos=vec3(0,0,25); float t=0.0; vec3 col=vec3(0); float abs_=0.0;

      for (int i=0; i<120; i++) {
        vec3 p=pos+rayDir*t; float r=length(p.xy); float phi=atan(p.y,p.x);
        float rs = 1.0 + sqrt(1.0 - spin*spin);

        if (r < rs*1.2 && abs(p.z) < rs) { col=vec3(0); break; }

        float pd = abs(r - 1.5*rs);
        if (pd < 0.3) col += vec3(1.0,0.9,0.6) * exp(-pd*15.0) * 1.5;

        if (r>diskInner && r 0.01) col += vec3(0.3,0.6,1.0) * jet * 2.0;

        t += 0.15 + t*0.003;
        if (t > 50.0) break;
      }
      col += vec3(pow(hash(fract(vUv*200.0+time*0.1)), 25.0) * 0.5);
      col = mix(col, vec3(0), abs_*0.2);
      col = pow(col, vec3(1.2));
      gl_FragColor = vec4(col, 1.0);
    }
  `
};
const blackHole = new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.ShaderMaterial(bhShader));
scene.add(blackHole);

const count = 5000;
const pPos = new Float32Array(count*3), pVel = new Float32Array(count*3);
for (let i=0; i20) {
      const a=Math.random()*Math.PI*2, rad=8+Math.random()*10, spd=0.3/Math.sqrt(rad);
      pos[i*3]=Math.cos(a)*rad; pos[i*3+1]=(Math.random()-0.5)*0.6; pos[i*3+2]=Math.sin(a)*rad;
      vel[i*3]=-Math.sin(a)*spd; vel[i*3+2]=Math.cos(a)*spd;
    }
  }
  particles.geometry.attributes.position.needsUpdate = true;
  stars.rotation.y += 0.0001;
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  bhShader.uniforms.resolution.value.set(innerWidth, innerHeight);
});

Frequently Asked Questions

How do I create a black hole simulation in JavaScript Three.js?

Create a Three.js scene with a PerspectiveCamera and WebGLRenderer. Add a fullscreen PlaneGeometry(2,2) with a ShaderMaterial whose GLSL fragment shader performs the raymarching. In the shader, convert UV coordinates to ray direction: vec2 uv = (vUv-0.5)*2.0; vec3 rayDir = normalize(vec3(uv,-2.0)). March the ray in a 120-step loop. At each step check: event horizon (r < rs), photon ring (r ≈ 1.5*rs), accretion disk (diskInner < r < diskOuter), jet region. Pass a time uniform via clock.getElapsedTime() each frame. Add OrbitControls for camera interaction.

How do I implement GLSL raymarching in a Three.js fragment shader?

Convert UV to ray: vec2 uv = (vUv-0.5)*2.0; uv.x *= resolution.x/resolution.y; vec3 rayDir = normalize(vec3(uv,-2.0)). Apply inclination rotation to YZ plane. Set ray origin at vec3(0,0,25). March: for(int i=0;i<120;i++) { vec3 p=pos+rayDir*t; ... t += 0.15+t*0.003; if(t>50.0) break; }. The adaptive step t*0.003 increases step size with distance for performance.

How do I compute the Kerr black hole Schwarzschild radius in GLSL?

For a Kerr black hole with spin parameter a: float rs = 1.0 + sqrt(1.0 - spin * spin). For extreme spin a=0.998, rs ≈ 1.063. Event horizon check: if (r < rs*1.2 && abs(z) < rs) { col=vec3(0.0); break; }. Photon ring at 1.5*rs: float glow = exp(-abs(r-1.5*rs)*15.0); col += vec3(1.0,0.9,0.6)*glow*1.5.

How do I use Three.js ES module importmap without npm?

Add a script tag with type="importmap" in the HTML head:

{ "imports": { "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/" } }

. Then import in a type="module" script: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. No npm install, no bundler, no build step.

How do I create Keplerian orbiting particles in Three.js?

Initialize each particle at radius r: const spd = 0.3 / Math.sqrt(r) — Keplerian velocity decreases with distance. Set perpendicular velocity: vx = -Math.sin(angle)*spd; vz = Math.cos(angle)*spd. Each frame update positions and recycle particles that fall inside r < 2 or exceed r > 20. Set particles.geometry.attributes.position.needsUpdate = true after each update.

Is the Coodeverse Kerr Black Hole Simulation completely free?

Yes! 100% free — no registration or payment needed. Download the full ZIP. Licensed CC BY 4.0 for personal and commercial use. Includes real GR raymarching GLSL shader, Kerr metric a=0.998, accretion disk with Doppler beaming, relativistic jets, photon ring glow, 10,000-star background, 5,000 Keplerian orbiting particles, OrbitControls, window resize handling, and ES module importmap Three.js loading — all in one HTML file, no external assets.

Free Kerr Black Hole Simulation HTML JavaScript Three.js 2025

Three.js & GLSL Techniques Inside

Live Preview

Full Source Code

Frequently Asked Questions

Download your free Kerr black hole simulation today