Three.js Starfield Warp — WebGL Hyperspace Point Field Effect

<canvas id="warpCanvas"></canvas>
<button id="warpBtn" class="warp-btn">Hold for warp speed</button>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
#warpCanvas{display:block;width:100%;height:100%}
.warp-btn{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);padding:11px 22px;border-radius:999px;border:1px solid rgba(147,197,253,0.4);background:rgba(10,14,30,0.65);color:#dbeafe;font:13px system-ui,sans-serif;font-weight:600;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,transform .15s;-webkit-user-select:none;user-select:none}
.warp-btn:hover{background:rgba(30,58,138,0.5)}
.warp-btn:active,.warp-btn.active{transform:translateX(-50%) scale(0.96);background:rgba(59,130,246,0.55)}

const canvas = document.getElementById('warpCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 60);
camera.position.z = 1;

// Stars are stored as individual { x, y, z } records rather than only in the
// BufferGeometry, so each star's Z can be reset independently every frame
// without recreating any geometry.
const STAR_COUNT = 2600;
const FIELD = 24;
const stars = [];
const positions = new Float32Array(STAR_COUNT * 3);

function resetStar(i, freshField) {
  stars[i] = {
    x: (Math.random() - 0.5) * FIELD,
    y: (Math.random() - 0.5) * FIELD,
    z: freshField ? Math.random() * FIELD : FIELD,
  };
}
for (let i = 0; i < STAR_COUNT; i++) resetStar(i, true);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({ color: 0xdbeafe, size: 0.045, transparent: true, opacity: 0.9, sizeAttenuation: true });
const points = new THREE.Points(geometry, material);
scene.add(points);

const posAttr = geometry.getAttribute('position');

let warp = false;
const btn = document.getElementById('warpBtn');
function setWarp(on) { warp = on; btn.classList.toggle('active', on); btn.textContent = on ? 'Warp speed!' : 'Hold for warp speed'; }
btn.addEventListener('pointerdown', () => setWarp(true));
btn.addEventListener('pointerup', () => setWarp(false));
btn.addEventListener('pointerleave', () => setWarp(false));
btn.addEventListener('touchstart', e => { e.preventDefault(); setWarp(true); }, { passive: false });
btn.addEventListener('touchend', () => setWarp(false));

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);

  const speed = warp ? 0.9 : 0.05;
  for (let i = 0; i < STAR_COUNT; i++) {
    const s = stars[i];
    s.z -= speed;
    if (s.z <= 0.1) resetStar(i, false);

    // Perspective-divide the star's X/Y by its remaining Z so stars near the
    // camera appear to fly outward toward the screen edges — the classic
    // "hyperspace" effect — rather than just moving in a straight line.
    const k = FIELD / s.z;
    positions[i * 3]     = s.x * k * 0.06;
    positions[i * 3 + 1] = s.y * k * 0.06;
    positions[i * 3 + 2] = -s.z + FIELD * 0.5;
  }
  posAttr.needsUpdate = true;

  material.size = warp ? 0.09 : 0.045;
  camera.fov = warp ? 92 : 75;
  camera.updateProjectionMatrix();

  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();