AeroGlide 3D - Technical Documentation & System Architecture

⚡

1. System Architecture Overview

Zero-Asset-Dependency Procedural Architecture

AeroGlide 3D is built as a single-page, zero-external-binary WebGL flight simulator. Unlike traditional games that require heavy 3D mesh downloads (e.g. 50MB+ .gltf or .fbx models) and audio files (.mp3 / .wav), AeroGlide synthesizes 100% of its world, aircraft geometries, pine trees, water waves, lighting, and sound effects procedurally in real-time.

Three.js (r128)

Simplex Noise (2.4.0)

HTML5 Web Audio API

Vanilla ES6+ JavaScript

Custom GLSL Shaders

Service Worker PWA

Core Technical Principles:

Instant Load Time: Loads in under 150 milliseconds due to zero asset fetch overhead.
Infinite Terrain Chunking: Uses origin-rebasing to keep camera floating-point calculations centered around $(0,0,0)$, preventing WebGL rendering jitter.
60 FPS Performance Target: Uses GPU instanced rendering for 5,000+ trees in a single draw call.

⛰️

2. Procedural Terrain & Erosion Engine

Class: ProceduralTerrain (index.html)

The terrain system generates realistic mountain ranges, river valleys, and coastal biomes using Domain-Warped Fractal Brownian Motion (FBM) via Simplex Noise.

Domain Warping Formula:
warpX = Noise2D(x · 0.0007, z · 0.0007) · 160.0
warpZ = Noise2D(x · 0.0007 + 5.2, z · 0.0007 + 1.3) · 160.0

Elevation = Noise2D(nx, nz) + 0.45 · Noise2D(2.3 nx, 2.3 nz) + 0.18 · Noise2D(5.1 nx, 5.1 nz) + 0.05 · Noise2D(11.2 nx, 11.2 nz)
Height = (Elevation > 0) ? (Elevation^2.1 · 270.0 - 12.0) : (Elevation · 25.0 - 12.0)

Vertex Color Biome Shading:

Each terrain vertex color is calculated dynamically based on height ($h$) and slope normal angle ($y$-component of slope vector):

