Metaverse Experience im MyOOS Projekt

Freitags veröffentlichen wir zurzeit unsere aktuelle MyOOS Version. An diesem Freitag liegt dem Projekt der VR-Raum bei. Selbstverständlich noch nicht fertig und überhaupt mehr Baustelle als Erlebnisraum. Aber das MyOOS Konzept wird bereits deutlich.

Was sind die Vorteile von einem immersiven Showroom im VR-Commerce?

Ein Immersive-Service-Showroom im VR-Commerce kann für einen Shopbetreiber verschiedene Vorteile bieten, darunter:

• Bessere Kundenbindung: Durch die Möglichkeit, Produkte in einer virtuellen Umgebung zu erleben, können Kunden ein besseres Gefühl für die Produkte bekommen und sich stärker mit dem Unternehmen verbunden fühlen.
• Erhöhte Sichtbarkeit: Ein Immersive-Service-Showroom kann dazu beitragen, die Sichtbarkeit des Online-Shops zu erhöhen, da es eine innovative und ansprechende Möglichkeit bietet, Produkte zu präsentieren.
• Effektiveres Marketing: Ein Immersive-Service-Showroom kann dazu beitragen, dass Marketingkampagnen effektiver sind, da Kunden die Produkte in einer realistischen Umgebung erleben können.
• Höhere Konversionsraten: Durch die Möglichkeit, Produkte in einer virtuellen Umgebung zu erleben, können Kunden eine bessere Kaufentscheidung treffen und die Konversionsraten können erhöht werden.

Es ist wichtig zu beachten, dass die Implementierung eines Immersive-Service-Showrooms im VR-Commerce eine komplexe und kostspielige Angelegenheit sein kann.

Welche Möglichkeiten bietet ein immservicen Showroom im VR-Commerce für die Präsentation von Produkten

Ein Immersive-Service-Showroom im VR-Commerce bietet verschiedene Möglichkeiten für die Präsentation von Produkten, darunter:

• Virtuelle Produktpräsentation: Ein Immersive-Service-Showroom ermöglicht es Kunden, Produkte in einer virtuellen Umgebung zu erleben und zu präsentieren. Dies kann dazu beitragen, dass Kunden ein besseres Gefühl für die Produkte bekommen und sich stärker mit dem Unternehmen verbunden fühlen.
• Interaktive Produktpräsentation: Ein Immersive-Service-Showroom kann interaktive Funktionen wie 3D-Modelle, Animationen und Videos enthalten, um Kunden ein besseres Verständnis der Produkte zu vermitteln und sie zu engagieren.
• Personalisierte Produktpräsentation: Ein Immersive-Service-Showroom kann personalisierte Funktionen enthalten, die es Kunden ermöglichen, Produkte nach ihren individuellen Bedürfnissen und Vorlieben anzupassen.
• Effektives Marketing: Ein Immersive-Service-Showroom kann dazu beitragen, dass Marketingkampagnen effektiver sind, da Kunden die Produkte in einer realistischen Umgebung erleben können.
• Erhöhte Sichtbarkeit: Ein Immersive-Service-Showroom kann dazu beitragen, die Sichtbarkeit des Online-Shops zu erhöhen, da es eine innovative und ansprechende Möglichkeit bietet, Produkte zu präsentieren.

Wie kann ein VR-Showroom das Einkaufserlebnis für Kunden verbessern

Ein VR-Showroom kann das Einkaufserlebnis für Kunden verbessern, indem er ihnen ermöglicht, die Produkte in einer realistischen und interaktiven Umgebung zu erleben. Ein VR-Showroom bietet folgende Vorteile:

• Er schafft eine immersive und emotionale Verbindung zwischen den Kunden und den Produkten, indem er sie in die Lage versetzt, die Produkte aus verschiedenen Perspektiven zu betrachten, zu berühren, zu testen und zu personalisieren.
• Er erweitert die Reichweite und Verfügbarkeit der Produkte, indem er sie orts- und zeitunabhängig zugänglich macht. Die Kunden können den VR-Showroom von überall aus betreten, ohne sich um Öffnungszeiten, Anfahrt oder Lagerbestände zu kümmern.
• Er reduziert die Kosten und den Ressourcenverbrauch für die Erstellung und den Betrieb eines physischen Showrooms. Der VR-Showroom kann leicht aktualisiert, angepasst und wiederverwendet werden, ohne dass dafür zusätzliche Materialien oder Personal benötigt werden.
• Er erhöht die Kundenzufriedenheit und die Wahrscheinlichkeit eines Kaufs, indem er den Kunden mehr Informationen, Auswahlmöglichkeiten und Vertrauen bietet. Der VR-Showroom kann die Kunden über die Produkteigenschaften, -vorteile und -bewertungen informieren, ihnen verschiedene Optionen und Empfehlungen anbieten und ihnen die Möglichkeit geben, ihre Kaufentscheidung mit anderen zu teilen oder zu bestätigen.

Wie kann ich einen VR-Showroom erstellen?

Um einen VR-Showroom zu erstellen, müssen Sie zunächst entscheiden, welche Technologie Sie verwenden möchten. Es gibt verschiedene Möglichkeiten, einen virtuellen Ausstellungsraum zu gestalten, je nach Ihren Zielen, Ressourcen und Anforderungen. Hier sind einige gängige Optionen:

• 360°-Fotos und 3D-Scans: Diese Methode basiert auf der Erfassung von realen Räumen oder Objekten mit speziellen Kameras oder Scannern, die ein sphärisches Bild oder ein 3D-Modell erzeugen. Diese können dann zu einer virtuellen Tour verknüpft werden, die die Nutzer mit einem Browser oder einer VR-Brille erkunden können. Diese Methode ist relativ einfach und kostengünstig, bietet aber weniger Interaktivität und Anpassbarkeit als andere Methoden.
• 3D-Modellierung und Rendering: Diese Methode basiert auf der Erstellung von künstlichen Räumen oder Objekten mit 3D-Software, die realistische oder abstrakte Szenen erzeugen können. Diese können dann zu einer virtuellen Umgebung zusammengefügt werden, die die Nutzer mit einem Browser, einer VR-Brille oder einer speziellen App erkunden können. Diese Methode ist flexibler und kreativer als die erste, erfordert aber mehr Zeit, Fähigkeiten und Budget.
• WebXR: Diese Methode basiert auf der Verwendung von Web-Standards wie HTML, CSS und JavaScript, um interaktive 3D-Inhalte für das Web zu erstellen. Diese können dann in eine Webseite eingebettet oder als eigenständige Anwendung gehostet werden, die die Nutzer mit einem Browser oder einer VR-Brille aufrufen können. Diese Methode ist kompatibel und zugänglich für verschiedene Geräte und Plattformen, erfordert aber auch technisches Know-how und Entwicklungswerkzeuge.

Nachdem du dich für eine Technologie entschieden hast, musst du die folgenden Schritte durchführen, um deinen VR-Showroom zu erstellen:

1. Plane das Design und das Layout deines Showrooms. Überlege dir, welche Produkte du präsentieren möchtest, wie du sie anordnen möchtest, welche Informationen du bereitstellen möchtest und wie du die Kunden durch den Raum führen möchtest.
2. Erstelle die Inhalte für deinen Showroom. Je nach gewählter Technologie musst du entweder reale Räume oder Objekte fotografieren oder scannen, künstliche Räume oder Objekte modellieren und rendern oder Web-basierte 3D-Inhalte programmieren.
3. Veröffentliche deinen Showroom online. Je nach gewählter Technologie musst du entweder eine virtuelle Tour aus deinen 360°-Fotos oder 3D-Scans erstellen, eine virtuelle Umgebung aus deinen 3D-Modellen und Renderings zusammenstellen oder eine WebXR-Anwendung aus deinen Web-Inhalten entwickeln. Dann musst du deinen Showroom auf einer Webseite einbinden oder auf einem Server hosten.

Ich hoffe, das gibt dir einen Überblick über den Prozess der Erstellung eines VR-Showrooms.

Das MyOOS Metaverse Experience Projekt ist ein WebXR Projekt

Das Open-Source-Projekt liegt in dem Verzeichnis metaverse-experience

