Loading your workspace...
Take a deep dive into the math, shaders, and WebGL architecture behind building an interactive Keplerian solar system portfolio. Learn how we combined orbital mechanics, Three.js, and custom GLSL shaders to turn developer projects into planets.
Why settle for a flat grid of project cards when your portfolio can be an entire planetary system? Inspired by hard sci-fi telemetry interfaces and space exploration simulators, we set out to build an interactive 3D Solar System Portfolio in WebGL—where every planet represents a core project, moons act as tech-stack tags, and the camera flies smoothly between orbits.
Instead of faking planet movement with simple circular rotations, we implemented real Keplerian orbital mechanics, custom atmospheric GLSL shaders, and instanced asteroid belts—all running at a locked 60 FPS in the browser.
Here is the technical breakdown of how we brought astrophysics to the web using Three.js.
In many basic 3D scenes, objects orbit a centre point using a simple Math.sin(time) and Math.cos(time) loop at a constant radius. Real planetary systems, however, follow Kepler’s Laws of Planetary Motion: orbits are ellipses with the central star at one focus, and planets sweep out equal areas in equal times (moving faster at perihelion and slower at aphelion).
Each project-planet is configured with key orbital parameters: semi-major axis ($a$), eccentricity ($e$), inclination ($i$), and mean anomaly ($M$). On every frame, we solve Kepler’s Equation ($M = E - e \sin E$) using a quick Newton-Raphson iteration to find the Eccentric Anomaly ($E$), and then map it to 3D Cartesian coordinates:
function getKeplerianPosition(a, e, inclination, meanAnomaly) {
// Solve M = E - e * sin(E) via 4 Newton-Raphson iterations
let E = meanAnomaly;
for (let i = 0; i < 4; i++) {
E = E - (E - e * Math.sin(E) - meanAnomaly) / (1 - e * Math.cos(E));
}
// 2D orbital plane coordinates
const xOrbit = a * (Math.cos(E) - e);
const zOrbit = a * Math.sqrt(1 - e * e) * Math.sin(E);
// Apply orbital inclination (tilt)
const y = zOrbit * Math.sin(inclination);
const z = zOrbit * Math.cos(inclination);
return { x: xOrbit, y, z };
}
This subtle mathematical accuracy gives the solar system an organic, cinematic rhythm that uniform circular loops simply cannot match.
Loading six or seven 4K PBR texture sets for different planets would immediately blow up our initial page load budget. To keep the scene lightweight, we combined ultra-compressed KTX2 surface maps with custom GLSL atmospheric shaders.
To give terrestrial planets a realistic sci-fi atmosphere, we wrapped a slightly larger sphere (scale: 1.04) around each planet mesh and applied a custom Fresnel fragment shader using additive blending:
// Atmospheric Rim Glow Fragment Shader
varying vec3 vNormal;
varying vec3 vViewPosition;
uniform vec3 uAtmosphereColor;
void main() {
vec3 viewDir = normalize(vViewPosition);
float fresnel = pow(1.0 - abs(dot(vNormal, viewDir)), 3.0);
gl_FragColor = vec4(uAtmosphereColor, fresnel * 0.85);
}
This single shader creates a crisp halo around the edges of each planet that reacts dynamically as the camera orbits around it—using zero extra texture memory.
Navigating a 3D space with free-flight controls often leaves visitors disoriented. To keep the UX intuitive for recruiters and engineers alike, we built a Guided Telemetry Camera System:
THREE.LineLoop) and HTML HUD labels anchored to each planet via 3D-to-2D screen projection.OrbitControls target to track the moving planet in real time.0.05x, making it effortless to click and read details without chasing a fast-moving target.No solar system is complete without a dense starfield and a rocky asteroid belt separating the inner and outer portfolios.
THREE.InstancedMesh to render 3,500 low-poly rock meshes in a single draw call. Instead of updating 3,500 matrices on the CPU every frame, we passed the orbital speed and radius as instance attributes and computed the rotation directly inside the vertex shader.UnrealBloomPass at high resolution can tank performance on integrated GPUs. We used layer-based selective bloom at half-resolution so only the central star, engine thrusters, and orbital trajectory lines glow, keeping the HUD text razor-sharp.© 2026 PROFILIX LABS INC. ALL RIGHTS RESERVED.
•PRECISION WORKSPACE • CRAFTED FOR BUILDERS