Beach & Coastal Sand ($h < 5\text{ ft}$): Sand warm tone (#d9c298).
Alpine Forest ($5 < h < 85\text{ ft}$): Natural Pine Green (#355e3b).
Granite Slate Rock ($85 < h < 155\text{ ft}$): Slate Gray (#6b635b).
Glacial Snow Peaks ($h > 155\text{ ft}$): Glacial White (#f0f4f8).
Cliff Slope Override: Steep slope faces ($\text{NormY} < 0.65$) force granite rock texturing regardless of elevation.

getHeight(x, z) Implementation
getHeight(x, z) {
let sx = x + this.seedX;
let sz = z + this.seedZ;
// 1. Calculate domain distortion
let warpX = this.simplex.noise2D(sx * 0.0007, sz * 0.0007) * 160.0;
let warpZ = this.simplex.noise2D(sx * 0.0007 + 5.2, sz * 0.0007 + 1.3) * 160.0;
let nx = (sx + warpX) * 0.0009;
let nz = (sz + warpZ) * 0.0009;
// 2. Multi-octave FBM elevation compounding
let n1 = this.simplex.noise2D(nx, nz);
let n2 = this.simplex.noise2D(nx * 2.3, nz * 2.3) * 0.45;
let n3 = this.simplex.noise2D(nx * 5.1, nz * 5.1) * 0.18;
let n4 = this.simplex.noise2D(nx * 11.2, nz * 11.2) * 0.05;
let elevation = n1 + n2 + n3 + n4;
return (elevation > 0) ? Math.pow(elevation, 2.1) * 270.0 - 12.0 : elevation * 25.0 - 12.0;

          }
        

🌲

3. Vegetation & Forest Instancing Pipeline

Class: VegetationSystem (THREE.InstancedMesh)

To maintain 60 FPS while rendering over 5,000 pine trees across the mountainous landscape, AeroGlide uses THREE.InstancedMesh. This technique packages thousands of tree transformations (position, rotation, scale matrices) into a single GPU draw call.

Property	Specification
Instance Count	5,200 Active Trees
Draw Call Overhead	1 Single Draw Call for entire forest
Placement Filtering	Elevation: $5\text{ft} < h < 140\text{ft}$, Slope $< 45^\circ$
Procedural Mesh Geometry	ConeGeometry (Foliage tiers) + CylinderGeometry (Trunk)

As the airplane flies across the world, the vegetation system dynamically repositions out-of-bounds trees ahead of the aircraft vector using modular grid wrapping.

🌅

4. Atmospheric Shaders, Lighting & Themes

Themes: Sunset, Aurora, Rain Dawn, Vaporwave

The visual atmosphere is driven by custom GLSL shaders, procedural volumetric cloud clusters, dynamic fog scattering, and a Sun optical lens-flare system.

Supported Environment Themes:

Sunset (Default): Warm golden hour sunlight ($5^\circ$ sun angle), deep orange fog horizon, pine green terrain biomes.
Aurora Night: Celestial night sky with emerald aurora borealis emission lighting and turquoise snow caps.
Rain Dawn: Atmospheric overcast fog with simulated falling rain particle streams and Web Audio rainfall sound backdrop.
Vaporwave: Retrowave synthwave aesthetic with magenta sky gradients and neon peak glows.

Sun Lens Flare Optics:

The sun lens flare overlay is computed in real-time by projecting the 3D Sun position to 2D screen space:

Sun Optical Dot-Product Calculation
const sunDir = new THREE.Vector3().subVectors(sunMesh.position, camera.position).normalize();
const camDir = new THREE.Vector3();

          camera.getWorldDirection(camDir);
const sunDot = camDir.dot(sunDir); // 1.0 when facing Sun directly
if (sunDot > 0.6) {

            glareOverlay.style.opacity = Math.pow((sunDot - 0.6) / 0.4, 2.0);

          }
        

✈️

5. 6-DOF Aerodynamic Flight Physics Engine

Calculations per frame in updatePhysics()

AeroGlide implements a realistic 6-Degree-of-Freedom (6-DOF) aerodynamic physics model governing aircraft forces:

Aerodynamic Forces:
F_Thrust = ThrottlePct · MaxThrust
F_Lift = ½ · ρ · v² · S · C_L(α)
F_Drag = ½ · ρ · v² · S · (C_D0 + k · C_L²)
F_Gravity = m · g

Aircraft Model	Top Speed	Handling Characteristic	Acoustic Profile
AeroGlide Jet	380 KTS	Balanced aerobatic precision	Cockpit jet thrum
Falcon Stealth	720 KTS	High-speed interceptor	Sub-bass afterburner roar
Vintage Biplane	160 KTS	High lift, gentle bank turns	Radial engine putt-putt pulse
Vapor StarWing	520 KTS	Zero-g futuristic anti-gravity	Synth sci-fi drone

Stall & Ceiling Warnings:

Stall Warning: Triggered when airspeed falls below stall speed ($< 35\text{ KTS}$) at high pitch angles ($\alpha > 35^\circ$), forcing loss of lift and nose-down pitch acceleration.
Max Altitude Ceiling: Maximum altitude capped at $5,000\text{ FT MSL}$. Pitching higher activates automatic pitch-level dampening.

🔊

6. Web Audio API Procedural Synthesizer

Class: AudioSynthesizer (index.html)

The sound engine uses the Web Audio API to create authentic aircraft audio without downloading a single MP3 file.

Synthesizer Architecture:

Pink Noise Airflow Generator: Generates velvety natural wind noise using a 7-stage filter algorithm ($b_0$ through $b_6$).
Engine Oscillators & LFO: Dual OscillatorNode (Triangle & Sine waves) modulated by an LFO (Low-Frequency Oscillator) for radial engine pulses.
Afterburner Sub-Bass: 30Hz sub-sine wave oscillator dynamically engaged during full throttle jet flight.
Ear-Fatigue Safeguard: Global Biquad Lowpass filter capped at $4,200\text{Hz}$ to eliminate high-frequency hiss during extended play sessions.

🎛️

7. Glassmorphism HUD & SVG Gauges

DOM Overlay & Pitch Ladder Horizon

The Heads-Up Display (HUD) provides key cockpit metrics in real-time:

Airspeed Indicator (IAS): Dial needle rotating smoothly between 0 and 500 KTS with Mach number display.
Directional Gyro Compass (HDG): 360° magnetic heading needle and directional cardinal text (N, E, S, W).
Altimeter (ALT MSL/AGL): Mean Sea Level altitude gauge and Above Ground Level ($AGL = ALT - TerrainHeight$) calculations.
Artificial Horizon: Central reticle with CSS transform rotation matrix tracking aircraft pitch and bank roll angles.

📲

8. PWA & Offline Service Worker

File: sw.js & site.webmanifest

AeroGlide is a fully compliant Progressive Web App (PWA). It registers a Service Worker (sw.js) that caches core assets on initial load, allowing full offline play when disconnected from the internet.

Key PWA Features:

In-App Installation: Intercepts beforeinstallprompt to show a custom "Install App" button on supported browsers.
Web Manifest: Configured with high-resolution icons (96x96, 192x192, 512x512) and theme color #081018.

Project Technical Documentation