Die Mixed-Reality-Brille Microsoft HoloLens führt Windows

Transkript

1 HOLOJS Web goes HoloLens Wie Sie Mixed-Reality-Anwendungen mit Webtechnologien schreiben. Die Mixed-Reality-Brille Microsoft HoloLens führt Windows Mixed Reality aus, eine spezielle Ausgabe von Windows 10, die eine grafische Benutzeroberfläche für holografische Anwendungen bereitstellt. Selbstverständlich können darauf nahezu alle Anwendungen für die Universal Windows Platform (UWP) ausgeführt werden. 2D-Anwendungen werden dabei in einem Fensterrahmen dargestellt, der im Raum positioniert werden kann. Demgegenüber stehen dreidimensionale oder holografische Anwendungen. Diese können Hologramme bereitstellen, die neben anderen Objekten im Raum angeordnet werden (Mixed Reality Home) oder aber im Vollbildmodus (als Immersive- App) ausgeführt werden, bei dem alle übrigen Hologramme ausgeblendet werden [1]. Dieser Modus eignet sich etwa für Spiele. Eine der Eigenschaften von vermischter Realität oder Mixed Reality (siehe Kasten Virtual Reality, Augmented Reality, Mixed Reality) ist es, dass die Hologramme in die reale Umwelt eingebettet werden. Sie können mit realen Objekten kollidieren, zur Interaktion mit den Elementen muss man gegebenenfalls erst zu den Hologrammen im Raum laufen. Bild 1 zeigt solche Hologramme: Der Hund sitzt auf dem Stuhl, der Vogel auf dem Tisch. Beide Objekte bleiben an ihrer Position im Raum stehen. Man kann sich um sie herumbewegen. Windows-Store-Apps wurden von Beginn an mit der Möglichkeit ausgestattet, sie außer mit den.net-sprachen C#/ VB.NET und XAML auch mit HTML5 und JavaScript zu schreiben. Bei den Holographic Apps war das zunächst nicht der Fall: Microsoft empfiehlt zur Entwicklung dieser Anwen- $ $ Virtual Reality, Augmented Reality, Mixed Reality Auf dem Kopf getragene Datenbrillen interagieren auf verschiedene Weise mit der Realität. Es gibt die folgenden drei Varianten: Virtual Reality. Es wird eine virtuelle Realität geschaffen, die von der realen Außenwelt komplett abgeschottet ist. Ein Beispiel hierfür ist Oculus Rift. Der Anwender kann durch diese Brille nicht in die reale Welt schauen, sondern sieht ausschließlich die virtuelle Realität. Augmented Reality. Die Realität wird durch Zusatzinformationen angereichert. Dieser Ansatz wurde etwa durch Google Glass umgesetzt. Mixed Reality. Reelle Welt und virtuelle Realität werden vermischt. Objekte aus der virtuellen Realität können sich verhalten wie reale Objekte. Mixed Reality in HoloLens: virtuelle Objekte auf realen Gegenständen (Bild 1) dungen die Spiele-Engine Unity. Davon abgesehen ist es möglich, Anwendungen auch mit anderen Engines oder direkt auf DirectX 11 zu implementieren. Erst im Dezember 2016 wurde HoloJS veröffentlicht, ein Framework zur Entwicklung holografischer Anwendungen, die in JavaScript und WebGL implementiert werden. Der Vorteil von Webtechnologien wie JavaScript und WebGL besteht darin, dass auf Basis dieser Technologien entwickelte Anwendungen auf einer Vielzahl von Plattformen lauffähig sind: Neben dem Browser sind dies etwa alle relevanten Desktop- und Mobilbetriebssysteme. HoloJS lockt also damit, dass der Anwender mit der Mixed- Reality-Brille HoloLens in WebGL-Anwendungen, die im Browser lediglich auf dem zweidimensionalen Bildschirm laufen, eintauchen kann. Hält HoloJS dieses Versprechen? WebGL: 3D-Visualisierungen für das Web Die Web Graphics Library (WebGL) stellt eine JavaScript- Schnittstelle zum Rendern dreidimensionaler Inhalte im Webbrowser dar. Im Gegensatz zu vielen sonstigen Schnittstellen wird WebGL nicht vom World Wide Web Consortium (W3C) standardisiert, sondern von der Khronos Group, einem Non-Profit-Konsortium, das auch die Open Graphics Library (OpenGL) herausgibt. Daher verwundert es wenig, dass WebGL auf OpenGL for Embedded Systems (OpenGL ES) basiert. WebGL in Version 2.0 befindet sich derzeit in der Spezifikation und wurde auch schon von den ersten Browsern implementiert, darunter Firefox, Chrome und Safari. Die erste Fassung von WebGL ist unter Internet Explorer ab Version 11 sowie aktuellen Versionen von Edge, Firefox, Chrome und Safari lauffähig. 3D-Renderings mit WebGL können hard

