A-Frame – Erstelle WebVR

Alle Welt spricht von Virtual Reality. Jetzt, da VR-Brillen marktreif und erschwinglich geworden sind und jedes Smartphone Zugang zu virtuellen Räumen ermöglicht, fragt sich eine breite Masse: Ist VR eine Revolution? Wie verändert es unser Leben? Kreative ebenso wie Unternehmen haben längst begonnen, in die neuen Sphären einzutauchen und sie zu erkunden.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels "A-Frame – Erstelle WebVR" schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Download PDF

Mit A-Frame hat Mozilla ein Open-Source Framework entworfen, dass die Entwicklung von geräteübergreifenden VR Erlebnissen sehr einfach macht. Der Einsteig in das Framework ist dabei schon mit simplen HTML Kenntnissen möglich.

Dieser r23Artikel zeigt dir die Quellen und Werkzeug für Forgeschrittene.

Kevin Ngo (virtual reality developer at mozilla) bloggt auf https://aframe.io/blog/

Sehr umfangreich ist auch die Liste im awesome-aframe Repository auf GitHub. Diese Auflistung wird regelmäßig gepflegt und mit den besten Ressourcen — Artikel, Videos, Komponenten, etc. — zu A-Frame gespickt.

Beispiel für Virtual Reality First Website

Screenshot von der A-Frame-Website

Die beste Anlaufstelle für A-Frame ist die umfangreiche Dokumenation des Projeks.

React (Framework von Facebook)

Du kannst das A-Frame auch in Kombination mit React verwenden.

Was ist React?

React ist ein JavaScript-Webframework, das ein Grundgerüst für die Ausgabe von User-Interface-Komponenten in HTML bildet. Komponenten werden in React hierarchisch aufgebaut und in dessen Syntax als selbst definierte HTML-Tags repräsentiert. Das Modell von React verspricht durch die Konzepte des unidirektionalen Datenflusses und des "Virtual Dom" den einfachen, aber trotzdem performanten Aufbau auch komplexer Anwendungen. React bildet typischerweise die Basis für Single-Page-Webanwendungen, kann jedoch auch mittels Node.js serverseitig gerendert werden.

Virtual DOM und DOM-Diffing

Die Kernidee von React besteht in der Annahme, dass der komplette der betroffenen Komponente untergeordnete Anwendungsbaum bei jeder Änderung einer Eigenschaft der Komponente neu aufgebaut wird. Da es in der Praxis performanceintensiv sein kann, dies z. B. im Webbrowser innerhalb des DOM durchzuführen, wurde das Konzept des "Virtual DOM" geschaffen. Die damit verbundene Technik des "DOM-Diffing" beschreibt das selektive Aktualisieren des DOM auf Basis eines Vergleichs zwischen ursprünglichem und geänderten Virtual DOM.

Als Beispiel kann ein Entwickler bei einer Messaging-Anwendung in einer Inbox davon ausgehen, dass die Auflistung aller Nachrichten und der untenstehende Zähler der Nachrichtenanzahl bei jeder neuen Nachricht komplett neu aufgebaut werden. Das DOM-Diffing sorgt in diesem Fall dafür, dass lediglich die veränderten Teile (in diesem Fall das Ergänzen der neuen Nachricht und das Aktualisieren des Zählers) im DOM aktualisiert werden.

Quelle: Wikipedia

https://facebook.github.io/react/

Beispiel von Kevin Ngo von Kombination A-Frame mit React
http://ngokevin.com/blog/aframe/

WebStorm

WebStorm ist eine integrierte Entwicklungsumgebung (IDE) der Firma JetBrains für die Programmiersprache JavaScript. Darüber hinaus unterstützt WebStorm HTML5, Node.js, Bootstrap, AngularJS, TypeScript, PhoneGap/Cordova, Dart und viele weitere Techniken, und wird daher vorwiegend zur Entwicklung von webbasierten Mobile Apps eingesetzt. WebStorm basiert auf der IntelliJ IDEA der Firma JetBrains, stellt jedoch die auf JavaScript-spezialisierte Version dar.

Der Funktionsumfang kann mittels Plug-ins erweitert werden, die teils von JetBrains, teils von der Community entwickelt werden.

Wie auch bei anderen IDEs der Firma JetBrains stehen eine minimalisierte Benutzeroberfläche, schnelles Startverhalten, Refactoring-Funktionalitäten, intelligentes Code- und Syntax-Highlighting, Unit Tests, Tools zur Versionskontrolle sowie vielfältige Möglichkeiten zum automatischen Erstellen von Code zur Verfügung.

https://www.jetbrains.com/

Modellierungstools

SketchUp

SketchUp ist eine Software zur Erstellung von dreidimensionalen Modellen. Der Name spielt wegen der schnellen Arbeitsweise auf die Handskizze an.

Die freie SketchUp-Make-Version ist für den nicht-kommerziellen Einsatz durch Privatanwender kostenlos verfügbar, die kommerzielle Pro-Version beinhaltet erweiterte Funktionalitäten wie konfigurierbare Linienstile, Terrain-Modellierung, erweiterte Volumen-Werkzeuge, hochauflösende Raster-Schnittstellen und zusätzliche Vektor-Schnittstellen für einen Datenaustausch mit CAD-Systemen. SketchUp ist auch für Bühnenbild- und Leveldesign (Flugsimulationen bzw. 3D-Spiele) geeignet. Mit entsprechenden Plug-ins können Modelle auch in diverse von Spiel-Engines unterstützte Formate konvertiert werden. Allerdings kann SketchUp als Drahtgittermodellierer keinen vollwertigen 3D-Modellierer ersetzen, da wichtige Funktionen für die Gestaltung komplexer Freiform-Flächen und Volumen-Körpern oder eine Konstruktionshistorie fehlen.
http://www.sketchup.com/de

Magica Voxel

Anleitung https://aframe.io/docs/0.3.0/guides/building-with-magicavoxel.html

Blender

Blender ermöglicht Modellierung, Animation, Bildsynthese und Bildbearbeitung, ohne ein weiteres Programm herbeizuziehen. Dies wird, in aller Kürze, durch seine dynamische Benutzer-Oberfläche, welche sich flexibel an die Aufgabe, die mit dem Programme erledigt werden soll anpassen lässt, die unterschiedlichen Objekttypen (Polygonnetze, Bézierkurven, NURBS-Oberflächen, Metaball-, Text-, Empty-, Lattice-, Armature-, und Lamobjekte), die große Zahl an Modifikatoren, Polygonnetz-Bearbeitung und Sculpting-Werkzeuge, das umfangreiche Material-Nodesystem, in welchem die Eigenschaften der Materialien mit Hilfe von Shadern, welche sich durch Werte und Texturen beeinflussen lassen, die Keyframing-Funktionen und die Werkzeuge zur Postproduktion ermöglicht. Blender verfügt über zwei interne Rendering-Engines: den traditionellen "Blender Renderer" und den neueren Cycles Renderer, der u. a. auch Raytracing unterstützt,

https://www.blender.org/

• Geometrien: Procedural geometries, Bitmap font text, terrains, oceans, und grids.
• Materialien: GIF, HTML, cubemaps, stereo cubemaps, and Video-Steuerelemente.
• Sonstiges: Leap Motion Steuerungen, Vive Steuerungen, AltSpaceVR Integration, glTF, und particle systems.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Egal ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.

Bitte dieses Feld leer lassen

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & Augmented Reality interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

E-Mail-Adresse *

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Prüfe deinen Posteingang oder Spam-Ordner, um dein Abonnement zu bestätigen.