Kundenprojekt · 3D-Web + Windows-App

RustPocket
Rust+ auf dem Desktop

Ein Companion-Tool für das Survival-Spiel Rust: Live-Karte, Vending-Scan, Raid-Rechner und Smart-Base-Steuerung als Windows-App. Die Website inszeniert das Produkt als Instrumentenpult, mit Scroll-Kameraflug und sechs prozeduralen 3D-Instrumenten.

Design-Referenz laut Briefing: die Frontplatte eines Tektronix-Oszilloskops, nicht noch eine SaaS-Landingpage.

Next.js 16 React Three Fiber Electron 43 Stripe
rust-pocket.com ansehen
6
3D-Instrumente
prozedural gebaut, 0 importierte Models
1
WebGL-Context
geteilt über alle Seiten statt 9 einzelne
21
Module
dokumentiert als Register R0 bis R103
4
Tage
vom ersten Commit bis zum Launch
RustPocket Startseite: nächtliche Rust-Landschaft mit Monospace-Typografie im Terminal-Stil

Startseite: erstes Bild des scroll-gesteuerten Kamerafluges durch sechs Szenen

Zwei 3D-Strategien statt einer

Cinematik und Interaktivität haben verschiedene Anforderungen. Deshalb bekam jede Aufgabe die passende Technik statt eines Hammers für alles.

Startseite

Vorgerenderter Kamera-Flug

Sechs Video-Abschnitte fliegen von der Schreibtisch-Szene über Karte, Scan, Basis und Bot bis zum Finale. Die Scrollposition steuert video.currentTime direkt.

  • All-intra encodiert: jeder Frame ein Keyframe, damit der Scrub jeden Frame erreicht
  • Clips laden als Blob, dadurch immer seekbar ohne Range-Requests
  • Eigene 720p-Varianten für Mobilgeräte
  • Kein WebGL auf der Startseite: der Canvas steigt hier bewusst aus
Unterseiten

Prozedurale Instrumente

Sechs Instrumente, komplett aus primitiver Three.js-Geometrie gebaut: Terrain-Platte, Scanner-Trommel, Oszilloskop-Trace, Relais-Bank, Rundum-Leuchte und Waveform-Hupe.

  • Ein einziger geteilter WebGL-Context im Root-Layout, alle Seiten rendern per View-Scissoring hinein
  • Der Vorgänger-Ansatz mit Canvas pro Sektion verlor Contexte, bis der GPU-Prozess starb. Die Lektion steht als Kommentar im Code
  • Kein Postprocessing: alle Glows sind additiv gemischte Geometrie
  • Render-Tiers high/low/off: Software-Renderer und Reduced Motion bekommen gar kein 3D statt eines kaputten

Die Desktop-App

Electron 43 mit Auto-Updates, verkauft über Stripe als ein einziges Abo ohne Staffelung. Der Installer wird erst nach serverseitig verifiziertem Checkout ausgeliefert.

RustPocket Desktop-App: Live-Karte mit 144 Markern und 142 Vending-Maschinen
RustPocket Desktop-App: Register-Übersicht aller Module

Register-Übersicht: 21 Module von R0 bis R103

RustPocket Desktop-App: Team-Bot mit Sprach- und Chat-Kommandos

Team-Bot: Sprach-, Text- und Ingame-Chat-Kommandos

Funktionsumfang

Was vorher auf Handy, Spreadsheet, Wiki-Tab und drei Discord-Bots verteilt war, auf einem Bildschirm.

Live-Karte

Terrain, Team-Positionen, Monumente, Vending-Maschinen und Events auf einem Monitor statt auf fünf Zoll Handy.

Vending-Scan

Alle Automaten eines Servers scannen, Bestände beobachten, Preisalarme setzen.

Raid-Rechner

Sprengkosten pro Wand und Tür, inklusive Warnung bei Offline-Raids.

Smart-Base-Steuerung

Schalter, Alarme und Lagermonitore der Basis steuern, mit Defensive- und Standby-Modus für alle Geräte auf einmal.

Alarme aufs Telefon

Telegram kostenlos, SMS und Sprachanruf über Twilio. Die Basis meldet sich, bevor es zu spät ist.

Team-Bot + Discord

Sprach-, Text- und Ingame-Chat-Bot für das Team, plus Discord-Anbindung.

<TechStack />

Tech Stack im Detail

Next.js 16 Framework

App Router, React 19, Zod-Validierung, Deployment auf Vercel mit Cloudflare DNS

React Three Fiber 9 3D

Sechs prozedurale Instrumente aus primitiver Geometrie, kein einziges importiertes 3D-Model

Scrub-Engine (Vanilla JS) Scroll-Kino

Eigene 484-Zeilen-Engine: Scrollposition steuert video.currentTime über sechs vorgerenderte Kamera-Flüge

Tailwind CSS v4 Styling

OKLCH-Farbtokens, direkt aus dem UI der echten Desktop-App gesampelt, Radius-Obergrenze 2px

Geist Mono Typografie

Eine einzige Monospace-Schrift für UI und Fließtext, passend zum Terminal-Charakter

Electron 43 Desktop-App

Windows-App mit NSIS-Installer, Auto-Updates über electron-updater und Discord-Bot-Integration

Stripe Payments

Checkout, Customer Portal und Webhooks. Der Download wird serverseitig gegen die Stripe-Session verifiziert

Ed25519-Lizenzsystem Security

Signierte Lizenz-Antworten mit Nonce pro Anfrage, gegen Replay-Attacken und Hosts-File-Spoofing

Lizenz-Sicherheit im Detail

Ed25519-Signaturen

Jede Lizenz-Antwort ist signiert. Ein lokaler Proxy, der einfach ok zurückgibt, hilft nicht.

Nonce pro Anfrage

Antworten lassen sich nicht wiederverwenden. Replay-Attacken laufen ins Leere.

Idempotente Keys

Lizenzschlüssel werden nach dem Stripe-Checkout serverseitig und idempotent erzeugt.

RustPocket ist ein unabhängiges Companion-Tool und steht in keiner Verbindung zu Facepunch Studios. Rust und Rust+ sind Marken ihrer jeweiligen Inhaber.