Oculus Rift + Google Cardboard [JS]

Hey,
Ich bin zur Zeit dabei mich mit dem Thema Virtuelle Realitäten zu beschäftigen.. dazu gehören unter anderem auch die Oculus Rift und Google Cardboard.
Die beiden Dinge kennt sicher jeder hier - falls nicht, Googelt bitte selbst :rolleyes:

Nun gibt es einige Dinge die mir aufgefallen sind:

- Oculus Rift -> Teuer & die Consumer Version ist noch nicht verfügbar -> Doof (kommt erst 2016 ca.. solang muss ich warten).
- Google Cardboard -> Günstig & jedoch nur Schrott Apps im Google Store die nicht wirklich gut sind -> Doof

Was macht man also? Genau.. man bekommt mitten in der Nacht die geniale Idee "Wieso verschmelze ich nicht Oculus Rift Spiele für den PC mit dem Android Cardboard und baue mir damit nen Ultra Cheap Oculus Rift?.." :highly_amused:

Gesagt getan.. Ich habe heute mit dem Projekt begonnen, hier mal eine Konzept Zeichnung wie das ganze gemacht werden wird.


http://i.imgur.com/fOL4l5G.png


Projektbeschreibung:
In Javascript lassen sich die Gyroscope Daten von Smartphones auslesen. Diese Gyroscopedaten werden nun (Im Lokalen Netz) über Javascript an einen Java-Server geschickt.
Dort werden die Gyroscope Daten benutzt um die Oculus Rift Games zu steuern (Hoch / Runter blicken, die Sicht ausrichten wenn man sich Physisch dreht etc).
Die Lauf-Steuerung der Games werde ich weiterhin wahrscheinlich über W,A,S,D lösen.. jenachdem was für ein Spiel es dann halt sein wird.
Das Smartphone selbst wird in ein Google Cardboard geklemmt, so das es als Oculus-Rift Ersatz benutzt werden kann.
Das eigendliche Bild das man anschließend dann auf dem Smartphone sehen soll, wird dann über Java aus dem Screencapture ausgeschnitten, in Base64 Konvertiert und über den Java Server an den Javascript-Part der auf dem Smartphone läuft gesendet.

Da ich jedoch noch nicht 100% sicher bin ob das ganze Ruckelfrei funktionieren wird und was am besten funktionieren wird (Ajax, HTML5 Videostreaming o.ä), kann
ich hier noch keine genaue Details nennen - das wird erst im laufe der Entwicklung dann entschieden. Backup-Plan falls das ganze nicht funktionieren sollte wie geplant (Lags o.ä)
ist übrigens dann die Eigenentwicklung von HTML5 Cardboard Games. Da habe ich dann schon die Grundlegende Basis (Gyroscope, Canvas etc) und es stellt eine machbare Alternative dar.

Funktioniert bereits:
- Gyroscope am Smartphone auslesen & auf Computer in der Console anzeigen
- Compass Funktion in der HTML Webseite zur Orientierung & Debugging Zwecken

Todo:
- Übertragung & Anzeigen der Bilder
- Steuerung der Maus (Pitch, Yaw usw Ingame)

Smartphone-Part (Bis jetzt):
http://i.imgur.com/i2nnZ2b.png

Die Gyroscope Daten (alpha, beta, gamma) werden an meinen Java Server der auf meinem Computer läuft geschickt, und dort angezeigt.
Zusätzlich lasse ich mir auf dem Smartphone selbst den Alpha Wert anzeigen was sogesehen die Ausrichtung zum Nordpol darstellt.
Alpha ist 0 oder 360 = Smartphone Richtung Norden ausgerichtet.

Ich werde euch dann jeweils hier im Thread über meine Fortschritte auf dem laufenden halten und wenn ich das ganze brauchbar fertig bekomme auch hier veröffentlichen (Sources) :pirate:

Zum testen stehen mir ein Samsung Galaxy S3 mini (Rooted) und ein Iphone 4 zur Verfügung.

Übrigens, falls sich jemand frägt "Wieso Html5+Javascript und keine Normale Android App?" ->

