Presets and propellants

The built-in presets

name	what it is
`afterburner`	A clean military reheat: blue core, crisp diamonds, almost no turbulence.
`afterburner_turbulent`	The same can, churning. The default when no preset is given.
`rocket_kerolox`	RP-1 and LOX: yellow-orange, sooty, opaque and very turbulent.
`rocket_hydrolox`	LH2 and LOX: nearly invisible violet, bright Mach disks, strong haze.
`rocket_methalox`	Methane and LOX: blue-violet root, pink-orange tail, clear diamonds.
`solid_booster`	An APCP booster: huge, white-yellow, dense and ragged.
`plasma`	A cyan, laminar, sci-fi drive.

presets-gallery.tsx

Starting…

import {
  AFTERBURNER_MAX_THROTTLE,
  AFTERBURNER_PRESETS,
  type AfterburnerPresetName,
  resolve_afterburner_params,
  resolve_afterburner_profile,
} from "@aeronautic/afterburner";
import { jet_state } from "@aeronautic/afterburner/physics";
import { Afterburner } from "@aeronautic/afterburner/react";
import { type FC, useState } from "react";
import { Aim, Nozzle, Stage } from "./stage";

const NAMES = Object.keys(AFTERBURNER_PRESETS) as AfterburnerPresetName[];

/**
 * Every built-in preset on one nozzle, its own size.
 * @returns The example
 */
export const PresetsGallery: FC = () => {
  const [name, set_name] = useState<AfterburnerPresetName>("rocket_methalox");
  const params = resolve_afterburner_params(undefined, name);
  const radius = params.nozzleRadiusM;

  // Far enough back to see the whole plume at full power, and the can: its
  // reach as the physics works it out, not a guess at it
  const reach =
    jet_state(
      params,
      AFTERBURNER_MAX_THROTTLE,
      resolve_afterburner_profile(undefined, name),
    ).reachM +
    radius * 4;

  return (
    <Stage
      overlay={
        <div className="example-controls">
          <label>
            preset
            <select
              value={name}
              onChange={(event) =>
                set_name(event.target.value as AfterburnerPresetName)
              }
            >
              {NAMES.map((preset) => (
                <option key={preset}>{preset}</option>
              ))}
            </select>
          </label>
        </div>
      }
    >
      <Aim
        camera={[-reach * 0.95, reach * 0.15, reach * 0.4]}
        target={[0, 0, reach * 0.4]}
      />
      <Nozzle radius_m={radius} />
      <Afterburner preset={name} />
    </Stage>
  );
};

export default PresetsGallery;

Each preset is drawn at its own nozzle size. A booster's 1.9 m nozzle makes a much bigger plume than a jet's 0.5 m.

What a preset sets

A preset is two things:

params, per nozzle: the engine;
a profile, per batch: the air and the camera's exposure. Each preset is exposed like a photograph of that engine, so a dim hydrogen plume and a blinding booster both read.

The profile comes from the batch's preset. A nozzle with no batch above it gets a batch made for its preset, so this just works. Inside an <AfterburnerBatch>, the batch's preset sets the profile, and each nozzle's preset only sets its params:

// Both nozzles drawn with the kerolox profile (its exposure, its air)
<AfterburnerBatch preset="rocket_kerolox">
  <Afterburner />
  <Afterburner preset="rocket_methalox" position={[0, 0, 4]} />
</AfterburnerBatch>

If you mix very different engines in one scene, give each look its own batch, or set exposure in the batch's profile to suit them all.

Changing a preset

params are applied over the preset, field by field:

<Afterburner preset="rocket_methalox" params={{ turbulence: 0.4 }} />

A nozzleRadiusM different from the preset's scales every length the preset set with it: a bigger engine of the same design, not a stubby one.

// A bigger booster, same look
<Afterburner preset="solid_booster" params={{ nozzleRadiusM: 3.7 }} />

A preset of your own

