English | 简体中文 | 日本語 | 한국어

Demo Page https://zjoooooo.github.io/galaxy-explorer/

Latest View

An interactive, procedurally-generated Milky Way galaxy — with a full 3D Solar System, a roaming comet, and real radio-galaxy jets — that runs entirely in the browser with WebGL (three.js). No backend, no build step, no dependencies to install, no API keys — just open the page and explore.

The galaxy itself is generated in code at load time: almost no image assets — the spiral arms, the painted disc, star clusters, distant galaxies and supernovae are all math (the Magellanic Clouds and Centaurus A additionally sample their star positions and colours from three CC BY photo plates). The Solar System layers real NASA-based surface textures on top for the planets, moons and Sun.

Free for any use — personal, commercial, academic and teaching — under the MIT License.

• Painted Milky Way — the disc is an oil painting made on the GPU at load: brush strokes swept along four spiral arms, dark dust lanes on each arm's inner edge, pink star-forming specks, a cream-gold core and a soft rim. ~30,000 stars stay quiet from afar and sparkle as you fly in, where the painting gives way to the stars.
• Galactic bulge — a smooth multi-scale glow core that slowly "breathes".
• Deep-field sky — a twinkling star field plus ~170 tiny distant galaxies (ellipticals, spirals, edge-on disks, irregulars), a rich galaxy cluster, and one large Andromeda-style neighbour — all in just two draw calls.
• Physically-modelled ambient events — occasional shooting stars, meteor showers, and supernovae that follow a real light curve (t².³ rise → rounded peak → two-slope fade) with a four-pointed diffraction-spike flash.
• Interactive beacons — ~30 clickable markers (the Solar System, Sagittarius A*, famous nebulae, clusters, stars and black holes) open detailed five-language info cards with a glowing 3D ring on the selected object. Fly close to an external galaxy and its own in-galaxy objects appear — star-forming regions, globular clusters, supernova remnants, and radio jets, each with its own card. A bottom strip lists all 25 beacons inside the Milky Way, so nothing needs hunting.
• Painted neighbour galaxies — the seven external galaxies are painted the same way, each in the colours telescopes see: Andromeda's cream core and blue-violet ring, Triangulum's pink star-forming knots, the Sombrero's ivory crown and dark brim, M87's warm glow. Ellipticals sit on camera-facing paintings that flatten as you orbit them. The Magellanic Clouds and Centaurus A take their star positions and colours from real ESO/NOIRLab photographs, and their paintings follow those plates; Centaurus A's dust lane is a raymarched absorption slab that reddens at its thin edges. Every star in the external galaxies and along the Milky Way's arms has a hot core inside a coloured halo; in the external galaxies they are also size-capped so close fly-bys stay crisp.
• Radio-galaxy jets — Centaurus A's jet borrows the comet's ion-tail technique: particles stream out of a pulsing nucleus, dense and slow at the core, sparse and rushing at the tip, with drifting magnetic kinks, a dimmed violet counter-stream and an orange crescent plume capping the outflow. M87 keeps its famous one-sided jet, because its counter-jet is Doppler-dimmed into invisibility.
• Solar System guide — follow the Solar System beacon and ride a six-second wormhole into a full 3D Solar System: the Sun, all eight planets, the Moon, Ceres, Pluto and seven more famous moons, wrapped in real NASA-based imagery (4K for the main worlds on desktop, 2K on touch devices) and lit by a single sunlight source at the Sun. Click any world for its illustrated five-language card, then hit Fly to this world to sweep over and ride along with the orbiting planet while its moons appear. A living Sun keeps its drifting granulation and migrating sunspots at every zoom, and up close wears a pearl-white corona ring with prominences that pour out and disperse; a true-span asteroid belt with the Kirkwood gap, a Kuiper belt, faint rings on the giants, and translucent limb atmospheres complete the scene. A comet roams an eccentric orbit, unfurling the classic twin tails — a straight blue ion tail and a curved white dust tail — near the Sun; click it to read how they work, or chase it. Orbital and axial motion are intentionally slowed for observation; display scale and starting positions are arranged for readability, not a literal scale model or real-time ephemeris.
• Constellation sky view — from Earth's card, drop through an atmosphere-white flash into an Earth-centred, rotatable star dome with 25 constellations (the 12 zodiac plus 13 famous others) drawn from real J2000 star positions, and the 7 external galaxies sitting inside their true host constellations — each with its own five-language photo card. Pick a zodiac constellation and its figure blooms overhead in gold: a shimmering wireframe with the constellation's own stars twinkling on top.
• Five languages — labels, cards and navigation switch between English, Simplified Chinese, Traditional Chinese, Japanese and Korean (top-right selector; choice remembered).
• Cinematic look — selective bloom + ACES tone-mapping.
• Performance-aware — an FPS watchdog steps down dust density, resolution and bloom on weak GPUs so it stays smooth on laptops, TVs and kiosks.

