WebGL Planetarium: How We Built an Interactive Star Map
When we set out to build StarGlobe, we wanted to create a planetarium experience that runs entirely in the browser, with no downloads, no plugins, and no heavyweight desktop software. The result is an interactive 3D star map powered by WebGL that renders thousands of stars in real time on any modern device. This article explains the key technologies and design decisions behind the project.
Why WebGL for a Star Map
WebGL (Web Graphics Library) is a JavaScript API that allows web browsers to render 2D and 3D graphics using the device's GPU without requiring plugins. For a star map application, WebGL is ideal because it provides the performance needed to draw thousands of point-like objects simultaneously while allowing smooth rotation, zooming, and interaction at 60 frames per second.
Before WebGL, browser-based star maps were limited to canvas 2D rendering or static images. These approaches struggle with interactivity and scale. A 2D canvas can draw dots, but rotating the celestial sphere, adjusting for observer location and time, and displaying constellation lines all at interactive frame rates demands GPU acceleration. WebGL delivers exactly that capability through hardware-accelerated rendering.
The Celestial Sphere as a 3D Scene
The fundamental concept behind StarGlobe is the celestial sphere. In astronomy, stars are projected onto an imaginary sphere of arbitrary radius centered on the observer. We replicate this by placing the camera at the center of a 3D sphere and rendering stars as points on its inner surface. The user can rotate their view by dragging or by physically moving their phone (using device orientation sensors).
Each star's position is defined by two coordinates: right ascension and declination (the celestial equivalents of longitude and latitude). We convert these celestial coordinates to 3D Cartesian coordinates on the sphere using standard spherical-to-Cartesian formulas. The result is a faithful representation of the sky as seen from any point on Earth at any time.
Star Data: The Hipparcos Catalog
The star positions and brightness values come from the Hipparcos star catalog, produced by the European Space Agency's Hipparcos satellite mission. This catalog provides precise positions, magnitudes, and color indices for over 100,000 stars. For StarGlobe, we use a curated subset of the brightest stars to maintain fast loading times and smooth rendering on mobile devices.
Each star entry includes its right ascension, declination, apparent magnitude, and B-V color index. The magnitude determines how large and bright we render each star point, while the color index lets us assign realistic star colors ranging from blue-white for hot stars to deep orange-red for cool ones. Learn more about this relationship in our article on star colors and temperature.
Rendering Stars with Shaders
WebGL uses programmable shaders written in GLSL (OpenGL Shading Language) to control how each point is drawn. For star rendering, the vertex shader positions each star on the celestial sphere and calculates its apparent size based on magnitude. Brighter stars get larger point sizes, mimicking how our eyes perceive stars of different brightness.
The fragment shader handles the visual appearance of each star point. Rather than drawing simple square dots, we use a radial gradient that creates a soft, circular glow. This simulates the way stars appear to our eyes, with a bright center that fades gradually to the edges. The fragment shader also applies the star's color based on its spectral type, producing the range of whites, blues, yellows, and reds visible in the real sky.
Time and Location Calculations
A star map is only useful if it shows the correct sky for the observer's time and place. StarGlobe uses the device's clock and geolocation to calculate local sidereal time, which determines which part of the celestial sphere faces the observer at any given moment. The calculation involves converting universal time to Greenwich Sidereal Time and then adjusting for the observer's longitude.
The observer's latitude determines how the celestial sphere is tilted relative to the horizon. We apply a rotation matrix to tilt the sphere so that the celestial pole sits at the correct altitude for the user's location. The horizon is then drawn as a plane cutting through the sphere, and stars below the horizon can be dimmed or hidden.
Constellation Lines and Labels
Drawing constellation lines requires connecting specific stars with line segments. We maintain a database of constellation line patterns defined as pairs of star identifiers. These are rendered as thin lines overlaid on the star field. Constellation names and star labels are rendered as text sprites that always face the camera, ensuring readability regardless of viewing angle.
To prevent visual clutter, labels appear and disappear based on zoom level and viewing direction. When zoomed out to see the full sky, only the brightest constellation names are shown. Zooming in progressively reveals more detail, including individual star names and fainter constellation lines.
Planet Positions
Displaying planets requires a different approach from fixed stars. Planet positions change continuously as they orbit the Sun. StarGlobe calculates planetary positions using simplified orbital elements and Kepler's laws of planetary motion. These calculations produce the ecliptic coordinates of each planet, which are then converted to right ascension and declination for display on the celestial sphere.
The accuracy of these calculations is sufficient for visual identification. We compute positions for Mercury, Venus, Mars, Jupiter, Saturn, and the Moon, allowing users to identify planets visible tonight and distinguish them from stars. See our article on the difference between stars and planets for more about how they appear in the sky.
Performance on Mobile Devices
Mobile performance was a primary design constraint. Smartphones have less GPU power and memory than desktop computers, and battery life is a concern for extended stargazing sessions. We optimized the rendering pipeline by using buffer objects to minimize draw calls, keeping the star count manageable, and using efficient data types for coordinates and colors.
The result is an application that runs smoothly at 60 frames per second on most modern smartphones while consuming minimal battery. This makes it practical to hold up your phone and use it as a real-time sky guide, with the display updating continuously as you move and rotate the device.
Open Standards, No Installation
One of StarGlobe's core principles is accessibility. Because it runs entirely in the browser using open web standards (WebGL, JavaScript, HTML5), there is nothing to install. Users simply visit the website and begin exploring the sky immediately. This also means the app works across platforms: Android, iOS, Windows, Mac, and Linux all support WebGL in their modern browsers.
For Android users who prefer a native app experience, StarGlobe is also available on the Google Play Store. But the web version remains fully featured and always up to date, demonstrating the power of modern web technologies for scientific visualization. Compare StarGlobe with other options in our best astronomy apps roundup.