2 $ $ Listing 1: Canvas-Element mit 2D-Kontext <!DOCTYPE html> <body> <canvas width="300" height="300" style="border: 1px solid gray;"></canvas> <script> const canvas = warebeschleunigt ausgeführt werden, was sich insbesondere auf Mobilgeräten bezahlt macht. Um WebGL im Browser zu verwenden, kommt das Canvas- Element zum Einsatz. Dieses stellt eine zweidimensionale Zeichenfläche zur Verfügung, auf die mithilfe von JavaScript gezeichnet werden kann. Auch hochauflösende Bildschirme (Retina) werden von diesem Element unterstützt. Zum Zeichnen auf der Bitmap bringt das Canvas-Element verschiedene Kontexte mit zum Beispiel den 2D-Kontext, der Hilfsmittel zum Zeichnen von Rechtecken, Linien, Kreisen oder Texten zur Verfügung stellt. document.queryselector('canvas'); const context = canvas.getcontext('2d'); context.beginpath(); context.rect(50, 25, 150, 200); context.fillstyle = 'red'; context.fill(); </script> </body> </html> Listing 1 zeigt die Verwendung des 2D-Kontexts des Canvas-Elements, in Bild 2 ist das Rendering im Browser zu sehen. Der zugehörige Kontext für ein 3D-Rendering lautet webgl beziehungsweise (für WebGL 2.0) webgl2. Für Internet Explorer und Edge muss experimental-webgl verwendet werden. Bibliotheken übernehmen das Abrufen des Kontexts jedoch meist für den Entwickler, sodass er diese Entscheidung nicht treffen muss. Die Bibliotheken existieren nicht ohne Grund: Natives WebGL ist sehr komplex, und selbst einfachste Visualisierungen bedeuten etliche Zeilen Code. Zur Vereinfachung der Entwicklung gibt es Bibliotheken, welche die Handhabung von WebGL deutlich erleichtern. WebGL eignet sich übrigens auch hervorragend zur Verwendung mit dem ebenfalls Cross-Plattform-fähigen Gamepad-API, das in dotnetpro 5/2017 vorgestellt wurde [3]. Soll die Darstellung animiert werden oder eine Benutzerinteraktion ermöglichen, wird eine Render-Schleife eingeführt. Hierbei kommt sowohl für 2D- als auch für 3D-Visualisierungen die Methode requestanimationframe zum Einsatz, die auf dem globalen window-objekt zur Verfügung gestellt wird. Diese Methode nimmt einen Callback entgegen, der zum nächstmöglichen Animationszeitpunkt aufgerufen wird. Die Wiederholrate entspricht dabei nach Möglichkeit der Bildschirmfrequenz; der Browser kann bei hoher Systemaus- Rendering des 2D- Beispiels (Bild 2) lastung aber auch Frames ausfallen lassen. Wird der Browser minimiert oder ist die Registerkarte inaktiv, unterbricht der Browser das Zeichnen. Somit kann über diese Methode Energie gespart werden, was sich insbesondere auf Mobilgeräten bemerkbar macht. Durch diese Eigenschaften grenzt sich requestanimationframe insbesondere von den Methoden set- Timeout oder setinterval ab, die in JavaScript üblicherweise für wiederkehrende Aufgaben verwendet werden. ANGLE oder: Mittler zwischen zwei Welten OpenGL unter Windows ist seit jeher ein leidiges Thema: Grafikkartentreiber müssen OpenGL explizit unterstützen und sogar deren komplette Schnittstelle implementieren. UWP-Apps bieten erst gar keine OpenGL-Schnittstelle an. Um Anwendungen mit WebGL auf Plattformen ohne native Unterstützung dennoch ausführen zu können, braucht es eine Zwischenschicht, die OpenGL-Aufrufe nach DirectX übersetzen kann. In dieses Problem sind die Browserhersteller bei der Implementierung von WebGL bereits gelaufen, weswegen es hierfür auch schon eine Lösung gibt: Sie heißt Almost Native Graphics Layer Engine (ANGLE), ein Open-Source- Projekt von Google [4]. ANGLE kann OpenGL-Aufrufe unter anderem nach Direct3D übersetzen, das wiederum unter Windows problemlos angesprochen werden kann. Microsoft bietet seinerseits einen Fork des ANGLE-Projekts an, um eine fast native Unterstützung von OpenGL für UWP-Apps, Anwendungen für Windows 8.1 und Windows Phone 8.1 sowie Microsoft HoloLens anbieten zu können. three.js 3D einfach gemacht three.js ist eine Open-Source-Bibliothek zum Implementieren von 3D-Visualisierungen in JavaScript. Sie bietet eine einfache High-Level-Schnittstelle mit weithin bekannten Konstrukten wie der Szene, Kameras, Lichtquellen und 3D- Objekten. Während die Bibliothek verschiedene Renderer unterstützt, etwa für Scalable Vector Graphics (SVG) oder CSS3-Animationen, so ist die Verwendung von WebGL im Hinblick auf den Reichtum an Features und Performance deutlich zu empfehlen. Auf der Website der Bibliothek [6] werden zudem verschiedene Beispiele und Referenzprojekte vorgestellt, die mit three.js umgesetzt wurden. In Bild 3 se

