Projekt: Einen NPCs (Non-Player-Charaktere) mit Tensorflow.js in unserem VR-Commerce bewegen

Mir ist die Erstellung von einem Navmesh für unser VR-Commerce Projekt gelungen. Das Navmesh ist in der nächsten Veröffentlichung am morgigen Freitag enthalten.

Was ist ein Navmesh?

Ein Navmesh ist eine abstrakte Datenstruktur, die in Anwendungen mit künstlicher Intelligenz verwendet wird, um Agenten bei der Wegfindung durch komplizierte Räume zu unterstützen. Ein Navmesh besteht aus einer Sammlung von zweidimensionalen konvexen Polygonen (einem Polygonnetz), die definieren, welche Bereiche einer Umgebung von Agenten durchquerbar sind. Mit anderen Worten, ein Kunde in einem Verkaufsraum kann sich frei innerhalb dieser Bereiche bewegen, ohne durch Wände zu laufen. Die Wegfindung innerhalb eines dieser Polygone kann trivial in einer geraden Linie erfolgen, weil das Polygon konvex und durchquerbar ist. Die Wegfindung zwischen Polygonen im Netz kann mit einer der vielen Graphensuchalgorithmen erfolgen.

Wenn man ein Navmesh hat könnte man doch weitere Charakter durch den Verkaufsraum gehen lassen.

In Spielen nennt man sie NPCs (Non-Player-Charaktere).

Non-Player-Charaktere: Die Macher eurer virtuellen Welten

NPCs sind viel mehr als nur programmierte Figuren in Videospielen. Sie tragen dazu bei, dass die Spielwelt zum Leben erweckt wird und bereichern unsere Spielerfahrung. Ob als treuer Begleiter, hilfreicher Händler, faszinierender Bewohner oder herausfordernder Gegner – NPCs spielen eine entscheidende Rolle in der Entfaltung der Spielerlebnisse, die wir so sehr genießen. Non-Player-Charaktere

Also lasst uns die NPCs in unseren Lieblingsspielen würdigen und ihre Vielfalt und Bedeutung in den virtuellen Welten erkennen. Denn ohne sie wäre das Spielerlebnis nicht dasselbe!

In einem Verkaufsraum könnten NPSs zum Beispiel weitere Kunden darstellen oder auch Kundenberater.

Für die erste Phase denke ich an einen Non-Player-Charaktere. Wie kann man diesen Stauern und in die VR Szene einbinden?

Wie funktioniert A-Frame und TensorFlow.js

Ich habe einige Webseiten gefunden, die dir vielleicht helfen können, einen NPC mit TensorFlow.js in einer A-Frame-Szene zu bewegen. Hier sind einige von ihnen:

• GitHub – tensorflow/tfjs: A WebGL accelerated JavaScript library for training and deploying ML models. Diese Seite enthält den Quellcode und die Dokumentation für TensorFlow.js, eine JavaScript-Bibliothek für maschinelles Lernen. Du kannst hier einige Beispiele und Tutorials finden, wie du TensorFlow.js in deinem Webprojekt verwenden kannst.
• TensorFlow.js models. Diese Seite bietet dir eine Auswahl an vortrainierten Modellen für verschiedene Aufgaben wie Bilderkennung, Spracherkennung und Textanalyse. Du kannst diese Modelle direkt in deinem Browser laden und ausführen, ohne sie selbst trainieren zu müssen.
• TensorFlow.js guide. Diese Seite erklärt dir die Grundlagen und Konzepte von TensorFlow.js und wie du die TensorFlow-APIs in JavaScript nutzen kannst. Du kannst hier auch lernen, wie du deine eigenen Modelle erstellen und trainieren kannst.

Ich hoffe, diese Informationen sind nützlich für dich. Viel Spaß beim Experimentieren mit A-Frame und TensorFlow.js!

Wie kann ich TensorFlow.js in A-Frame integrieren?

Leider habe ich kein fertiges Beispiel für die Integration von TensorFlow.js in A-Frame gefunden. Aber ich kann dir einige Schritte vorschlagen, die du ausprobieren kannst:

Du brauchst zuerst eine HTML-Seite, die A-Frame und TensorFlow.js einbindet. Du kannst dafür die folgenden Skript-Tags verwenden:

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>

Dann kannst du eine A-Frame-Szene erstellen, die einen NPC enthält. Du kannst dafür eine der vordefinierten Geometrien oder ein eigenes 3D-Modell verwenden. Zum Beispiel:

<a-scene>
  <a-entity id="npc" geometry="primitive: box" material="color: red" position="0 1 -3"></a-entity>
</a-scene>

Als Nächstes kannst du ein TensorFlow.js-Modell laden oder erstellen, das die Bewegung des NPC steuert. Du kannst dafür eines der vortrainierten Modelle von TensorFlow.js models verwenden oder dein eigenes Modell mit der TensorFlow.js guide erstellen.

