Net Shooter

An open-source first-person shooter that runs in the browser, with peer-to-peer multiplayer co-op over NET (@net-mesh/browser 0.45.1) and WebRTC. There's no game server: the host's browser runs the match, every player links straight to it, and the traffic is end-to-end encrypted. It's built with three.js and plain JavaScript, and it's meant as a working example to copy from when you add multiplayer to your own web game.

▶ Play it in your browser · NET docs · NET browser quickstart

• Browser multiplayer with no backend: a static site plus NET's public anchor, which introduces players and relays only when a direct link can't be made.
• Host-authoritative netcode at 30 Hz, with client-side prediction, reconciliation and interpolation (NET's hostNetcode / joinNetcode).
• Lag compensation: the host decides hits against what the shooter saw when they fired (rewind).
• Server browser over NET lobbies, with search, region filter, sorting, password-locked games and 2–4 players.
• F4 network debug panel: link type, latency, jitter and traffic per player, a live mesh map, and NET's own counters.
• Solo never loads NET: the networking code is a separate chunk, loaded when co-op opens.

Running

npm install
npm start

npm start builds the game into dist/ (scripts/build.mjs), rebuilds it on every change, and serves it over HTTPS at https://localhost:8081/ (WebCrypto and WebRTC need a secure context). For co-op, open it in two browsers, or two tabs. In one, go to Play → Co-op → Host game. In the other, open the server browser and join.

Co-op needs a NET anchor, which introduces players' browsers to each other. By default it uses NET's public anchor, https://anchor.ai2070.net, so there's nothing to run for it. The public anchor keeps each site's games apart: players of your page see each other's lobbies, never another site's, even one that also calls its game net-shooter.

One-time setup for npm start: mkcert, for a certificate your browser trusts. winget install FiloSottile.mkcert (or brew install mkcert), then mkcert -install.

To run your own anchor instead, npm start -- --local-anchor starts one on :8444 and prints a page URL with ?anchor= pointing at it. It needs a net-mesh with the anchor feature: download net-mesh-anchor-v0.45.1-<platform> from the NET release (x86_64 Linux and Windows), or build it with cargo install net-cli --features rtc-bootstrap. Put it at .anchor/bin/net-mesh(.exe), or set NET_MESH_BIN. The first run fills .anchor/ with the mesh key, the credential issuer key and the certificate. It's git-ignored; keep it private.

Other options:

• npm start -- --host <LAN IP>: play across your LAN. Other machines must trust your mkcert CA.
• ?anchor=https://… on the page URL: use a different anchor than the public one.
• ANCHOR_STATS=1, ANCHOR_VERBOSE=1|2|3: anchor diagnostics.
• netDebug() in the devtools console: this player's connection details.
• F4, anywhere: the network debug panel (see Network debug panel).

Use a regular browser. Embedded editor previews may block WebRTC.

Building

npm run build writes the game to dist/, ready for any static host:

• js/main.js, bundled with three.js and NET from node_modules and minified. NET (js/net.js) stays a separate chunk, loaded only when co-op is opened, so solo never loads it.
• NET's WebAssembly leaf (net_leaf.js and net_leaf_bg.wasm), copied next to the chunks. NET imports it at run time from beside its own code, which no bundler can follow.
• index.html and css/style.css.

three.js and NET are pinned npm dependencies (Renovate keeps them current); only the font still comes from a CDN (Google Fonts).

Controls

Action	Input
Move	W A S D
Look	Mouse
Fire	Left click (hold for automatic fire)
Aim down sights	Right click
Reload	R
Sprint	Shift
Jump	Space
Pause	Esc
Network debug panel	F4

What's in it

• Solo: a walled arena with crates and cover, plus eight target dummies that patrol, take damage (headshots do double), and respawn three seconds after they go down.

• Menus: main menu, mode select (Solo / Co-op), settings (player name, sensitivity, FOV, volume, saved in localStorage), controls, and a pause menu (Resume, Settings, Controls, Quit to main menu). Esc steps back out of sub-menus. Beside the main menu, a card on NET, in NET's own look, with links to its site and its browser quickstart.

• Co-op over NET, 2–4 players:

  • Host game opens a NET lobby with the form's settings: server name, max players (2–4), map, region tag, optional password and friendly fire. Everything but the password and friendly fire shows in the server browser; a password marks the game locked.
  • Server browser lists open games with NET's listLobbies, with columns for server, region, map, players and route. Search matches server names; the region dropdown, Hide full and Hide empty filter the list; column headers sort it; Refresh fetches it again. If NET can't be reached, the list says why and the status reads "Not connected to NET".
  • Joining: select a row, then Join (or double-click, or Enter; the arrow keys move the selection). Full games can't be joined. Selecting a locked game shows a password box next to Join, and the host checks the password.
  • The host is authoritative. Each player predicts their own movement with the same rules the host runs (js/sim.js), and the host confirms it. Other players are smoothed between host snapshots.
  • Shots feel instant locally, but the host decides what they hit, using NET's lag compensation (rewind): a shot hits what the shooter saw when they fired.
  • Targets and kills are shared. "Targets down" counts the whole team.
  • Connections: players connect peer-to-peer over WebRTC. The anchor only introduces them, and relays traffic when a direct link can't be made. For a joined player, the pause menu shows the route (Direct or Relayed) and the round trip, e.g. "Co-op · Direct · 42 ms"; the host's shows "Co-op · Hosting".
  • Leaving: when a player leaves or closes the tab, their character disappears. If the host leaves, the game ends for everyone.
  • Limits: friendly fire is a lobby setting only, since players have no health yet. Players don't collide with each other.

Network debug panel (F4)

Press F4 at any time, and again to close it. The panel shows NET as it runs, in your own browser, for debugging your connection or your own NET game built from this one. It's the same panel as in Rose & Blade, adapted to this game, where players connect to the host and not to each other.

• NET DEBUG: the frame rate (frames a second, the average and slowest frame time), the anchor, and this page's node id and whether its session with the anchor is up. In solo NET isn't loaded, and the panel says so; opening it never loads NET.
• GAME: in co-op, the game's name and your role. The host sees its netcode tick and any dropped frames. A player sees snapshots received (late, partial), prediction corrections and inputs not yet acknowledged.
• Links: one row per link (the host has one per player, a player has one to the host): direct (WebRTC) or relayed through the anchor, with the reason in brackets if the direct attempt ended (ice timeout, udp blocked, failed). Then the latency (NET's netcode clock: the median round trip) and jitter, ms since the peer was last heard, and kB/s each way. "All told" is the traffic since the link was first used.
• The map: every player is a node, and the shorter the round trip, the closer two nodes sit. Direct links are lime, relayed ones dashed amber. Your own links are bright, with a packet moving along them.
• NODE / RTC: NET's own counters (node.counters(), node.rtcStats()), the ones that aren't zero.

How it gets the numbers (js/net.js, under "For the network debug panel"):

• Traffic is counted on the node itself: its openStream and each stream's send are wrapped, and incoming stream_data events are counted per peer. That covers movement and the lobby store alike.
• Latency: a player has NET's netcode clock to the host (stats().clock). The host has no clock of its own, so every player reports its round trip with an input about once a second (twice a second while its panel is open), and the host's panel shows that.
• The links come from peerAttempt, read every half second while the panel is open.
• A player's map shows only its own link at first. When a player's panel is open, its reports say so, and the host adds a net:links entity to its snapshots, with each player's link and round trip, so that player's map shows the whole game. When no panel is open, the host stops sending it, about 3 s later.

The panel only reads. Opening it changes nothing in the game, apart from those small reports and the net:links entity.

How co-op uses NET

All of it is in js/net.js, which js/main.js loads only when you open co-op. A NET outage never breaks solo.

Piece	NET API	What it does here
Connection	requestCredential, connect	The page asks the anchor for an anonymous credential and becomes a NET node. There's one node per page, with a fresh identity on every load.
Staying connected	call (to a service nobody runs)	Before browsing or hosting, and when the tab comes back to the front, the node checks its session with the anchor is still there; if not, it's replaced.
Hosting	createLobby	Hosts the game's store: the roster of names, colours and kills. It also publishes the listing the server browser shows.
Server browser	listLobbies	Lists open games: name, region, map, players, lock.
Joining	joinLobby, then an enlist action	Joins the store. The host checks the password in enlist, so it never leaves the host's page.
Movement	hostNetcode / joinNetcode	Host-authoritative tick at 30 Hz. Each client predicts itself and reconciles, and other players are interpolated.
Shots	netcode inputs + rewind	Shots ride along with inputs, and the host resolves them against the targets as the shooter saw them.
Direct links	peerAttempt, acceptPeer	The host answers joining players, so they connect peer-to-peer instead of staying on the anchor's relay.

Things worth knowing, found while building it:

• Each hosted game gets its own store ID and movement label, with a random suffix; joiners read it from the listing. If a tab reused the names of a game it had hosted before, a player tab that was in the earlier game couldn't join the new one until someone reloaded.
• A tab left in the background can lose its session with the anchor (the browser slows or freezes it, and the anchor drops it). It then neither sees games nor is seen hosting one. liveNode in js/net.js checks the node before it's used for that (at most every 20 s) and when the tab comes back to the front, and makes a new one if the session is gone. Never during a game.
• Joining doesn't wait for a direct link. connectPeer only returns once the direct attempt has settled, which where none can be had is the whole ICE deadline. The lobby is joined through a node whose connectPeer goes on after 1.5 s, over the relayed session; the direct link, when it comes, takes over underneath. If that fast join fails, it's retried with the full wait. Netcode is handed the node without connectPeer at all, so movement starts on the session the lobby already brought up.
• The host answers every offer while the pair isn't direct and no attempt is under way, not just the first, so a player whose first direct attempt failed can still go direct later. Since NET 0.39, connectPeer itself never cancels an attempt under way or re-offers on a direct pair.
• The anchor must be NET 0.37.1 or later. A 0.37.0 anchor stops relaying to a browser 90 s after it connects, so a host becomes unreachable to new players.

How NET was added

The game started as a solo shooter whose co-op menus were already shaped around NET: a server browser with Region and Route columns and a Host Game form, but only placeholder data behind them. NET was added in these steps:

1. Load NET only for co-op. js/main.js loads js/net.js with a dynamic import() the first time co-op is opened, so solo never loads NET. (It first came from the jsDelivr CDN; it's now an npm dependency, bundled into its own chunk.)

2. Share the movement rules. Player movement and collision moved out of js/game.js into js/sim.js as a pure stepPlayer(state, input) function with no three.js in it, next to the arena layout. Solo, the co-op host and each client's prediction all run the same function, so the host and clients agree on movement (0 prediction corrections in testing).

3. Write the session layer (js/net.js). hostGame and joinGame return a small session object that the game uses: input(), entities(), roster(), teamKills(), onEnd(), leave(). Everything NET-specific stays behind it: lobby, store, netcode and connection handling.

4. Add a co-op mode to js/game.js.

   • Input: a fixed 60 Hz loop sends inputs to the session, including while paused (the player just stands still).
   • Rendering: the local player is drawn where the session's prediction says; targets come from host snapshots.
   • Other players: drawn as avatars with name tags and tracers.
   • Host only: the host keeps simulating the targets and resolves everyone's shots in resolveShot(), moving targets back to where the shooter saw them (netcode rewind) before raycasting.

5. Connect the menus. The server browser's placeholder generator was replaced with listLobbies. The Join button now joins, with a password box for locked games. The Host Game form now calls createLobby with its settings. Settings gained a player name.

6. Add a local anchor. scripts/dev.mjs (npm start -- --local-anchor) runs net-mesh anchor serve for the game ID net-shooter, creating the mesh key, issuer key and mkcert certificate on first run.

7. Test with real browsers. A Playwright script ran the whole flow with separate browser contexts: host with a password, find the game in the browser, wrong and then right password, move, shoot, close the tab, re-host. It found and fixed these issues:

Project layout

index.html          markup for the HUD and every menu screen
css/style.css       styling
js/main.js          entry point; game state (menu / playing / paused), pointer lock
js/game.js          scene, camera, player controls, rifle, targets, co-op rendering
js/sim.js           arena layout and player movement (shared by solo, co-op host and prediction)
js/net.js           NET: lobbies, host/join, netcode, connection handling (loaded only for co-op)
js/servers.js       the server browser
js/ui.js            menu screen stack, settings, host form
js/hud.js           HUD: ammo, kills, hit marker
js/audio.js         synthesized sound effects (Web Audio)
js/toast.js         notification toast
js/netdebug.js      the network debug panel (F4)
js/netrain.js       the NET card's packet rain, beside the main menu

scripts/build.mjs   npm run build: the game into dist/
scripts/dev.mjs     npm start: build and watch, HTTPS page server, optional local NET anchor

docs/               README screenshots and the social preview image

License

MIT. Use it, fork it, ship it. three.js and NET keep their own licenses (NET is MIT or Apache-2.0).