3 hen Sie ein solches Beispiel, das einen Schärfentiefe-Effekt zeigt, der beim Postprocessing hinzugefügt wurde [7]. Dieses Beispiel wird ohne ein Plug-in zu erfordern im Browser ausgeführt. Listing 2 zeigt, wie mit three.js und wenigen Zeilen Java- Script-Code eine einfache 3D-Visualisierung implementiert werden kann: Zunächst wird in Zeile 11 eine Szene eine Zusammenstellung virtueller Objekte erzeugt. Dieser Szene soll ein roter Quader hinzugefügt werden. Hierfür wird zunächst dessen Form definiert: eine CubeGeometry mit 15 x 30 x 12 Einheiten. Über die Position oder das Aussehen des Quaders wird an dieser Stelle noch keine Aussage getroffen. In der Folgezeile wird das Material spezifiziert: Es wird dabei das MeshLambertMaterial gewählt, das Licht reflektiert. Das Zielobjekt soll eine rötliche Farbe erhalten. Um beides zusammenzuführen, wird in der folgenden Zeile ein neues Mesh (Netz) erzeugt: Dieses stellt nun das 3D-Objekt dar, einen roten, Licht reflektierenden Quader. Um den Quader als solchen auch erkennen zu können, wird er noch etwas rotiert und in Zeile 17 zur Szene hinzugefügt. Da keine Positionsangabe erfolgt ist, wird das Objektzentrum am Ursprung angeordnet. Da der Quader ohne Licht nicht zu sehen wäre, wird ab Zeile 18 ein PointLight definiert, eine Lichtquelle, die in alle Richtungen strahlt vergleichbar mit der Sonne. Die Lichtquelle wird nun in z-richtung etwas vom Ursprung entfernt positioniert, sodass das Objekt von vorn bestrahlt wird, und schließlich ebenfalls der Szene hinzugefügt. Abschließend wird in Zeile 21 noch die Kamera definiert in diesem Fall eine perspektivische Kamera, deren Projektionseigenschaften dem menschlichen Auge nachempfunden sind. Letztlich wird auch die Kamera 50 Einheiten in Z-Richtung vom Ursprung entfernt positioniert, sodass sie das Objekt ganz erfassen kann. In Zeile 23 wird der WebGLRenderer erzeugt, der das bereits definierte Canvas-Element verwendet und dabei den three.js-beispiel (Bild 3) Zugriff auf den Canvas-Kontext abstrahiert. Zudem wird die Kantenglättung (antialias) aktiviert, sofern das Zielgerät diese unterstützt. Abschließend wird in Zeile 24 die Szene unter Verwendung der Kamera einmalig gerendert, also in eine zweidimensionale Darstellung überführt, die auf dem Bildschirm des Anwenders angezeigt werden kann. Es handelt sich dabei zugleich um den rechenintensivsten Schritt. Bild 4 zeigt das Rendering. 3D-Visualisierung in einem 2D-Fenster Selbstverständlich können in WebGL umgesetzte 3D-Visualisierungen auch auf Microsoft HoloLens zur Ausführung gebracht werden, da WebGL in Version 1.0 von Microsoft Edge unterstützt wird. Bild 5 zeigt das three.js-beispiel von oben, das hier auf HoloLens ausgeführt wird. Diese Darstellung ist allerdings lediglich zweidimensional das Edge-Fenster befindet sich neben dem Fenster des VLC-Players in seiner UWP-Fassung, wie sie im Windows Store angeboten wird. Schöner wäre es aber doch, wenn der Anwender direkt in die 3D-Szene eintauchen könnte da HoloLens die Realität $ $ Listing 2: 3D-Visualisierung mit three.js 01 <!DOCTYPE html> 06 <body> 07 <canvas width="300" height="300"></canvas> 08 <script src=" libs/three.js/85/three.min.js"></script> 09 <script> 10 const canvas = document.queryselector('canvas'); 11 const scene = new THREE.Scene(); 12 const geometry = new THREE.CubeGeometry( 15, 30, 12); 13 const material = new THREE. MeshLambertMaterial({ color: 0xff584f }); 14 const cube = new THREE.Mesh( geometry, material); 15 cube.rotation.x = 30 * Math.PI / 180; 16 cube.rotation.y = 60 * Math.PI / 180; 17 scene.add(cube); 18 const light = new THREE.PointLight(0xffffff); 19 light.position.set(0, 0, 50); 20 scene.add(light); 21 const camera = new THREE.PerspectiveCamera (45, 1, 1, 500); 22 camera.position.set(0, 0, 50); 23 const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); 24 renderer.render(scene, camera); 25 </script>