Schließlich kannst du eine Funktion schreiben, die das Modell regelmäßig aufruft und die Position oder Rotation des NPC entsprechend ändert. Du kannst dafür die requestAnimationFrame-Methode oder einen setInterval-Timer verwenden. Zum Beispiel:

// Load or create a model
let model = await tf.loadLayersModel('model.json');

// Get the NPC entity
let npc = document.getElementById('npc');

// Define a function to update the NPC movement
function updateNPC() {
  // Get the current position of the NPC
  let position = npc.getAttribute('position');

  // Predict the next position using the model
  let input = tf.tensor([position.x, position.y, position.z]);
  let output = model.predict(input);

  // Set the new position of the NPC
  npc.setAttribute('position', {
    x: output.dataSync()[0],
    y: output.dataSync()[1],
    z: output.dataSync()[2]
  });

  // Repeat the function every frame
  requestAnimationFrame(updateNPC);
}

// Start the function
updateNPC();

Wie kann ich ein eigenes Modell mit TensorFlow.js erstellen?

Um ein eigenes Modell mit TensorFlow.js zu erstellen, musst du einige Schritte befolgen:

• Du musst zuerst TensorFlow.js in deinem Webprojekt einbinden. Du kannst dafür ein Skript-Tag verwenden, das die TensorFlow.js-Bibliothek von einem CDN lädt, oder du kannst TensorFlow.js als Abhängigkeit in deinem Paketmanager installieren. Für mehr Details, siehe TensorFlow.js setup.
• Dann musst du deine Daten vorbereiten, die du für das Training und die Vorhersage verwenden willst. Du musst deine Daten in Tensoren umwandeln, die die grundlegenden Datenstrukturen von TensorFlow.js sind. Du kannst dafür die tf.tensor-Funktionen verwenden, die verschiedene Arten von Tensoren erstellen können. Für mehr Details, siehe TensorFlow.js tensors.
• Als nächstes musst du dein Modell definieren, das aus einer oder mehreren Schichten besteht, die die Berechnungen für das Training und die Vorhersage durchführen. Du kannst dafür die tf.sequential– oder tf.model-Funktionen verwenden, die dir erlauben, einfache oder komplexe Modelle zu erstellen. Du kannst auch vorgefertigte Schichten aus der tf.layers-Bibliothek verwenden oder deine eigenen Schichten definieren. Für mehr Details, siehe TensorFlow.js models and layers.
• Schließlich musst du dein Modell trainieren und testen, indem du es mit deinen Daten fütterst und eine Optimierungs- und Verlustfunktion angibst, die das Modell verbessern soll. Du kannst dafür die model.compile– und model.fit-Funktionen verwenden, die dir erlauben, dein Modell zu konfigurieren und zu trainieren. Du kannst auch die model.predict-Funktion verwenden, um Vorhersagen mit deinem Modell zu machen. Für mehr Details, siehe TensorFlow.js training and prediction.

Wenn du mehr über TensorFlow.js lernen willst, kannst du dir auch die TensorFlow.js tutorials ansehen, die dir verschiedene Anwendungsbeispiele zeigen. Viel Spaß beim Erstellen deines eigenen Modells mit TensorFlow.js!

Kann ich TensorFlow.js auch für andere Aufgaben als Bewegung verwenden?

Ja, du kannst TensorFlow.js für viele andere Aufgaben als Bewegung verwenden. TensorFlow.js ist eine Bibliothek für maschinelles Lernen in JavaScript, die dir erlaubt, ML-Modelle in JavaScript zu entwickeln und direkt im Browser oder in Node.js zu verwenden. Du kannst TensorFlow.js für verschiedene Anwendungsfälle wie Bilderkennung, Spracherkennung, Textanalyse, Spielentwicklung, künstlerische Kreationen und mehr verwenden.

Auf der TensorFlow.js Webseite findest du viele Tutorials, die dir zeigen, wie du TensorFlow.js mit kompletten Beispielen verwenden kannst. Du kannst auch einige vortrainierte Modelle für häufige Anwendungsfälle aus der TensorFlow.js Modelle Seite verwenden oder anpassen. Außerdem kannst du dir einige Demos und Projekte ansehen, die mit TensorFlow.js erstellt wurden, auf der TensorFlow.js Demos Seite.

Wenn du mehr über TensorFlow.js erfahren willst, kannst du uns gerne weitere Fragen in den Kommentaren stellen.

Hinweis

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

Dieses Metaverse Tutorial mit A-Frame und TensorFlow.js entstand am 31.08.2023. Ich verwende eine Node.JS Umgebung mit Visual Studio Code Version: 1.81.1 unter Windows 11. Die gezeigte Grundidee 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.