VR ProgrammierHub

Ein browserbasierter, begehbarer 3D-Lernraum für die hybride Programmier-Lehre. Studierende betreten als Avatar einen virtuellen Seminarraum, setzen sich an ihren Arbeitsplatz und programmieren dort Python direkt im Browser – während sie sehen, woran die anderen gerade arbeiten.

Entstanden für den Grundlagenkurs Objektorientierte Programmierung (Python) an der PH Weingarten, der teils in Präsenz, teils per Zoom stattfindet.

---

Didaktischer Wert

Das Projekt adressiert drei Kernprobleme hybrider Programmier-Lehre – und leitet daraus seinen didaktischen Anspruch ab:

1. Sichtbarkeit statt stiller Einzelarbeit (Peer-Learning). In klassischen Online-Settings arbeitet jede:r isoliert vor sich hin. Der Hub macht die Arbeit sichtbar: Man sieht die Avatare der anderen, ihren Aufgaben-Status und kann ihnen buchstäblich „über die Schulter schauen“. Das ermöglicht beiläufiges Lernen am Modell der Peers (sozial-konstruktivistisch, Vygotskys Zone der nächsten Entwicklung), das in Videokonferenzen komplett wegfällt.

2. Soziale Eingebundenheit für Remote-Teilnehmende. Wer zuhause sitzt, ist in reinen Zoom-Formaten „abgehängt“. Ein gemeinsamer Raum mit verkörperten Avataren erzeugt Präsenz- und Zugehörigkeitsgefühl (relatedness im Sinne der Selbstbestimmungstheorie) – ein bekannter Faktor gegen Abbruch und für Lernmotivation.

3. Niedrigste Einstiegshürde – Fokus aufs Programmieren, nicht auf Setup. Kein Download, keine lokale Python-Installation, keine IDE-Konfiguration: Seite öffnen, einloggen, loslegen. Python läuft via Pyodide (WebAssembly) im Browser der Studierenden. Das entfernt die klassische Anfänger-Hürde („bei mir läuft es nicht“) und verlagert die kognitive Last dorthin, wo sie hingehört: auf das Erlernen von Konzepten.

Für die Lehrperson entsteht formative Transparenz: Man sieht in Echtzeit, wer woran arbeitet und wer hängt – auch remote – und kann gezielt und rechtzeitig unterstützen, statt auf Zuruf zu reagieren. Ein sichtbares Hilfe-Handzeichen senkt zusätzlich die Hemmschwelle, um Hilfe zu bitten.

Nicht zuletzt ist der Hub selbst Anschauungsobjekt: Er verbindet Web-, 3D- und Netzwerk-Programmierung in einem realen, motivierenden Kontext und eignet sich als Gegenstand studentischer Projekt- und Abschlussarbeiten.

---

Was schon funktioniert

• Begehbarer 3D-Raum (WASD + Maus/Pointer-Lock, Pfeiltasten als Tastatur-Fallback)
• Echtzeit-Multiplayer: alle sehen alle Avatare live, mit Namensschild, Blickrichtung und Hilfe-Marker; framerate-unabhängige Interpolation
• Python-IDE als 2D-Fenster: Code ausführen via Pyodide, Ausgabe direkt sichtbar
• Eigener Arbeitsplatz mit Monitor; Hinsetzen (Taste E) öffnet die IDE
• Der eigene Code wird live auf den 3D-Monitor gerendert (Grundlage für die „über-die-Schulter“-Einsicht der anderen)

Erweiterungen im studentischen Projekt

Erweiterungen im studentischen Projekt

Die bereitgestellte Ausgangsversion wurde um folgende Funktionen ergänzt und in bestehenden Bereichen überarbeitet:

• Mehrere vollständige Arbeitsplätze: Die Tisch- und Arbeitsplatzanordnung wurde überarbeitet. Teilnehmende können unterschiedliche Arbeitsplätze nutzen und dort die Python-IDE öffnen.

• Synchronisierte Arbeitsplatzbelegung: Die Belegung wird zwischen den verbundenen Clients abgeglichen. Ein bereits belegter Arbeitsplatz kann nicht gleichzeitig von einer anderen Person besetzt werden.

• Nutzerbezogene, synchronisierte Codeanzeige: Jeder Arbeitsplatzmonitor zeigt den Code der Person an, die diesen Platz nutzt. Änderungen werden über WebSockets übertragen und sind auch für andere Teilnehmende sichtbar.

• Codeanzeige beim Arbeitsplatzwechsel: Beim Verlassen eines Arbeitsplatzes wird der Python-Code vom dortigen Monitor entfernt. Er bleibt dem Nutzer zugeordnet und erscheint auf dem Monitor des neu belegten Arbeitsplatzes.

