Interaktives 3D im Webbrowser, mit VR? Jup.

itac6 · 20.08.2023

moin,
an dem Projekt arbeite ich schon länger (~2021). Es ist eine kleine Engine die auf threejs aufsetzt.
Hier ist mein Test-Set zu sehen:

https://a-d-k.de/vr/vr/index.htm
..wo Ihr ein bissel rum wandern und spielen könnt. (Was wohl die Blumenkanne bewirkt? Was kann mit dem Schraubenschlüssel gemacht werden?)

Ziel war es, einmöglichst hardwareunabhängiges System zu entwickeln. (und ich wolle meine eigenen Welten bewandern

)
Die Wahl fiel daher auf 3D im Webbrowser (WebGL), da ich auch in Javascript entwickle.
Alternativ standen auch Unity o.ä. im Raum - Vorteil: nativ, Nachteil: kein Entwickler im Team, nicht so plattformoffen (damals).

Das Ganze sollte auf gängigen VR-Brillen und auch ohne funktionieren - dies ist hier über den Webbrowser möglich.
Auch sind verschiedne Bewegstypen implementiert, z.B. kann man mit klick auf die Bodenpunkte springen oder per Tastatur WASD laufen.
Getestet habe ich Windows-mixed-reality-Brillen, Oculus Quest 2/Rift S, Pico3. Es sollte auf jedem Gerät mit WebGL-fähigem Webbrowser funktionieren (auch Smartphone - mit kleinen Einschränkungen).

Die Sets baue ich dabei mit Cinema4D auf; teilweise werden Elemente dynamisch erzeugt.
Ich benutze das Set, um verschiedene Dinge zu testen, z.B. Bodendetektion (für die Rampe), Sound, Shader, Fahrzeuge, ...
Benötigt habe ich das für verschiedene kommerzielle Projekte, zuletzt für ein Ausbildungsprogramm für angehende Mechatroniker (Artikel mit Foto). Wer sich als Mechatroniker in Schwerin ausbilden lässt, wird damit trainieren können.

Im Großen und Ganzen ein interessantes Feld. Ich bin gespannt, wo die Reise noch hingehen wird.

Viel Spaß beim ausprobieren.

edit: Instavideolinks entfernt

KBB · 20.08.2023

Hi itac

Sehr cool!
Ich hab zuletzt mit CopperCube WebGL gebastelt, aber Deine Shaderwelt gefällt mir schon gleich viel besser (die von CC ist für WebGL *sehr* eingeschränkt). Allerdings ist threeJS erstmal nix für mich, und die WASD-Steuerung hier ist ziemlich hakelig, zumindest auf meinem relativ neuen System. Hier muss ich mehrfach "Gas geben" um mit der Tastatur wegzukommen. Verglichen auch mit dem Flugsystem von CC, das bewegt sich ziemlich flott.
Unity/Unreal 4.27 wäre ne Alternative, würde ich dort je Collision+Kamera-Freiflug hinbekommen ^^. Das muss entweder sehr einfach oder sehr schwer sein. Die Freiflugkamera von CC funktioniert auf Anhieb sehr gut mit Coll.

Dein funktionales Set wirkt jedenfalls sehr umfangreich, und das Shading gefällt mir wie gesagt ziemlich gut. Color, Normal, Specularity .. ginge noch mehr, Spiegelungen?
Und sind das alles Snippets oder "Sprungstellen" im 3JS Code, oder musst Du jeden Shader schreiben? Vllt. gibts ja auch Editoren für 3JS, habe mir das lange nicht angeschaut. Ah, da ist ja gleich einer ^^

Edit: nochmal reingeschaut, Deine Szenerie hat was vom alten Myst

Gut, nicht zuletzt wegen dem Portal und weil alles so zum Ausprobieren rumliegt. Aber man merkt, dass Du da schon ziemlich gut drin bewandert bist.

itac6 · 20.08.2023

Danke für den Tipp zu CopperCube - kann das auch VR? Mittlerweile sind ja viele Engines und Tools auf den Markt gekommen.

