Haupt / Wie Man

So codieren Sie einen Augmented Reality-Marker

Seite 1 von 2: Seite 1

Seite 1
Seite 2

Augmented Reality gibt es schon seit einiger Zeit, aber mit der Unterstützung von WebRTC (Echtzeitkommunikation) können Benutzer auf Android- und Desktop-Geräten auf die Kamera eines Telefons zugreifen.

Derzeit kann iOS dies nicht unterstützen, da es nicht im WebKit-Browser implementiert wurde, der Safari unterstützt. Es befindet sich jedoch in der Entwicklung und Sie können den Status überprüfen Hier . Wenn Sie ein iOS-Gerät haben, müssen Sie es nicht verpassen, da Sie die Webcam weiterhin auf Ihrem Desktop-Computer verwenden können.

Hinweis: Damit dies im mobilen Chrome-Browser funktioniert, muss der Inhalt von einer sicheren Socket-Schicht bereitgestellt werden (d. H. Über HTTPS anstelle von Standard-HTTP). Desktop funktioniert derzeit jedoch mit normalem HTTP.

Um die Dateien herunterzuladen, die Sie für dieses Tutorial benötigen, gehen Sie zu FileSilo Wählen Sie neben dem Lernprogramm Free Stuff und Free Content aus.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie einen Augmented Reality-Marker vor einer Telefonkamera platzieren. Dies wird vom Browser und abgeholt AR.js. und der Inhalt wird in 3D über die Oberseite abgebildet, wobei der AR-Marker beibehalten wird.

Es gibt viele Verwendungsmöglichkeiten für diese Technik. Beispielsweise möchten Sie möglicherweise ein einfaches 3D erstellen kreativer Lebenslauf und dann könnte der AR-Marker auf Ihre Visitenkarte gedruckt werden. Da Sie um den Marker herumgehen können, eignet sich dies hervorragend für Inhalte, die Sie möglicherweise aus verschiedenen Blickwinkeln sehen möchten. Denken Sie an einen bestimmten schwedischen Möbelhersteller, der Ihnen animierte Schritte bietet, die aus jedem Blickwinkel betrachtet werden können. Es gibt so viele Möglichkeiten, für die dies nützlich sein kann.

01. Fügen Sie die Bibliotheken hinzu

Beginnen Sie mit der Verknüpfung Ihrer Projektbibliotheken

Sobald du hast hat die Tutorial-Dateien heruntergeladen Gehen Sie zum Projektordner, öffnen Sie den Startordner in Ihrem Code-Editor und öffnen Sie dann den index.html Datei zum Bearbeiten. Zu diesem Zeitpunkt müssen die Bibliotheken miteinander verbunden werden - und es gibt einige für dieses Projekt! Die Bibliotheken bestehen aus drei Abschnitten: Three.js, JSARToolKit und der Three.js-Erweiterung für ARToolKit und Marker.

THREEx.ArToolkitContext.baseURL = '/'

02. Achten Sie auf das CSS-Styling

In dem Kopf Abschnitt der Seite, fügen Sie einige hinzu Skript Tags und legen Sie die Stilregeln für die Körper und das Segeltuch Element. Dadurch wird sichergestellt, dass sie korrekt auf der Seite platziert werden, ohne dass die vom Browser hinzugefügten Standardränder verwendet werden.

body { margin: 0px; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; }

03. Globale Variablen hinzufügen

In dem Körper Abschnitt der Seite, fügen Sie einige hinzu Skript Tags, an denen der verbleibende JavaScript-Code für dieses Lernprogramm gespeichert wird. Es werden eine Reihe von Variablen benötigt: Die erste Zeile steht für Three.js, die zweite für AR.js, die dritte für das Modell und dann eine Variable zum Laden des Modells.

var renderer, scene, camera; var arToolkitContext, onRenderFcts, arToolkitSource, markerRoot, artoolkitMarker, lastTimeMsec; var model, tube1, tube2, mid, details, pulse; var loader = new THREE.ColladaLoader();

04. Laden Sie das Modell

