A-Frame – Erstelle WebVR

Open Source Schlagwörter: , , , 0 Kommentare

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!

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.

Verwandeln Sie Ihren Commerce mit AR und 3D-Produktvisualisierung!

Bei uns geht es um Techniken, die es schaffen, das Produkt zum Erlebnis zu machen. Virtual & Augmented Reality, 360 Grad-Videos, Darstellungen in 3D, virtuelle Showrooms. Die Besucher:innen sollen eintauchen in die Welt des Unternehmens mit immersiven Technologien.
Charakterdesign / Maskottchen

Sie können uns mit der Erstellung von individuellen 3D-Visualisierungen beauftragen. Jeder kann 3D-Visualisierungen bei unserem Kreativservice bestellen - unabhängig davon, ob Sie nur ein einzelnes 3D-Modell benötigen oder viele.

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
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 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/

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! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR - wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.

A-Frame – Erstelle WebVR 1

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 & 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!

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

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23
R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23