Am Anfang habe ich noch mit A-Frame gearbeitet, jedoch traten Inkompatibilitäten auf, als die VR-3D-Schnittstelle der Browser geändert wurde (die war bis dato noch nicht im w3c-Standard).

"Leider" war ich mit meinen Projekten zu früh dran - da gab es kaum Tools. (Ich hatte zur Urzeiten auch mal was in Flash gebaut

).

Ich muss immer die Möglichkeit haben auch zu programmieren. Im Mechatronikerprogramm steckt z.B. eine Stromsimulation und Protokollfunktion zur Auswertung der Aufgaben enthalten.
Und ganz wichtig, die Projekte müssen unabhängig von "dritten Quellen" laufen. Deshalb habe ich z.B. das Handling mit den Controllern abgeändert und durch eigene lokale Modelle ersetzt.

Ja, man muss etwas länger drücken wenn man "laufen" möchte. Das ist so, damit man nicht gleich losläuft, wenn man nur einen Schritt machen möchte (Cursortasten gehen auch). Prinzipell häng das bei mir an dem Tastaturevent vom Browser (und wie das im System eingestellt ist) - es könnte jedoch je nach Anforderung anders gelöst oder angepasst werden.

Das Shading ist im großen Teil gebackene Texturen, gemalte Texturen oder Fotos. Da habe ich mittlerweile in den Jahren einiges gesammelt. WebGL-Shader ist nur das Wasser und die Karokugel (auch ein interessantes und umfangreiches Thema).
Licht&Schatten kommt dynamisch aus threejs.

Die Idee war das einmal in Cinema4D (oder ähnliche) zu bauen, zu exportieren und dann mit Funktion für VR zu verknüpfen. Letztendlich immernoch recht aufwändig...
Ich hatte mal ein Test mit Blender gemacht und ein Delphin gebaut und geriggt - das ließ sich auch imprortieren. Da ist noch Luft nach oben.

KBB · 20.08.2023

nee, ich glaub nicht dass CC VR kann, jedenfalls m.W. nicht mit WebGL, da ist das doch arg eingeschränkt.
Das Ding ist ein kostenfreies Hobbyprojekt vom Nikolaus (Gebhard, nicht der mit dem Säckchen ^^), der seinerzeit auch irrLicht entwickelt hat. Sagt Dir bestimmt auch noch was, oder?
Im Grunde ist CopperCube wohl ein abgespeckter, weiter entwickelter Teil der irrLicht Engine dahinter inkl. dem alten irrEditor, ebenfalls weiter entwickelt. Aber die alte Engine konnte m.E. noch mehr. vllt. vertue ich mich da auch.
CC ist jedenfalls per Script erweiterbar, wenn ich mich nicht irre, gerade mit JS. Gibt Leute die verdienen sich ein wenig Geld mit Addons, leider bisher keiner mit PBR-Materialien für die WebGL Enigne

Ui, dynamisches Licht? Das mal cool, dachte das ginge in WebGL nicht unbedingt.

itac6 · 20.08.2023

ja, von irrLicht hab ich schon gehört. Weiß jetzt aber nicht ob es diese Engine oder die Leute aus der Demo-Szene war...

ja, die Erweiterungsmöglichkeit mit Javascript habe ich gefunden.

VR ist das A und O bei meinen Projekten

Ja, ohne Licht kein Schatten . Man darf aber auch nicht zu viele Lichter einbauen, je nach Garät/Grafikkarte ist nach 6 Schluß mit lustig. Ich versuche nichtmehr als 2/3 zu benutzen - ein ambient-Licht eines für Sonne/Schatten, rest auf Textur gemalt. Klick mal auf die Lampe neben der Rakete

itac6 · 30.12.2023

Danke. Ja, das war ein willkommendes Thema um Schwung in die Sache zu behalten.

Ich hab meine Seite noch etwas aufgeräumt und unter https://a-d-k.de/vr/index.htm sind ein paar mehr Demos zum Thema 3D im Web mit WebGl (three.js) zu finden.