• Learning & teaching — a compact, readable, single-file example of WebGL, three.js, GLSL shaders, procedural generation, particle systems and noise (fBm, line-integral convolution). Great for astronomy, computer-graphics and creative-coding classes. Every subsystem is self-contained and commented.
• Backgrounds & screensavers — an ambient galaxy for a landing page hero, a desktop/second-monitor background, or an idle screen.
• Digital signage & installations — lobby screens, museum/planetarium displays, event backdrops. Runs full-screen (press F for cinema mode).
• A starting point — fork it and build your own space visualization, data viz on a galactic canvas, game background, or art project.

No installation. Just get the files and serve them over HTTP (browsers block some features like audio and textures on the file:// protocol).

# 1. get the code
git clone https://github.com/zjoooooo/galaxy-explorer.git
cd galaxy-explorer

# 2. serve it with any static server, e.g.:
python -m http.server 8000
#   or:  npx serve .
#   or:  php -S localhost:8000

# 3. open http://localhost:8000/

Deploy anywhere static: GitHub Pages, Netlify, Vercel, Cloudflare Pages, S3, nginx, or any web host. Just upload the folder — there is nothing to build.

URL parameters

• ?fx=1 — demo mode: forces a shooting star / meteor shower / supernova every 4 s so you can see the ambient effects immediately.

Open index.html and edit the tunables block near the top of the <script>:

var BLOOM = { strength: 0.08, radius: 0.32, threshold: 0.42 }; // glow
var DUST  = { count: 30000, radius: 360, arms: 4, tight: 0.85, brightness: 0.5, ... };
var GALAXY_SPIN = 0.013; // rotation speed (radians/sec)

• DUST.count — total star/dust budget (lower it for weaker hardware).
• DUST.arms / DUST.tight — number of spiral arms and how tightly they wind.
• BLOOM.strength — overall glow (0 = off).
• GALAXY_SPIN — how fast the whole galaxy rotates.

Three ambient tracks ship in audio/ and autoplay on load (with a first-gesture fallback for browsers that block autoplay). Use the speaker button (bottom-right) or press M to mute / unmute; hover it to pick a track by name. Tracks loop.

To change the music, drop your own .mp3 files in audio/ and list their file names in MUSIC_TRACKS inside index.html:

var MUSIC_TRACKS = ['ambient 1.mp3', 'ambient 2.mp3'];

Leave MUSIC_TRACKS empty to hide the speaker button entirely. Please don't commit copyrighted audio you don't have the rights to share.

Vanilla JavaScript + three.js r128 (vendored under vendor/). One self-contained index.html. The galaxy is built once at load:

1. Dust points are scattered on density-wave spiral arms (a Points cloud).
2. A fragment shader paints the disc once into a texture (noise smeared along the spiral flow by line-integral convolution); the disc fades out up close.
3. Sprite glows form the bulge; a twinkling far-sphere is the background sky.
4. A procedural texture atlas + billboarded quad batch draws the distant galaxies.
5. Post-processing: UnrealBloomPass for glow, then an ACES tone-map pass.

Ambient effects (meteors, supernovae) are short-lived objects that spawn on a schedule and dispose themselves — zero steady per-frame cost when idle.

The Solar System is a second scene, entered through the wormhole transition. Its planets are lit by a single point light at the Sun and textured with bundled NASA / Solar System Scope maps (loaded on first entry). Comets, jets, prominences and tails are particle systems written into preallocated buffers each frame.

Contributions, forks and ideas are very welcome! This is a friendly project meant to be learned from and built on.

• Found a bug or have an idea? Open an issue.
• Want to add something? Fork the repo, make your change, and open a pull request. Some ideas: new ambient effects, more galaxy morphologies, a settings panel, VR/mobile support, colour themes, or performance improvements.
• Keep it dependency-free and single-file where you can — that's what makes it easy to learn from and drop into any project.
• Test your change by serving the folder and opening it in a browser; there is no build or test suite to run.

By contributing you agree that your contributions are licensed under the MIT License.

MIT — free for any use, including commercial and educational. Attribution is appreciated but not required.

three.js and its example modules (bundled under vendor/) are © the three.js authors, also under the MIT License. The bundled astronomy photography and the background music (from Pixabay) carry their own licences — see THIRD-PARTY-NOTICES.md.