Apoapsis: visible engine flames + KSP-layout + smoother sim

Engine / SRB / abort motor / radial-booster flame cones: 3-layer cones (white core, orange mid, red outer) with additive blending and no depth test so the glow reads through terrain. Length scales with sqrt(thrust) * 0.08 * throttle, width and length jitter per frame for fire flicker.

Sound: layered sine/triangle oscillators (42/63/98 Hz) + pink noise into lowpass + tanh waveshaper → deep chest-rumble instead of buzzy sawtooth. Volume and cutoff ramp with atmosphere density and throttle; vacuum is muffled (cinematic convention).

Jumpy fix: physics step halved to 10ms (100 Hz) so each 60 fps frame covers ~1-2 ticks evenly. Screen shake threshold raised to >2g + high throttle (was constant at launch). Camera lerp softened 0.15 → 0.08.

Layout: navball moved to bottom-right corner at 170px (was 220px center, covering the rocket base). Throttle returned to left edge. HUD-BR repositioned left of the navball so it no longer collides with SAS panel.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mf4633

Apoapsis.html

@@ -63,18 +63,18 @@
 .hud-tl { top: 44px; left: 8px; min-width: 140px; }
 .hud-tr { top: 44px; right: 8px; text-align: right; min-width: 140px; }
 .hud-bl { bottom: 20px; left: 8px; min-width: 140px; }
