MyOOS Community Blog

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

r23

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:

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:

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.

Die mobile Version verlassen