4 Rendering der 3D-Visuali sierung (Bild 4) MS Edge mit three.js-beispiel neben der VLC-App aus dem Windows Store (Bild 5) durch eine virtuelle (ebenfalls dreidimensionale) Realität anreichern kann. An dieser Stelle kommt HoloJS ins Spiel. HoloJS: WebGL zum Eintauchen HoloJS ist eine quelloffene C++-Bibliothek, die Microsofts Java Script-Engine Chakra mit der oben beschriebenen Übersetzungsschicht ANGLE verbindet und viele JavaScript- Funktionen dergestalt umbiegt, dass sie auf der Universal Windows Platform (UWP) respektive HoloLens lauffähig sind. Der Quelltext von HoloJS steht einschließlich zweier Beispielprojekte für natives WebGL und seit Januar 2017 auch für three.js auf GitHub bereit [8]. Das three.js-beispiel wird nachstehend beschrieben. Sie finden dieses Beispiel im Git- Hub-Repository im Pfad HoloJS/ThreeJSApp/Scripts. Verfügbar sind dort unter anderem die three.js-bibliothek sowie einige notwendige Polyfills, um die Anwendung starten zu können. Der Code zur 3D-Visualisierung steht in der Datei app.js und ist so gestaltet, dass er die Umgebung zu erkennen versucht: Läuft die Visualisierung in einem Browser, so findet das übliche Verhalten Anwendung. Erkennt der Code hingegen, dass er in HoloJS ausgeführt wird, so wechselt die Visualisierung zur Hologrammdarstellung. HoloJS stellt auf dem globalen Window-Objekt die Methode getviewmatrix bereit. Diese Methode gibt die sogenannte holografische Anzeigematrix zurück. Diese enthält die Posi tion sowie die Drehung der Kamera, deckungsgleich mit der Posi tion und der Drehung des Trägers der HoloLens. Listing 3 zeigt die Weichen im Code: In Zeile 1 wird abhängig vom Vorhandensein der Methode getviewmatrix entweder ein canvas3d-element erstellt dieses befindet sich nicht im HTML-Sprachumfang, sondern wird durch HoloJS bereitgestellt und entspricht dem Universum der Immersive- $ $ Listing 3: Umgebungsabhängiges three.js-beispiel (Auszug) 01 let canvas = document.createelement( window.getviewmatrix? 'canvas3d' : 'canvas'); 02 if (!window.getviewmatrix) { 03 document.body.appendchild(canvas); 04 document.body.style.margin = document.body.style.padding = 0; 05 canvas.style.width = canvas.style.height = "100%"; } 06 class HolographicCamera extends THREE.Camera { 07 // 08 update () { 09 this._holographicviewmatrix.elements.set( window.getviewmatrix()); 10 // } 11 } 12 let renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); 13 let scene = new THREE.Scene(); 14 let camera = window.getviewmatrix? new HolographicCamera() : new THREE.PerspectiveCamera(45, window.innerwidth / window.innerheight, 0.01, 1000); 15 // 16 let pointlight = new THREE.PointLight( 0xFFFFFF, 0.5); 17 // 18 let torus = new THREE.Mesh(initColors(new THREE.TorusKnotBufferGeometry(0.2, 0.02, 100, 100)), material.clone()); 19 // 20 torus.scale.set(1.5, 1.5, 1.5); 21 torus.material.color.set(0x00ff00); 22 torus.material.roughness = 0.5; 23 torus.material.metalness = 1.0; 24 //

5 three.js-szene im Browser (Bild 6) HoloJS-Demoszene von der Seite betrachtet (Bild 7) App oder das Canvas-Element, falls die Anwendung im Browser ausgeführt wird. Ist Letzteres der Fall, wird das Element noch in den Body des HTML-Dokuments eingehängt, in dem das Skript ausgeführt wird. Ab Zeile 6 ist die Definition der HolographicCamera zu sehen. Diese erweitert die von three.js bereitgestellte Basiskamera: Wird die Methode update aufgerufen, bezieht sie die holografische Anzeigematrix und aktualisiert im weiteren Verlauf ihre Position und Drehung entsprechend derjenigen des HoloLens-Trägers. In Zeile 14 wird abhängig vom Vorhandensein der Methode getviewmatrix entweder die oben definierte holografische Kamera verwendet oder im Browser die PerspectiveCamera, die schon weiter oben verwendet wurde. Der Rest des Skripts besteht unter anderem aus der Animationsschleife sowie der Definition der 3D-Objekte: So gibt es einen Kegel, einen Würfel mit einer Textur, eine Kugel und einen Torusknoten. Bild 6 zeigt die three.js-szene, wie sie im Browser dargestellt wird. Dasselbe Skript kann nun ohne Anpassung einer Codezeile auch auf der HoloLens verwendet werden, wie Bild 7 zeigt. Die Objekte bleiben an der Position fixiert, an der sie beim Start der HoloJS-Anwendung platziert werden. Der Anwender kann sich nun beliebig um die Objekte herumbewegen und die Szene etwa von der Seite ansehen. Gibt es da auch ein aber? HoloJS hört sich wirklich praktisch und vielversprechend an doch es gibt ein paar Haken: Der Pull-Request, der three.js- Unterstützung in HoloJS brachte, ist nicht umsonst mit Basic three.js support betitelt [9]. Hologramme sehen in HoloJS mit three.js weniger hochauflösend aus als andere Hologramme. Zudem fühlen sie sich nicht so flüssig an weder hinsichtlich ihrer Animation noch ihrer Stabilität im Raum. Weiterhin können HoloJS-Hologramme derzeit nicht über den Livestream der HoloLens demonstriert werden und sind daher nur für den Benutzer der Mixed-Reality-Brille sichtbar. Das Debugging erweist sich als schwierig, nicht alle Web- GL-Features können genutzt werden. Bei Verwendung einer nicht unterstützten Funktion verschwindet die komplette Szene. Zudem sind viele GitHub-Issues offen, die teilweise seit einigen Monaten unbearbeitet sind. Fazit HoloJS eröffnet spannende Möglichkeiten: Unter Verwendung einer einzigen Codebasis können mit WebGL schon heute Browser, Mobilgeräte und Desktop-Plattformen bedient werden. three.js vereinfacht die Entwicklung durch die Bereitstellung einfacher Konstrukte. HoloJS kann genau diese Codebasis mit wenigen Anpassungen auch noch in die holografische Welt bringen: Das wäre Cross-Plattform auf der nächsten Ebene. Für den Moment erweist sich HoloJS und besonders das three.js-binding allerdings noch als zu instabil. Für produktive Einsätze sollte HoloJS derzeit nicht verwendet werden. Die Richtung, die HoloJS weist, ist hingegen hochspannend, und sie deutet einmal mehr auf die zunehmende Bedeutung moderner Webtechnologien hin. [1] Mixed Reality App Model, [2] Microsoft empfiehlt Unity, [3] Christian Liebel, Das HTML5 Gamepad API, Die letzten Grenzen sprengen, dotnetpro 5/2017, Seite 72 ff., [4] Projekt ANGLE (Google), [5] Projekt ANGLE (Microsoft), [6] three.js, [7] three.js-beispiel, [8] HoloJS auf Github, [9] Basic three.js support, Christian Liebel arbeitet als Softwarearchitekt bei Thinktecture, wo er Cross-Platform-Apps mit HTML5 und Java Script entwickelt. Sein Handwerk hat er mit Microsoft-Technologien gelernt und er wurde als Microsoft MVP dnpcode A1709HoloJS