1) Ich finde Javascript einfach tierisch Geil :redface:
2) Ich habe zur Zeit keine Möglichkeit Android Apps zu entwickeln (aka ich kenne mich damit zu wenig aus)
3) Funktioniert das ganze dann unabhängig vom Smartphone (Iphone, Android, Windows Phone usw usf) solange die gängigen Gyroscope Schnittstellen + Canvas / WebGL im Browser verfügbar sind.

Daher klare Vorteile für HTML5+Javascript finde ich.
Später kann man dann sollte es funktionieren immer noch ja ne normale Android App basteln die dann vllt auch nen PC Treiber hat der das ganze wie bei der Oculus Rift Display-Mäßig umbiegt o.ä :rolleyes:

Ansonsten würde ich mich über Feedback zur Idee, Verbesserungsvorschläge und Tipps freuen ;)
Und ja, ich weiß.. das Projekt ist ziemlich Crazy - Aber das ist der Sinn von Projekten finde ich.. Neuland erforschen & Proof Concepten :pirate:

grüße

Hört sich nach einem sehr geilen Projekt an :) Warte gespannt auf deine zukünftigen Updates.

Viele Grüße,

~H4wk

Hmm ich glaube sowas gibt es schon, oder irre ich mich?

https://play.google.com/store/apps/d...ai.trinus.full

Zitat:

---

Zitat von levis

Hmm ich glaube sowas gibt es schon, oder irre ich mich?

https://play.google.com/store/apps/d...ai.trinus.full

---

Sieht nach dem aus was ich vorhabe ja, nur ist das ganze schon ne Android App & nicht in Html5+JS gelöst.
Trotzdessen werde ich dennoch weiter machen ;) Finde die Idee tierisch spannend & möchte es gerne umsetzen.

grüße

Hört sich spannend an mach aufjedenfall weiter mit gefällt der ansatz das mit H5 und Js lösen zu wollen. Halt uns auf dem laufenden.. wie siehts aus hast du vor darauß ein github projekt zu machen oder ähnliches ? Würde mir das ganze gerne anschauen ggf helfen/mitmachen.

Ich hab mir ne Kinect Kamera geholt und arbeite mich gerade dort in die Materie ein (gibt ziemlich geiles buch dafür) jedenfalls seh ich da verdammt viel kombinations Potential.

Zitat:

---

Zitat von BlackRiddig

Hört sich spannend an mach aufjedenfall weiter mit gefällt der ansatz das mit H5 und Js lösen zu wollen. Halt uns auf dem laufenden.. wie siehts aus hast du vor darauß ein github projekt zu machen oder ähnliches ? Würde mir das ganze gerne anschauen ggf helfen/mitmachen.

Ich hab mir ne Kinect Kamera geholt und arbeite mich gerade dort in die Materie ein (gibt ziemlich geiles buch dafür) jedenfalls seh ich da verdammt viel kombinations Potential.

---

Ich habe mich da bisher noch nicht so wirklich mit Github & Gruppenprojekte beschäftigt, aber wenn ich mal eine Grundlegende Sourcecode Basis habe kann ich das ganze gerne auf Github packen.
Mein Problem derzeit ist jedoch das mein Ansatz zum übertragen der Bild momentan nicht wirklich klappt.

Mein Ansatz / Idee war folgende:

1) Bild aufnehmen (z.b von Koordinate 200,200 in ner bestimmten Größe)
2) Bild in Base64 kodieren
3) Base64 String von Java Server an Html senden
4) Base64 String in nen Image Objekt ins Src packen

Jedoch happert es da noch an einigen Stellen, unteranderem daran das meine Vorgehensweise nicht geklappt hat.
Ich wollte es direkt als Base64 ins Image Objekt einbinden können, jetzt muss ich jedoch einen umständiglichen Umweg gehen indem ich mein
Java Server nen Fake-Javascript erzeugen lasse wo eine Variable definiert ist mit dem Base64-Bild drine.. anschließend pack ichs dann ins Image Objekt.
Das ganze sorgt dann leider (am Desktop Browser) für einen Lag der geschätzt 1/2 bis 1 Sekunde dauert.

