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.
Zwei 3D-Strategien statt einer
Cinematik und Interaktivität stellen verschiedene Anforderungen, also haben wir für jede Aufgabe die passende Technik gewählt.
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. Den Installer liefert der Server erst aus, wenn er den Checkout verifiziert hat.
Funktionsumfang
RustPocket bündelt auf einem Bildschirm, was vorher auf Handy, Spreadsheet, Wiki-Tab und drei Discord-Bots verteilt war.
-
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. Schlägt ein Alarm der Basis an, landet die Meldung auf Ihrem Telefon.
-
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
-
React Three Fiber 9
Sechs prozedurale Instrumente aus primitiver Geometrie, ohne ein importiertes 3D-Model
-
Scrub-Engine (Vanilla JS)
Eigene 484-Zeilen-Engine: Scrollposition steuert video.currentTime über sechs vorgerenderte Kamera-Flüge
-
Tailwind CSS v4
OKLCH-Farbtokens, direkt aus dem UI der echten Desktop-App gesampelt, Radius-Obergrenze 2px
-
Geist Mono
Eine einzige Monospace-Schrift für UI und Fließtext, passend zum Terminal-Charakter
-
Electron 43
Windows-App mit NSIS-Installer, Auto-Updates über electron-updater und Discord-Bot-Integration
-
Stripe
Checkout, Customer Portal und Webhooks. Vor dem Download prüft der Server die Stripe-Session
-
Ed25519-Lizenzsystem
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
Der Server erzeugt den Lizenzschlüssel nach dem Stripe-Checkout idempotent.
RustPocket ist ein unabhängiges Companion-Tool und steht in keiner Verbindung zu Facepunch Studios. Rust und Rust+ sind Marken ihrer jeweiligen Inhaber.