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.

  • Next.js 16
  • React Three Fiber
  • Electron 43
  • Stripe

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

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.

Tech Stack

im Detail

  • Next.js 16

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

    Framework
  • React Three Fiber 9

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

    3D
  • Scrub-Engine (Vanilla JS)

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

    Scroll-Kino
  • Tailwind CSS v4

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

    Styling
  • Geist Mono

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

    Typografie
  • Electron 43

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

    Desktop-App
  • Stripe

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

    Payments
  • Ed25519-Lizenzsystem

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

    Security

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.