Mein Kernproblem zur Zeit ist, das Javascript ja kein wirklichen Socket unterstützt, sondern nur WebSocket oder Ajax.
Ajax klappt nicht so recht mit meinem Java-Server, und zum übertragen von Bildern ist es auch eher mehr schlecht als recht finde ich.
Und für WebSocket bräuchte ich wieder spezielle Libs oder müsste es selbst implentieren / kompliziert umcoden.
Ich muss mir daher mal anschauen wie ich das am besten löse, so das es zum einen nicht komplett Schlampig wird, und zum andern
möglichst keinen größeren Lag gibt.

Habe derzeit noch keinen Cardboard weswegen ich das ganze nur so auf dem Smartphone testen kann, aber ich vermute das es einem übelst
schlecht werden wird wenn es da einen größeren Lag gibt beim bewegen des Kopfes.. und das möchte ich möglichst vermeiden.

Werde euch da definitiv auf dem laufendem halten^-^

grüße

Hört sich nach einer interessanten idee an. Ich habe mich mit dem Thema auch schon etwas auseinander gesetzt (zumindest hab ich mal mit nem Kumpel rumprobiert)
Wir hatten aber den eindruck das oft Latenz (sobald es zu geringer verzögerung kommt wird das spielen schnell anstrengend) das größte Problem bei den meisten Apps war.
So musste meist die qualität zugunsten der Latenz leiden.
Ich glaube der ausschlagebende unterschied zur Occulus liegt darin, dass sie an den PC angeschlossen und direkt erkannt wird.(ist doch so oder? ich hatte leider noch keine Occulus zum testen^^)
Ist es nicht möglich das Handy via displayport mit dem Rechner zu verbinden und so Daten direkt auszutauschen, anstatt über einen Server zu gehen?
Übrigens müssten schon ende 2015 mehrere VR-Brillen erscheinen wenn ich mich nicht irre z.B Vive?(von Valve und HTC)

Zitat:

---

Zitat von haxor112

Hört sich nach einer interessanten idee an. Ich habe mich mit dem Thema auch schon etwas auseinander gesetzt (zumindest hab ich mal mit nem Kumpel rumprobiert)
Wir hatten aber den eindruck das oft Latenz (sobald es zu geringer verzögerung kommt wird das spielen schnell anstrengend) das größte Problem bei den meisten Apps war.
So musste meist die qualität zugunsten der Latenz leiden.
Ich glaube der ausschlagebende unterschied zur Occulus liegt darin, dass sie an den PC angeschlossen und direkt erkannt wird.(ist doch so oder? ich hatte leider noch keine Occulus zum testen^^)
Ist es nicht möglich das Handy via displayport mit dem Rechner zu verbinden und so Daten direkt auszutauschen, anstatt über einen Server zu gehen?
Übrigens müssten schon ende 2015 mehrere VR-Brillen erscheinen wenn ich mich nicht irre z.B Vive?(von Valve und HTC)

---

Jop, die Oculus Rift wird direkt an den Computer per Kabel angeschlossen - was für ein Kabel genau das ist weiß ich nicht, soll aber wohl ähnlich wie ein 2. Bildschirm funktionieren wie ich gehört habe.
Man kann bei Android scheinbar über USB Kabel Daten senden ja, es würde hierbei jedoch keine Unterstützung für HTML & Javascript geben. Und der Browser-Aspekt ist bei dem Projekt der wichtigste Punkt weswegen ich das ganze mache^^ Quasi Plug & Play ohne das man irgendwas umständlich installieren muss oder auf spezielle Betriebsystem limitiert ist.

