Swarm Network Demo

6 autonomous boats on a mesh radio network

Formation

Environment

Interference 0%

Radio silence (vehicles receive only)

Auto relay chain

Last command

Time-to-command

—

Time-to-formation

—

Fleet

Legend

Command packet

Acknowledgement

Lost packet / not yet received

Received, ack not confirmed

⇄Acting as comms relay

What am I looking at?

A toy model of a swarm of autonomous boats coordinating over a radio mesh. Commands leave the base station and hop vessel-to-vessel, each hop adding latency and risk of loss. Time-to-command runs from your click until the base station holds acknowledgements from every vessel; time-to-formation runs until every vessel is on station.

With auto relay chain on, vessels detach to bridge the gap back to the base station whenever the destination is out of radio range, and the chain re-forms on its own as interference changes.

Interference shrinks radio range and raises loss. In radio silence the vessels stop transmitting: no relays, no acks. Out-of-range vessels keep executing their last known commands, and the base station can't confirm anything.

Inspired by field work on autonomous maritime swarms and on comms for the DARPA Subterranean Challenge. Back to carlynlee.github.io

How it's built

Command layer. The base station issues commands that carry goals (a destination, a formation, a heading) rather than per-vehicle waypoints. Every command has a monotonically increasing ID, so a vessel that hears an old command late simply discards it, and a newer command always supersedes.

Comms layer. Commands spread by gossip: any node holding the newest command rebroadcasts it to in-range neighbors on a fixed interval. That needs no routing tables, and vessels that drift into range later still get the command. Acknowledgements travel the other way, routed over the shortest path in the current link graph and retried until the base station confirms receipt.

Link model. Each link has a range limit, per-hop latency with jitter, and random packet loss. Interference degrades all three at once. In radio silence the vessels go receive-only, so they keep working but the base station loses its view of the fleet.

Autonomy layer. Each vessel computes its own station from the command, so the swarm needs no extra coordination traffic. Relay roles are assigned the same deterministic way: from the distance to the destination and current link conditions, every vessel independently agrees on who becomes a relay, and the chain re-forms as conditions change. Vehicle motion is rate-limited in turn and acceleration.

Measurement. Time-to-command is measured at the base station, from the operator's point of view: the clock stops only when it holds every acknowledgement, not when the last vessel hears the command.

Delivery. One static page in WebGL (Three.js), with no backend, accounts or install. Setup time is however long the page takes to load.

Rendering: high level & low level

High level: the scene graph. Everything on screen is a node in a Three.js scene graph. Each vessel is a group of meshes with its label attached as a child, so moving or turning the parent carries the whole assembly. Hulls use physically based materials lit by a sky/ground hemisphere light and a directional sun. A perspective camera with orbit controls frames the scene, with a view offset so the action sits beside this panel (or above it on a phone).

Picking. A click becomes a ray from the camera through the cursor. The ray is tested against the vessel meshes first (select one and its material lights up), then against an analytic sea-level plane to turn the click into a world coordinate for the move command.

Low level: buffers and shaders. The ocean is a custom GLSL shader. The vertex stage displaces a plane of nearly 80,000 vertices with summed sine waves and derives normals from their slopes; the fragment stage shades by wave height and draws an anti-aliased grid per pixel. Because the waves exist only on the GPU, CPU-side picking deliberately uses the flat surface. All radio packets render in one instanced draw call, with per-instance transform and color buffers rewritten each frame. Mesh links and wakes use preallocated vertex buffers updated in place, trimming the draw range instead of reallocating.

What's underneath. Each material compiles to a GPU shader program with its own render state; uniforms and vertex attributes are buffers bound to it; each frame is a render pass that clears the target and issues draw calls. WebGL hides much of that behind global state. WebGPU, and the native and Python graphics libraries built on the same model, make it explicit: pipelines, bind groups, command encoders, render passes. A high-level scene graph is the right tool for visualizing 2D/3D data, interactive science and composing scenes quickly; the explicit layer is what you reach for when building engines, custom renderers or cross-platform graphics backends.

Three.js vs CesiumJS. Three.js is a general-purpose scene graph in local Cartesian coordinates, which suits an abstract patch of ocean. CesiumJS is built for the real Earth: the WGS84 ellipsoid, terrain and imagery streamed as tiles on demand, time-dynamic entities, and camera precision at planetary scale. A version of this demo on real geography, with actual tracks and radio ranges, belongs in Cesium.

Click the water to send a move command · click a vessel to select · drag to rotate · scroll to zoom