Three.jsGLSLGameIncrementalBrowser GameSpaceIndie

STELLAR EPOCH: APHELION — A Free Browser Space Incremental Game

Sloth255
Sloth255
·5 min read·915 words

STELLAR EPOCH: APHELION — A Free Browser Space Incremental Game

Genre: Space / Incremental Game
Platform: Browser (Mobile & PC)
Price: Free — no account required
URL: https://stellar-epoch.sloth255.com/


Game Overview

STELLAR EPOCH: APHELION is a space-themed incremental game that runs entirely in your browser. No app to install, no subscription, no paywall. Whether you're on a smartphone or a desktop, all you need is a browser to start playing right away.

The title Aphelion refers to the point in a planet's orbit where it is farthest from the Sun — an astronomical term that captures the vast, romantic scale of the game's universe.


Features

🌠 A Universe That Evolves with Events and Conditions

The state of the universe shifts dynamically based on in-game conditions and events. Depending on how your playthrough unfolds, you'll encounter different cosmic scenery and situations.

🏁 A Real Ending

This isn't just a numbers game. STELLAR EPOCH: APHELION has a proper conclusion waiting for you. Every upgrade and resource you accumulate brings you closer to a meaningful goal, giving you genuine satisfaction when you reach it.

📱 Works on Mobile and PC

The game is optimized for both smartphones and desktop browsers. Play wherever you're comfortable — your progress is always one tab away.

🌍 Multilingual Support

The game supports multiple languages, so players from around the world can enjoy it in their native tongue. It's a game built for a global audience.

🪐 3D Space Rendered with Three.js

The universe is brought to life using Three.js, a JavaScript 3D library. The cosmos is rendered in real time directly in your browser, drawing players into a deeply immersive world.


What Is an Incremental Game?

Incremental games (also called idle games or clicker games) are a genre where you gradually accumulate resources, unlock upgrades, and expand the scale of your operation step by step. The appeal lies in the sense of achievement that comes from small, steady progress adding up to something huge — and in being able to play at your own pace.


Who Is This For?

  • People looking for a quick game they can jump into without any installs
  • Fans of space and sci-fi settings
  • Fans of incremental / idle games
  • Players who enjoy games with a story and a real ending
  • Anyone who wants to play casually on mobile or PC
  • Players who prefer to play in a language other than Japanese

How to Play

Just open your browser and go to https://stellar-epoch.sloth255.com/ — that's it!


Technical Highlights

Overall Architecture

Technology Purpose
React + TypeScript Entire UI
Zustand Game state management
Vite Build tool
Firebase Analytics
AWS S3 + CloudFront Hosting

Game loop: The tick() function in the Zustand store is called at regular intervals from a useGameLoop hook, handling energy production, facilities, and encounter spawning in a single pass. State is persisted to localStorage.


3D Rendering with Three.js / React Three Fiber

All 3D rendering is centralized in SpaceScene.tsx. Key technical points are outlined below.

1. Custom GLSL Shaders (Sun, Atmosphere, Accretion Disk)

  • Sun shader: The fragment shader uses the dot product of the surface normal and camera direction to generate a corona glow effect. The time uniform is updated every frame to create a pulse animation. When a flare triggers, flareIntensity is smoothly transitioned using lerp().
  • Atmosphere shader: Using the same normal dot-product technique, a planetary atmosphere that only colors the rim (Fresnel-like effect) is rendered via BackSide rendering.
  • Black hole accretion disk: A turbulence pattern built from multiple overlapping sine waves creates a gradient that glows white-hot at the center and fades to dark red at the edges. The RingGeometry UVs are manually corrected to map radially as intended.

2. Per-Frame Animation with useFrame

  • Planet and moon orbits: angleRef is incremented each frame, and position.x/z is calculated with trigonometric functions — a lightweight approach that requires no physics simulation.
  • Object references are stored with useRef so positions, rotations, and uniforms can be written directly without triggering React re-renders, keeping performance high.

3. Efficient Rendering of Large Numbers of Objects with InstancedMesh

Matrices from a THREE.Object3D dummy object are copied into the InstancedMesh, reducing all instances to a single draw call.

4. Particle Systems (BufferGeometry)

  • Galaxy spiral: A Float32Array of 5,000 points is pre-generated. Four spiral arms are placed using evenly spaced polar coordinates with random spread, and brightness falloff via exp(-dist/18) creates a natural-looking galaxy that is brightest at the center.
  • Supernova effect: Velocity vectors are embedded in userData, and positions are calculated as elapsed * velocity inside useFrame, causing particles to fly outward in a sphere.
  • Cosmic web: A proximity graph of 200 nodes is rendered as LineSegments, connecting any two nodes within distance 12.

5. Phase-Aware Camera Control

As the game progresses through phases 1–7, the camera's pull-back distance changes, producing a visual scale expansion from a solar system → galaxy → large-scale cosmic structure. A custom easing curve (1 - (1-t)^3) is applied via requestAnimationFrame for smooth transitions.

6. Progressive Texture Loading with Suspense

useTexture from @react-three/drei loads textures asynchronously and is wrapped in React Suspense. While textures are not yet loaded, a shader-only fallback is displayed. A hasTexture uniform is passed to GLSL to dynamically switch between textured and non-textured rendering.

7. Camera Shake

When a Legendary encounter triggers, a simple shake effect is implemented by adding and subtracting a random offset to the camera position on every frame via useThree() for direct camera manipulation.