• Öffentlicher Textchat: Teilnehmende können Nachrichten an den gesamten Raum senden und sich gemeinsam über Aufgaben und Lösungswege austauschen.

• Privater Textchat: Einzelne Teilnehmende können direkt miteinander kommunizieren, ohne ihre Nachrichten im öffentlichen Chat anzuzeigen.

• Hilfe-Warteschlange für die Lehrkraft: Die bestehende Hilfeanzeige wurde weiterentwickelt. Die Lehrkraft sieht alle um Hilfe bittenden Studierenden in der Reihenfolge ihrer Anfragen und kann diese als erledigt markieren. Erledigte Anfragen werden aus der Warteschlange entfernt.

• Korrekturen an Darstellung und Oberfläche: Darstellungsprobleme an den Monitorhaltern und störende Überlappungen in der Benutzeroberfläche wurden behoben.

• Bereitstellung auf ISA: Der weiterentwickelte Hub wurde auf ISA eingerichtet und über eine Subdomain zugänglich gemacht. Ein systemd-Nutzerdienst betreibt den Node.js-Prozess.

Roadmap (Auszug)

• Login/Auth (Rollen student / teacher) und Persistenz der Workspaces
• Klick auf fremden Monitor → Code-Snapshot; Lehrenden-Dashboard
• CodeMirror statt Textarea; optionaler VR-Zugang (WebXR)

---

Architektur und Ordnerstruktur

• Frontend: Three.js (WebGL), modulare ES-Module, kein Build-Schritt
• Python: Pyodide (CPython als WebAssembly, läuft im Browser)
• Backend: Node.js + Express + ws (ein Prozess: liefert Assets aus und hält den Echtzeit-Raumzustand im WebSocket-Hub)
• Prinzip: komplett self-hostbar, keine CDN-Abhängigkeit zur Laufzeit, kein Vendor-Lock-in

public/                 Dateien der Browser-Anwendung
  index.html            schlankes Markup + Import-Map
  css/                  Stylesheets der Oberfläche
    style.css           Layout und Gestaltung
  js/                   JavaScript-Module der Anwendung
    main.js             Orchestrator + Render-Schleife
    scene.js            Weltaufbau (Raum, Licht, Arbeitsplätze)
    controls.js         WASD + Maus-Blick (Pointer Lock)
    avatars.js          fremde Avatare, Namensschilder, Interpolation
    net.js              WebSocket-Client + Protokoll
    ide.js              Python-IDE-Overlay (Pyodide)
    codescreen.js       Code als Live-Textur auf dem 3D-Monitor
    ui.js               Overlay, Toolbar, HUD
  vendor/               Three.js + Pyodide (per Setup-Skript, nicht eingecheckt)
scripts/                Skripte zur Einrichtung des Projekts
  setup-vendor.sh       lädt Three.js und Pyodide nach public/vendor/
server.js               Express + WebSocket-Hub
package.json            npm-Abhängigkeiten und Startskript

---

Installation und Start

npm install
bash scripts/setup-vendor.sh # lädt Three.js + Pyodide nach public/vendor/
npm start                   # startet den Server auf http://localhost:3000

Dann http://localhost:3000 im Browser öffnen (Chrome/Edge empfohlen). Für den Betrieb hinter einer Domain zusätzlich einen Reverse-Proxy mit TLS davorschalten (WebXR/VR benötigt HTTPS). Der Proxy muss auch WebSocket-Verbindungen weiterleiten.

Nutzung

1. Die lokal gestartete Anwendung oder die bereitgestellte Seite öffnen, einen Namen eingeben und eine Rolle wählen.
2. Mit WASD und Maus beziehungsweise den Pfeiltasten durch den Raum bewegen.
3. An einem freien Arbeitsplatz mit E hinsetzen, Python-Code eingeben und in der IDE ausführen. Beim ersten Aufruf muss Pyodide geladen werden.
4. Den Code anderer Teilnehmender auf den jeweiligen Monitoren betrachten, über den öffentlichen oder privaten Chat kommunizieren und bei Bedarf eine Hilfeanfrage stellen.

Bereitstellung und Einschränkungen

• Der aktuelle Stand ist auf ISA bereitgestellt. Der Node.js-Prozess läuft dort als systemd-Nutzerdienst programmierhub.service hinter einem Reverse-Proxy.
• Die vorhandene Rollenwahl ist keine authentifizierte Benutzerverwaltung.
• Die Steuerung ist auf Tastatur und Maus ausgelegt; die Smartphone-Verbindung belegt keine vollständige Touch-Bedienbarkeit.

Lizenz

Noch nicht festgelegt. © Stefan Franke, PH Weingarten.