asset In dem Verzeichnis findest du die 3D-Inhalte in Blender Format

dist in dem Verzeichnis findest du die WebXR-Anwendung,

Die anderen Dateien und Verzeichnisse gehören zu der Entwicklungsumgebung. Das MyOOS Projekt verwendet Visual Studio Code und Node.js

Für Visual Studio Code gibt es auf Udemy zurzeit einen kostenlosen zweistündigen Kurs.

https://www.udemy.com/course/einfuhrung-in-visual-studio-code/

Für die Veröffentlichung verwenden wir webpack. Damit benötigen Shopbetreiber keine Node.js Umgebung auf dem Server. Wie wir dies machen habe ich in dem Blogbeitrag Metaverse Experience: webpack code splitting beschrieben.

Das MyOOS Projekt legt großen Wert auf die Sicherheit. Vor diesem Hintergrund wurde für das Projekt bereits in dieser frühen Phase eine Content-Security-Policy eingerichtet. Wie und Warum steht in unserem Blogbeitrag Content-Security-Policy für unseren VR-Commerce Shop

Das Navmesh

In dem Blogbeitrag Projekt: Einen NPCs (Non-Player-Charaktere) mit Tensorflow.js in unserem VR-Commerce bewegen beschreibe ich die Funktion und Aufgabe von einem Navmesh. Und geben einen Ausblick, wie wir dies verwenden könnten.

WebXR-Anwendung

Wie laden ein Navmesh in unsere WebXR-Anwendung mit dem Attribut visible="false", was bedeutet, dass das Navmesh unsichtbar ist. Wenn du es sichtbar machen möchtest, musst du  visible="true" setzen oder das Attribut ganz weglassen, da der Standardwert true ist¹.

Das Attribut normal-material ist kein Standard-Attribut, sondern gehört zu einem Komponentenpaket. Damit du das Komponentenpaket verwenden kannst, haben wir dies für dich bereits in deine HTML-Dokument eingebunden. Das normal-material zeigt die Normalenvektoren der Oberfläche an, was nützlich für Debugging-Zwecke sein kann.

      <!-- Nav mesh. -->
            <a-entity nav-mesh
                visible="true"
		normal-material
                position="0 0 20"
                gltf-model="#navmesh"></a-entity>

Kamerarotation

Um die Blickrichtung der Kamera zu ändern, wenn die Metaverse-Experience Szene geladen wird, kannst du das Attribut rotation der Kamera verwenden. Dieses Attribut legt die Rotation der Kamera in Grad um die x-, y- und z-Achse fest. Zum Beispiel, um die Kamera um 90 Grad nach links zu drehen, kannst du folgenden Code verwenden:

  <!-- Player. -->
  <a-entity id="rig"
            movement-controls="constrainToNavMesh: true;
                               controls: checkpoint, gamepad, trackpad, keyboard, touch;"
            position="-7 0 21">
    <a-entity camera
              position="0 1.6 0"
              look-controls="pointerLockEnabled: true"
              rotation="0 -90 0"> <!-- Hier wird die Rotation gesetzt -->
      <a-cursor></a-cursor>
    </a-entity>
  </a-entity>

Du kannst auch eine Komponente erstellen, die die Rotation der Kamera dynamisch anpasst

Der VR Button fehlt

Es kann sein, dass Dein Enter VR Button fehlt oder falsch platziert ist, weil deine Szene in einem <div> eingebettet ist, der die Positionierung des Buttons beeinflusst. Du kannst versuchen, den Container-Stil auf position: absolute; height: 100%; width: 100%; zu setzen¹.

Es könnte auch sein, dass du eine benutzerdefinierte Enter VR Button verwenden möchtest. Du kannst das Attribut vr-mode-ui="enterVRButton: #myEnterVRButton" auf Deine <a-scene> setzen und den Button mit CSS gestalten.

Was ist der Unterschied zwischen embedded und fullscreen in A-Frame?

Der Unterschied zwischen embedded und fullscreen in A-Frame ist, dass embedded das <canvas>-Element von A-Frame in die bestehende Webseite einbettet, während fullscreen das <canvas>-Element über die gesamte Bildschirmgröße anzeigt.