A preset can be an object, { params, profile }. Spread from AFTERBURNER_PRESETS to start from a built-in one:

import {
  AFTERBURNER_PRESETS,
  type AfterburnerPreset,
} from "@aeronautic/afterburner";

export const sunset_booster: AfterburnerPreset = {
  params: {
    ...AFTERBURNER_PRESETS.solid_booster.params,
    bandColor: "#ff5a1f",
  },
  profile: AFTERBURNER_PRESETS.solid_booster.profile,
};

<Afterburner preset={sunset_booster} />

Keep the object stable, as a module constant or useMemo.

Rockets by propellant

A liquid rocket can be given its fuel and mixture ratio (oxidiser over fuel, by mass) instead of raw soot and afterburning numbers:

<Afterburner
  preset="rocket_kerolox"
  params={{ propellant: { fuel: "kerosene", mixtureRatio: 2.0 } }}
/>

fuel is "kerosene", "methane" or "hydrogen". Below the fuel's stoichiometric ratio the engine runs rich:

it makes more soot, more of which survives;
more leftover fuel burns where the exhaust meets the air, the bright sheath;
the chamber is a little cooler.

Given against a preset of the same fuel, the change is relative to that preset's own mix, temperatures included. So each preset comes back exactly at its own ratio: kerolox at 2.36, methalox at 3.6, hydrolox at 6. Any param you give outright still wins over what the mix works out.

rocket-mix.tsx

Starting…

import { Afterburner } from "@aeronautic/afterburner/react";
import { type FC, useState } from "react";
import { Stage } from "./stage";

// On its side, as on a test stand: the plume streams along +Z, which a wide
// frame shows whole. A cylinder is along Y; a quarter turn about X lays it
// along Z with its top towards -Z
const ALONG_Z: [number, number, number] = [-Math.PI / 2, 0, 0];

/**
 * A kerolox engine whose mixture ratio you choose.
 * @returns The example
 */
export const RocketMix: FC = () => {
  const [mixture_ratio, set_mixture_ratio] = useState(2.36);

  return (
    <Stage
      camera={[-34, 5, 14]}
      target={[0, 0, 12]}
      overlay={
        <div className="example-controls">
          <label>
            O/F {mixture_ratio.toFixed(2)}
            <input
              type="range"
              min={1.6}
              max={3.4}
              step={0.02}
              value={mixture_ratio}
              onChange={(event) =>
                set_mixture_ratio(Number(event.target.value))
              }
            />
          </label>
        </div>
      }
    >
      <mesh position={[0, 0, -4]} rotation={ALONG_Z}>
        <cylinderGeometry args={[1.2, 1.2, 6, 32]} />
        <meshStandardMaterial color="#d9dce2" roughness={0.6} />
      </mesh>
      <mesh position={[0, 0, -0.5]} rotation={ALONG_Z}>
        <cylinderGeometry args={[0.25, 0.46, 1, 24, 1, true]} />
        <meshStandardMaterial
          color="#3a3330"
          metalness={0.5}
          roughness={0.5}
          side={2}
        />
      </mesh>
      <Afterburner
        preset="rocket_kerolox"
        params={{
          propellant: { fuel: "kerosene", mixtureRatio: mixture_ratio },
        }}
      />
    </Stage>
  );
};

export default RocketMix;

Drag the ratio down to 1.6 for a dark, smoky, fire-sheathed plume. Push it up to 3.3 for a clean one, with the violet band glow and the diamonds showing.

propellant_params, propellant_effects and equivalence_ratio are exported if you want the numbers on the main thread.

Presets and propellants

The built-in presetsCopy Anchor Link

What a preset setsCopy Anchor Link

Changing a presetCopy Anchor Link

A preset of your ownCopy Anchor Link

Rockets by propellantCopy Anchor Link

On this page

The built-in presets

What a preset sets

Changing a preset

A preset of your own

Rockets by propellant