Ansonsten jop - es sollen schon mehrere Brillen erscheinen, aber wenn ich mir die so anschaue find ich die nicht wirklich so reizvoll.
Die Brille von Valve soll jedoch ganz gut sein, aber da muss man erstmal wirklich Demos o.ä sehen um sich ne Meinung machen zu können finde ich.
Bisher gabs da ja nur Berichte auf Youtube & co. wie toll die Demos wirkten usw.. aber die waren halt so abgestimmt das du im Raum umherläufst.
Glaube sogar das die Vive(?) die gleichen Displays wie die Oculus Rift Consumer Version nehmen (2 Bildschirme, jeweils 1 für ein Auge).
Die Frage bei den ganzen Brillen wird denke ich sein - wie offen werden die sein? Bei der Oculus Rift weiß man "jop da kann man geiles Zeug mit basteln", aber bei den andern Brillen.. weiß nicht so Recht ob die da keine Limitierungen reinbauen werden. Man hatte ja bei der Übername der Oculus von Facebook sogar bedenken ob Facebook da nicht Unsinn mit anstellt (Werbung in 3d Welten, Vmit FB Account einloggen müssen usw).. hatte sich ja zum Glück dann als falsch rausgestellt (hoffen wirs ;)) .

Von daher finde ich die Idee von so einem kleinem "eigenen Projekt" ziemlich kewl - da habe nämlich ICH die Kontrolle über alles :redface:

Projektstand:

BlackRiddig hatte mir socket.io empfohlen / gezeigt und ich habe mir das ganze mal gestern näher angeschaut.
Ich bin mit node.js allein schon soweit gekommen das ich Java nur noch benötige um die Screenshots zu machen.. das ist schon einmal ziemlich cool.
Das Problem was mir nun jedoch entgegensteht ist, das scheinbar das Bild im Browser nicht aktualisiert wird da der Browser
denkt "Das Bild hab ich noch im Cache :o!" und somit nicht frisch läd. Ich arbeite momentan noch mit einem normalen Bild-Objekt, werde
das ganze aber wohl auf Canvas umbasteln - dort dürfte es dann hoffendlich keine Probleme geben mit dem Browser Caching.
Werde jetzt diverse Ansätze ausprobieren die ich habe, und schauen was das beste ist - danke nochmals für Tipps & Anregungen.

p.s: Habe zur Zeit am Daumen ziemliche Schmerzen, kp weshalb.. ist nur ziemlich kacke zum Scripten - hoffe das geht bald wieder weg :/

grüße

Update (29.05.2015) :

Ich habe mich nun etwas mit socket.io & node.js befasst und einen ersten Prototypen gebastelt.
Ich erstelle hierbei mit Java einen Screenshot von einem bestimmten Bereich auf dem Desktop und speichere ihn als Base64 String in einer Textdatei.
Anschließend habe ich ein Script was im Browser in nem Loop ständig vom socket.io Server diesen Base64 String anfordert.
Der Base64 String wird dann in ein Image() Objekt gepackt und anschließend auf das (Fullscreen) Canvas gezeichnet.
Das ganze funktioniert bisher schon ganz gut, nur leider lagt es. Wie groß dieser Lag ist, ist davon abhängig,
wie stark die Wifi Verbindung des Smartphones ist. Ich habe hier Zuhause leider nur ein Internetanschluss der von einer Fritzbox aus zu nem
Wifi-Repeater läuft und erst dann zu meinem Computer & Smartphone.. es könnte also gut sein das der Lag daran liegt das hier noch ein
zusätzlicher delay reinkommt.

Ich werde nun den Code mal etwas aufräumen, noch etwas rumprobieren um eventuell noch Optimierungen einzubauen und dann werde ich das ganze
erstmal auf Github packen damit ihr euch das anschauen könnt. Eventuell hat dann ja noch jemand Ideen wie man noch mehr rausholen könnte.
Zudem finde ich die Lösung mit Java für den Screenshot noch nicht wirklich ideal, daher schaue ich ob ich das noch irgendwie anders lösen kann.

Bisher Implentiert:

- Cross-Browser Fullscreen (u.a https://developer.mozilla.org/de/doc...uestFullscreen )
- Socket.io & Node.js Kommunkation
- Screenshot machen -> zu Base64 konvertieren -> in Text Datei packen
- Base64 String -> in Image() packen -> Bild auf das Canvas zeichnen
- Render-Loop zum rendern der Bilder

Kurz gesagt? Man sieht am Smartphone "relativ flüssig" was am Desktop geschieht.. ähnlich wie Beispielweise bei Teamviewer & co.
Nur stören die Lags noch und müssen beseitigt werden.

Todo:

- Versuchen Lags in den griff zu bekommen
- Steuerung der Blickrichtung in Spielen über Gyroscope implentieren
- Cardboard kaufen damit ich das ganze mal unter Realen Bedingungen testen kann

Sofern es neues gibt, werd ichs dann nochmals hier posten :pirate:
Github Link gibts dann sobald ich den Code etwas aufgeräumt habe.

Kleine Update:

Das Projekt ist etwas ins liegen geraten, ich werde es aber nächste Woche spätestens wieder weiterführen wenn ich ein Auftrag abgearbeitet habe.
Gestern ist endlich per Post meine Virtual Reality Brille aus Plastik angekommen wo ich mein Smartphone einlegen kann, so kann ich das ganze jetzt auch
real testen um zu sehen wie sich alles mit der Latenz etc. auswirkt (Übelkeit usw.).

Dabei handelt es sich um folgendes : http://www.amazon.de/gp/product/B00R9EIJGC

Ich habe es gestern schon reichlich testen können und hier möchte ich euch gerne mal ein kurzen Bericht posten wie das ganze so ist.


Positiv:

- Bisher habe ich keine Motion Sickness gehabt. Ich fühle keine Übelkeit oder sonstiges wovon andere Leute berichten

- Es ist cool mit der Brille sich in einer Virtuellen Umgebung umschauen zu können.
Das wirkt bisschen als hätte man ein kleines Fenster das man bewegen kann, durch das man in eine andere Welt glubschen kann :rolleyes:

- Es ist möglich die Brille im Verbund mit dem Smartphone als extrem Cheap Oculus Rift zu verwenden.
Man kann Games und Demos die ohne "Direct to Oculus" Funktion laufen auch auf dieser Brille zocken.
Es gibt hier das Programm "Trinus VR" das ganz gut funktioniert. Die Lantenz ist hier sehr gering wenn man Computer und Smartphone über USB Tethering verbindet.
Über Wifi ist es leider ziemlich unerträglich.. der Delay zwischen der Bewegung Ingame und dem eigendlichem Anzeigen auf der Brille ist zu hoch als das man da gescheit zocken kann.
Man muss aber eins anmerken.. Es macht nicht sonderlich Fun damit Computer Games zu zocken weil es immer wirkt als hätte man nur ein kleines Fenster vor dem Gesicht.. nicht als wäre man wirklich "In der Welt". Da dürfte die Oculus wesentlich besser funktionieren dank größerem Display (Mein Handy = zu kleines Display).

Negativ:

- Man schwitzt wie Sau unter diesem Ding
- Nach absetzen hat man noch geschätzt 30 Minuten danach das Gefühl man hätte eine Unsichtbare Brille auf
- Die Brille drückt wie Sau weil an der Stelle wo die Nase ist am Schaumstoff gespart wurde..
- Man sieht die Pixel wie son Fliegengitter. Das ist ziemlich störend (Texte nicht lesbar usw), liegt aber leider an meinem Smartphone & Display.
- Details wie Gesichter erkennt man z.b garnicht wirklich. Man sieht zwar "Das ist ein Weibliches Gesicht", aber das wars auch schon großteils.
Dinge die weiter weg als 2 Meter (Ingame) sind, sind von der Detailsschärfe enorm krass undetailiert. Bei Gesichtern erkennt man nicht einmal mehr
welchen Gesichtsausdurck die Person hat.

Im großen und ganzen werde ich mal schauen das ich den Lag so gut es geht reduziere über Wifi, zur Not muss ich dann halt eventuell eine Art Trinius VR Clonse coden das dann über USB Tethering läuft (oder es ganz sein lassen :( ). Ich bezweifle aber das ich das über Javascript hinbekommen werde, ich muss mir hier mal anschauen welche Möglichkeiten mir bereitstehen.

Hätte da zwar ne Idee wie ich das mit dem Usb eventuell lösen könnte ( http://i.imgur.com/IeJV06p.png ), aber dann könnte ich theoretisch auch komplett alles mit einer App lösen ohne HTML5 & JS zu nutzen.. hmm.

grüße

Wär cool wenn man eine Alpha version bekommen könnte sobalt etwas ansatzweise funktioniert... Hab ein Cardboard und wrüde gern testen.