-.hud-br { bottom: 20px; right: 8px; text-align: right; min-width: 140px; }
+.hud-br { bottom: 28px; right: 210px; text-align: right; min-width: 140px; }
 .hud b { color: #4090E0; font-size: 0.85em; letter-spacing: 1px; }
 .hud .val { color: #40E090; font-weight: bold; }
 .hud .warn { color: #FFD040; }
 .hud .q-warn { color: #FF6040; font-weight: bold; }
 
-.navball { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 220px; height: 220px; z-index: 10; pointer-events: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #304060, inset 0 0 24px rgba(0,0,0,0.6), 0 6px 24px rgba(0,0,0,0.7); }
-.navball canvas { display: block; width: 220px; height: 220px; }
-.navball::before { content: ''; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2.5px solid #40E090; border-radius: 50%; box-sizing: border-box; z-index: 2; box-shadow: 0 0 4px rgba(64,224,144,0.6); }
-.navball::after { content: ''; position: absolute; top: 50%; left: 50%; width: 90px; height: 2.5px; margin: -1px 0 0 -45px; background: linear-gradient(to right, #40E090 0, #40E090 18%, transparent 18%, transparent 82%, #40E090 82%, #40E090 100%); z-index: 2; box-shadow: 0 0 4px rgba(64,224,144,0.5); }
+.navball { position: absolute; bottom: 22px; right: 22px; width: 170px; height: 170px; z-index: 10; pointer-events: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #304060, inset 0 0 18px rgba(0,0,0,0.5), 0 4px 18px rgba(0,0,0,0.6); }
+.navball canvas { display: block; width: 170px; height: 170px; }
+.navball::before { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #40E090; border-radius: 50%; box-sizing: border-box; z-index: 2; box-shadow: 0 0 3px rgba(64,224,144,0.6); }
+.navball::after { content: ''; position: absolute; top: 50%; left: 50%; width: 70px; height: 2px; margin: -1px 0 0 -35px; background: linear-gradient(to right, #40E090 0, #40E090 18%, transparent 18%, transparent 82%, #40E090 82%, #40E090 100%); z-index: 2; box-shadow: 0 0 3px rgba(64,224,144,0.5); }
 
-.throttle-bar { position: absolute; bottom: 30px; left: calc(50% - 155px); width: 28px; height: 220px; background: rgba(5,10,25,0.7); border: 2px solid #304060; border-radius: 6px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
+.throttle-bar { position: absolute; bottom: 30px; left: 20px; width: 24px; height: 200px; background: rgba(5,10,25,0.7); border: 2px solid #304060; border-radius: 6px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
 .throttle-fill { position: absolute; bottom: 2px; left: 2px; right: 2px; background: linear-gradient(to top, #D06020 0%, #E0A040 40%, #40E080 100%); border-radius: 0 0 4px 4px; transition: height 0.1s; }
 .throttle-bar::before { content: 'THR'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.7em; color: #6090C0; letter-spacing: 2px; font-family: 'Courier New', monospace; font-weight: bold; }
 
@@ -227,7 +227,7 @@ <h3>First mission</h3>
   <div class="hud hud-bl" id="hudBL"></div>
   <div class="hud hud-br" id="hudBR"></div>
   <div class="throttle-bar" id="throttleBar"><div class="throttle-fill" id="throttleFill"></div></div>
-  <div class="navball" id="navball"><canvas id="navballCanvas" width="220" height="220"></canvas></div>
+  <div class="navball" id="navball"><canvas id="navballCanvas" width="170" height="170"></canvas></div>
   <div class="sas-panel" id="sasPanel">
     <h4>SAS</h4>
     <button class="sas-btn active" data-sas="off" onclick="setSAS('off')">OFF<span class="sas-key">0</span></button>
@@ -331,7 +331,7 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
 var timeWarp = 1;
 var lastTime = 0;
 var accumulator = 0;
-var PHYSICS_DT = 0.02;
+var PHYSICS_DT = 0.01;
 var viewMode = 'flight';
 var sasMode = 'off';
 var SAS_KEYS = { '0':'off', '1':'stability', '2':'prograde', '3':'retrograde', '4':'radial-out', '5':'radial-in', '6':'normal', '7':'antinormal', '8':'maneuver', '9':'target' };
@@ -1104,6 +1104,30 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
   if (stageFuel(s.parts, s.currentStage) <= 0.001 && computeThrust(s.parts, s.currentStage, 1).thrust <= 0) doStage(s);
 }
 
+function buildFlameGroup(nominalThrust, radius) {
+  var grp = new THREE.Group();
+  var r = radius * PART_SCALE;
+  // Outer plume (red)
+  var outer = new THREE.Mesh(new THREE.ConeGeometry(r * 1.8, 8, 12, 1, true), new THREE.MeshBasicMaterial({ color: 0xFF5020, transparent: true, opacity: 0.45, blending: THREE.AdditiveBlending, depthWrite: false, depthTest: false, side: THREE.DoubleSide }));
+  outer.rotation.x = Math.PI;
+  outer.position.y = -4;
+  grp.add(outer);
+  // Mid plume (orange)
+  var mid = new THREE.Mesh(new THREE.ConeGeometry(r * 1.25, 6, 12, 1, true), new THREE.MeshBasicMaterial({ color: 0xFFAA30, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending, depthWrite: false, depthTest: false, side: THREE.DoubleSide }));
+  mid.rotation.x = Math.PI;
+  mid.position.y = -3;
+  grp.add(mid);
+  // Inner core (white-yellow)
+  var inner = new THREE.Mesh(new THREE.ConeGeometry(r * 0.85, 4, 10, 1, true), new THREE.MeshBasicMaterial({ color: 0xFFFFC0, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false, depthTest: false, side: THREE.DoubleSide }));
+  inner.rotation.x = Math.PI;
+  inner.position.y = -2;
+  grp.add(inner);
+  // Flame length scales linearly with thrust magnitude
+  grp.userData = { isFlame: true, nominalThrust: nominalThrust, baseLen: Math.max(0.6, Math.sqrt(nominalThrust) * 0.08) };
+  grp.visible = false;
+  return grp;
+}
+
 /* ===== 3D ROCKET MESH ===== */
 function buildRocketMeshes(parts) {
   while (rocketGroup.children.length > 0) {
@@ -1123,18 +1147,23 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
       var N = def.radial;
       var boosterR = def.w/2 * PART_SCALE;
       var offset = STACK_R + boosterR * 1.15;
+      var perUnitThrust = def.thrust / N;
       for (var j = 0; j < N; j++) {
         var ang = (j / N) * Math.PI * 2;
         var bm = new THREE.Mesh(new THREE.CylinderGeometry(boosterR, boosterR, h, 8), new THREE.MeshPhongMaterial({ color: def.color }));
         bm.position.set(offset * Math.cos(ang), y + h / 2, offset * Math.sin(ang));
         rocketGroup.add(bm);
-        // Tiny nozzle cone
         var noz = new THREE.Mesh(new THREE.ConeGeometry(boosterR * 0.8, boosterR, 8), new THREE.MeshPhongMaterial({ color: 0x303030 }));
-        noz.rotation.x = Math.PI; // cone apex down
+        noz.rotation.x = Math.PI;
         noz.position.set(offset * Math.cos(ang), y - boosterR * 0.5, offset * Math.sin(ang));
         rocketGroup.add(noz);
+        var flame = buildFlameGroup(perUnitThrust, def.w/2);
+        flame.position.set(offset * Math.cos(ang), y - boosterR, offset * Math.sin(ang));
+        flame.userData.stage = parts[i].stage;
+        flame.userData.partIdx = i;
+        rocketGroup.add(flame);
       }
-      continue; // radials don't advance y
+      continue;
     }
     if (def.type === 'leg') {
       var legLen = def.h * PART_SCALE;
@@ -1155,23 +1184,26 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
       continue;
     }
     if (def.type === 'abort') {
-      // Central tapered spire
       var spireH = h, spireR = def.w/2 * PART_SCALE;
       var spire = new THREE.Mesh(new THREE.CylinderGeometry(spireR*0.2, spireR*0.9, spireH*0.55, 8), new THREE.MeshPhongMaterial({ color: def.color }));
       spire.position.y = y + spireH * 0.725;
       rocketGroup.add(spire);
-      // Thruster block at base
-      var base = new THREE.Mesh(new THREE.CylinderGeometry(spireR*0.95, spireR*1.05, spireH*0.35, 8), new THREE.MeshPhongMaterial({ color: 0x803030 }));
-      base.position.y = y + spireH * 0.25;
-      rocketGroup.add(base);
-      // 4 radial nozzles canted downward (pulling pod up)
+      var basePart = new THREE.Mesh(new THREE.CylinderGeometry(spireR*0.95, spireR*1.05, spireH*0.35, 8), new THREE.MeshPhongMaterial({ color: 0x803030 }));
+      basePart.position.y = y + spireH * 0.25;
+      rocketGroup.add(basePart);
       for (var j = 0; j < 4; j++) {
         var ang = j * Math.PI/2;
         var noz = new THREE.Mesh(new THREE.ConeGeometry(spireR*0.3, spireR*0.9, 6), new THREE.MeshPhongMaterial({ color: 0x202428 }));
         noz.position.set(spireR*1.1 * Math.cos(ang), y + spireH*0.1, spireR*1.1 * Math.sin(ang));
         noz.rotation.z = Math.cos(ang) * 0.5;
         noz.rotation.x = Math.sin(ang) * 0.5;
         rocketGroup.add(noz);
+        var fl = buildFlameGroup(def.thrust/4, def.w/4);
+        fl.position.set(spireR*1.3 * Math.cos(ang), y + spireH*0.05, spireR*1.3 * Math.sin(ang));
+        // Nozzles are canted outward; flame along their axis but simplification: point downward
+        fl.userData.stage = parts[i].stage;
+        fl.userData.partIdx = i;
+        rocketGroup.add(fl);
       }
       y += spireH;
       continue;
@@ -1235,6 +1267,14 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
       mesh.position.y = y + h / 2;
     }
     rocketGroup.add(mesh);
+    // Attach a flame to engines and SRBs (stack-mounted)
+    if (def.type === 'engine' || def.type === 'srb') {
+      var fl2 = buildFlameGroup(def.thrust, def.w/2);
+      fl2.position.y = y;
+      fl2.userData.stage = parts[i].stage;
+      fl2.userData.partIdx = i;
+      rocketGroup.add(fl2);
+    }
     y += h;
   }
   flameLight.position.y = -2;
@@ -1683,6 +1723,23 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
 
   // Flame light
   flameLight.intensity = sim.thrustN > 0 ? sim.throttle * 3 : 0;
+  // Engine flame animation: scale length by throttle, jitter for life
+  for (var fi = 0; fi < rocketGroup.children.length; fi++) {
+    var ch = rocketGroup.children[fi];
+    if (!ch.userData || !ch.userData.isFlame) continue;
+    var isCurStage = ch.userData.stage === sim.currentStage;
+    var firing = isCurStage && sim.throttle > 0 && sim.thrustN > 0;
+    if (firing) {
+      var throttle = sim.throttle;
+      var jitter = 0.85 + Math.random() * 0.3;
+      var lenScale = ch.userData.baseLen * throttle * jitter;
+      var widthScale = (0.7 + throttle * 0.4) * (0.9 + Math.random() * 0.2);
+      ch.scale.set(widthScale, lenScale, widthScale);
+      ch.visible = true;
+    } else {
+      ch.visible = false;
+    }
+  }
 
   // Exhaust particles
   if (sim.thrustN > 0) {
@@ -1762,18 +1819,18 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
   var offsetDir = rotated.multiplyScalar(cp).add(radial.clone().multiplyScalar(sp));
   var camTarget = focusPoint.clone().add(offsetDir.multiplyScalar(camDist));
 
-  // Screen shake
+  // Screen shake only at real g-loads (> 2g) and high throttle — prevents constant jitter at launch
   var gForce = sim.accel / ENV.g0;
-  if (sim.thrustN > 0 && gForce > 1) {
-    var shake = Math.min(gForce * 0.3, 3);
+  if (sim.thrustN > 0 && gForce > 2 && sim.throttle > 0.5) {
+    var shake = Math.min((gForce - 2) * 0.25, 1.5);
     camTarget.add(new THREE.Vector3((Math.random() - 0.5) * shake, (Math.random() - 0.5) * shake, (Math.random() - 0.5) * shake));
   }
 
   if (!camera._initialized) {
     camera.position.copy(camTarget);
     camera._initialized = true;
   } else {
-    camera.position.lerp(camTarget, 0.15);
+    camera.position.lerp(camTarget, 0.08);
   }
   camera.up.copy(radial);
   camera.lookAt(focusPoint);
@@ -2707,26 +2764,58 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
   try {
     audio.ctx = new (window.AudioContext || window.webkitAudioContext)();
   } catch (e) { return; }
+  // Layered sine oscillators for a deep chest-rumble instead of a buzzy sawtooth
   audio.engineOsc = audio.ctx.createOscillator();
-  audio.engineOsc.type = 'sawtooth';
-  audio.engineOsc.frequency.value = 48;
-  var noiseBuf = audio.ctx.createBuffer(1, audio.ctx.sampleRate * 2, audio.ctx.sampleRate);
+  audio.engineOsc.type = 'sine';
+  audio.engineOsc.frequency.value = 42;
+  audio.engineOsc2 = audio.ctx.createOscillator();
+  audio.engineOsc2.type = 'sine';
+  audio.engineOsc2.frequency.value = 63;
+  audio.engineOsc3 = audio.ctx.createOscillator();
+  audio.engineOsc3.type = 'triangle';
+  audio.engineOsc3.frequency.value = 98;
+  // Pink noise for natural turbulence
+  var noiseBuf = audio.ctx.createBuffer(1, audio.ctx.sampleRate * 3, audio.ctx.sampleRate);
   var nd = noiseBuf.getChannelData(0);
-  for (var i = 0; i < nd.length; i++) nd[i] = (Math.random() * 2 - 1) * 0.4;
+  var b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;
+  for (var i = 0; i < nd.length; i++) {
+    var w = Math.random() * 2 - 1;
+    b0 = 0.99886 * b0 + w * 0.0555179;
+    b1 = 0.99332 * b1 + w * 0.0750759;
+    b2 = 0.96900 * b2 + w * 0.1538520;
+    b3 = 0.86650 * b3 + w * 0.3104856;
+    b4 = 0.55000 * b4 + w * 0.5329522;
+    b5 = -0.7616 * b5 - w * 0.0168980;
+    nd[i] = (b0 + b1 + b2 + b3 + b4 + b5 + b6 + w * 0.5362) * 0.09;
+    b6 = w * 0.115926;
+  }
   audio.noiseSrc = audio.ctx.createBufferSource();
   audio.noiseSrc.buffer = noiseBuf;
   audio.noiseSrc.loop = true;
   audio.engineFilter = audio.ctx.createBiquadFilter();
   audio.engineFilter.type = 'lowpass';
   audio.engineFilter.frequency.value = 300;
-  audio.engineFilter.Q.value = 1;
+  audio.engineFilter.Q.value = 0.7;
+  // A touch of distortion via waveshaper at the tail
+  audio.engineShaper = audio.ctx.createWaveShaper();
+  var curve = new Float32Array(1024);
+  for (var si = 0; si < 1024; si++) {
+    var x = si / 512 - 1;
+    curve[si] = Math.tanh(x * 1.4);
+  }
+  audio.engineShaper.curve = curve;
   audio.engineGain = audio.ctx.createGain();
   audio.engineGain.gain.value = 0;
   audio.noiseSrc.connect(audio.engineFilter);
   audio.engineOsc.connect(audio.engineFilter);
-  audio.engineFilter.connect(audio.engineGain);
+  audio.engineOsc2.connect(audio.engineFilter);
+  audio.engineOsc3.connect(audio.engineFilter);
+  audio.engineFilter.connect(audio.engineShaper);
+  audio.engineShaper.connect(audio.engineGain);
   audio.engineGain.connect(audio.ctx.destination);
   audio.engineOsc.start();
+  audio.engineOsc2.start();
+  audio.engineOsc3.start();
   audio.noiseSrc.start();
   // Reentry wind: separate noise + bandpass chain, driven by Q
   audio.windSrc = audio.ctx.createBufferSource();
@@ -2753,11 +2842,14 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
   }
   var thrFrac = s.thrustN > 0 ? s.throttle : 0;
   var rho = s.parent === 'earth' ? atmDensity(s.altitude) : 0;
-  var atmFactor = Math.min(1, rho / 0.4 + 0.15);
-  var vol = thrFrac * 0.35 * atmFactor;
-  audio.engineGain.gain.setTargetAtTime(vol, audio.ctx.currentTime, 0.05);
-  audio.engineFilter.frequency.setTargetAtTime(100 + atmFactor * 450 + thrFrac * 250, audio.ctx.currentTime, 0.05);
-  // Reentry wind: Q-driven, pitched by speed
+  var atmFactor = Math.min(1, rho / 0.4);
+  // Audible but muffled in vacuum (cinematic convention) — 30% volume, hard low-pass
+  var vacFactor = 0.3 + atmFactor * 0.7;
+  var vol = thrFrac * 0.3 * vacFactor;
+  audio.engineGain.gain.setTargetAtTime(vol, audio.ctx.currentTime, 0.08);
+  // Cutoff: vacuum muffled (~200Hz), atm full range (~1800Hz). Throttle adds brightness.
+  var cutoff = 180 + atmFactor * 1500 + thrFrac * 350;
+  audio.engineFilter.frequency.setTargetAtTime(cutoff, audio.ctx.currentTime, 0.08);
   if (audio.windGain && audio.windFilter) {
     var q = s.q || 0;
     var windVol = Math.min(0.35, q / 80000);
@@ -2862,7 +2954,7 @@ <h2 id="resultTitle">Orbit Achieved!</h2>
   var canvas = document.getElementById('navballCanvas');
   if (!canvas) return;
   navRenderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
-  navRenderer.setSize(220, 220);
+  navRenderer.setSize(170, 170);
   navRenderer.setPixelRatio(window.devicePixelRatio || 1);
   navScene = new THREE.Scene();
   navCamera = new THREE.PerspectiveCamera(65, 1, 0.01, 10);