Wenn du embedded verwendest, musst du die Größe und Position des <a-scene>-Elements mit CSS festlegen, als ob es ein leerer <div> wäre. Außerdem wird der Enter VR Button kleiner und kann mit dem Attribut vr-mode-ui angepasst werden. Embedded eignet sich für Szenen, die mit dem Rest der 2D-Seite interagieren oder integriert werden sollen.

Das MyOOS Projekt verwendet fullscreen verwenden, hier wird das <canvas>-Element standardmäßig mit einer festen Positionierung versehen, die es über alle anderen HTML-Elemente legt. Der Enter VR Button wird größer und befindet sich in der unteren rechten Ecke. Fullscreen eignet sich für Szenen, die den gesamten Bildschirm ausfüllen sollen oder keine Interaktion mit dem Rest der 2D-Seite benötigen.

Kann ich zwischen embedded und fullscreen wechseln, während meine Szene läuft?

Ja, du kannst zwischen embedded und fullscreen wechseln, während deine Szene läuft, indem du eine Funktion erstellst, die die Eigenschaften des <canvas>-Elements ändert. Zum Beispiel kannst du folgenden Code verwenden:

script> // Eine Funktion, die den Fullscreen-Modus ein- oder ausschaltet function toggleFullscreen() { // Das <canvas>-Element aus der Szene holen var canvas = document.querySelector(“a-scene”).canvas; // Prüfen, ob der Fullscreen-Modus aktiv ist 
var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; // Wenn der Fullscreen-Modus aktiv ist, ihn beenden 
if (isFullscreen) { 
if (document.exitFullscreen) { 
document.exitFullscreen(); 
} else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} else if (document.webkitExitFullscreen) { 
document.webkitExitFullscreen(); 
} else if (document.msExitFullscreen) { 
document.msExitFullscreen(); } // Das <canvas>-Element wieder in den ursprünglichen Zustand bringen 
canvas.style.position = “”; canvas.style.height = “”; canvas.style.width = “”; // Wenn der Fullscreen-Modus nicht aktiv ist, ihn starten 
} else { 
if (canvas.requestFullscreen) { 
canvas.requestFullscreen(); 
} else if (canvas.mozRequestFullScreen) { 
canvas.mozRequestFullScreen(); 
} else if (canvas.webkitRequestFullscreen) { 
canvas.webkitRequestFullscreen(); 
} else if (canvas.msRequestFullscreen) { 
canvas.msRequestFullscreen(); } // Das <canvas>-Element über die gesamte Bildschirmgröße anpassen 
canvas.style.position = “fixed”; canvas.style.height = “100%”; canvas.style.width = “100%”; 
} } 
</script>

Du kannst diese Funktion dann mit einem Button oder einem anderen Ereignis aufrufen. Zum Beispiel:

<button onclick=“toggleFullscreen()”>Wechseln zwischen embedded und fullscreen</button>

Metaverse Experience in full screen

Um beim Start der Metaverse Experienc-Szene fullscreen zu verwenden und nicht embedded, musst du e das Attribut embedded von deiner <a-scene> entfernen oder auf false setzen. Zum Beispiel:

<a-scene nonce=“<?php echo $nonce; ?>” vr-mode-ui=“enabled: true”>

oder

<a-scene nonce=“<?php echo $nonce; ?>” embedded=“false” vr-mode-ui=“enabled: true”>

Das Attribut embedded bestimmt, ob das <canvas>-Element von A-Frame in die bestehende Webseite eingebettet wird oder die gesamte Bildschirmgröße einnimmt. Wenn du es auf true setzt oder weglässt, wird der fullscreen-Modus aktiviert.

Hinweis

Dieser Blogbeitrag ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe.

Dieses Metaverse Experience Tutorial entstand am 31.08.2023. Ich verwende eine Node.JS Umgebung mit Visual Studio Code Version: 1.81.1 unter Windows 11. Der Inhalt ist für unser Open Source Metaverse Commerce & Sales Projekt gedacht.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige, es ist lediglich, der, den ich bevorzuge.