Vor dem Einrichten der Szene wird das Modell geladen, damit es angezeigt werden kann, wenn Markierungen erkannt werden. Dies wird um 10 verkleinert, um genau auf den AR-Marker zu passen. Das Modell hat eine Breite und Höhe von 10 cm, daher beträgt die Markierung 1 cm, was in Three.js 1 Inkrement entspricht.

loader.load('model/scene.dae', function(collada) {   model = collada.scene;   model.scale.x = model.scale.y = model.scale.z = 0.1;   details = model.getObjectByName(“details', true);

05. Einige Anzeigeprobleme behoben

Noch im Collada-Ladecode befinden sich nach dem Laden des Modells einige Röhren, die sich drehen, damit sie in der Collada-Szene gefunden werden. Das erste Rohr wird gefunden und sein Material wird ergriffen. Hier wird das Material so eingestellt, dass es nur auf der Innenseite des Modells und nicht auf der Außenseite gerendert wird.

tube1 = model.getObjectByName(“tube1', true); var a = tube1.children[0].material; a.transparent = true; a.side = THREE['BackSide']; a.blending = THREE[“AdditiveBlending']; a.opacity = 0.9;

06. Wiederholen Sie den Fix

Wenn die Transparenz und das additive Mischen nicht aktiviert sind, sieht das Modell beim Laden und Anzeigen über dem AR-Marker so aus - nicht sehr aufregend und kaum sichtbar!

Wie im letzten Schritt wird dasselbe Prinzip für die zweite Tube wiederholt, und der Mischmodus, ähnlich wie in After Effects und Photoshop, wird als additive Mischung festgelegt. Dies ermöglicht der Außenseite der Pixel einen weicheren Übergang zum Kamerabild.

tube2 = model.getObjectByName('tube2', true); c = tube2.children[0].material; c.transparent = true; c.side = THREE['BackSide']; c.blending = THREE['AdditiveBlending']; c.opacity = 0.9;

07. Endgültige Korrektur

Das letzte Modell ist ein Kreis, der sich genau in der Mitte des Designs befindet. Dies folgt den gleichen Regeln wie zuvor, rendert jedoch nicht die Rückseite des Objekts, sondern nur die Vorderseite. Die Opazität jedes dieser Materialien wurde auf 90% eingestellt, um es etwas weicher zu machen. Sobald das Modell geladen ist, wird die Init-Funktion aufgerufen.

  mid = model.getObjectByName('mid', true);   b = mid.children[0].material;   b.transparent = true;   b.blending = THREE['AdditiveBlending'];  b.opacity = 0.9;   init(); });

08. Initialisieren Sie die Szene

Die Init-Funktion wird eingerichtet und hier werden die Renderer-Einstellungen erstellt. Der Renderer verwendet WebGL, um dem Inhalt die schnellste Rendergeschwindigkeit zu verleihen, und der Hintergrund-Alpha-Wert wird auf transparent gesetzt, damit das Kamerabild dahinter sichtbar ist.

function init() {   renderer = new THREE.WebGLRenderer({   alpha: true   });   renderer.setClearColor(new THREE.Color('lightgrey'), 0);   renderer.setSize(window.innerWidth, window.innerHeight);   document.body.appendChild(renderer.domElement);

09. Erstellen Sie die Szenenanzeige

Der Renderer hat dieselbe Größe wie das Browserfenster und wird dem Dokumentobjektmodell der Seite hinzugefügt. Jetzt wird ein leeres Array erstellt, in dem Objekte gespeichert werden, die gerendert werden müssen. Es wird eine neue Szene erstellt, damit Inhalte darin angezeigt werden können.

onRenderFcts = []; scene = new THREE.Scene();

10. Leuchten

Um Inhalte in der Szene wie in der realen Welt sehen zu können, werden Lichter benötigt. Eines ist ein graues Umgebungslicht, während das gerichtete Licht eine gedämpfte blaue Farbe hat, um dem in der Szene angezeigten 3D-Inhalt einen leichten Farbton zu verleihen.

Experimentieren Sie mit den Beleuchtungsfarben, um verschiedene Farbtöne zu erhalten

var ambient = new THREE.AmbientLight(0x666666); scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0x4e5ba0); directionalLight.position.set(-1, 1, 1).normalize(); scene.add(directionalLight);

Weiter: Beenden Sie Ihren AR-Marker