Quick start

1. A WebGPU canvasCopy Anchor Link

The plume is TSL, so the canvas needs a WebGPURenderer. Give <Canvas> an async gl factory and initialise the renderer before returning it:

import { Canvas } from "@react-three/fiber";
import { webgpu_gl } from "@aeronautic/core/react";

export const App = () => <Canvas gl={webgpu_gl()}>{/* your scene */}</Canvas>;

2. A plumeCopy Anchor Link

<Afterburner> is a group with a nozzle at its origin. The plume streams out along the group's local +Z, aft of a model that flies along -Z, and follows the group every frame.

import { Afterburner } from "@aeronautic/afterburner/react";

<Afterburner preset="afterburner" throttle={1.1} />;

That's all a scene needs. A nozzle with no <AfterburnerBatch> above it shares one made for its scene and preset.

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

/**
 * One engine at a throttle you choose.
 * @returns The example
 */
export const BasicJet: FC = () => {
  const [throttle, set_throttle] = useState(1.1);

  return (
    <Stage
      overlay={
        <div className="example-controls">
          <label>
            throttle {throttle.toFixed(2)}
            <input
              type="range"
              min={0}
              max={1.1}
              step={0.01}
              value={throttle}
              onChange={(event) => set_throttle(Number(event.target.value))}
            />
          </label>
        </div>
      }
    >
      <Nozzle />
      <Afterburner preset="afterburner" throttle={throttle} />
    </Stage>
  );
};

export default BasicJet;

3. Make it look rightCopy Anchor Link

The radiance is graded for exposure 1 under a filmic tone map, and it reads best with a little bloom on top:

import { AgXToneMapping } from "three";

renderer.toneMapping = AgXToneMapping;

The examples' shared stage shows the whole setup with bloom, in about forty lines.

4. Point it the right wayCopy Anchor Link

The plume leaves along +Z: aft, for a model that flies along -Z with +Y up. If your nozzle faces another way, turn the group, or give it a direction:

// On the exit plane of an engine at the back of a model flying along +X
<Afterburner position={[-14, 0, 0]} direction={[-1, 0, 0]} />

// Pointing straight down, like a rocket
<Afterburner preset="rocket_kerolox" direction={[0, -1, 0]} />

Where nextCopy Anchor Link

• The tutorial builds a full scene step by step.
• Placing plumes covers sitting plumes on a loaded model.
• Presets and propellants lists every look that ships.