Jeffrey Cross
Jeffrey Cross

Layar Augmented Reality für MAKE Vol. 28 (und wie man sich eine eigene macht)

[Video Link] Ich liebe den Augmented-Reality-Inhalt, den Layar für MAKE's Toys & Games erstellt hat. Gene Becker von Layar, der dieses Projekt leitete, schrieb freundlicherweise einen Artikel zur Erstellung eines Augmented-Reality-Magazin-Titels. Lesen Sie es nach dem Sprung.

Augmented Reality (AR) ist eine unterhaltsame Technologie, die digitale Medien mit der physischen Welt überlagert. Moderne mobile Geräte wie iPhones und Android-Telefone sind mit Sensoren wie GPS, Beschleunigungssensoren und Kameras ausgestattet, die AR ermöglichen. In diesem Projekt werden wir das Cover des MAKE Magazins um ein digitales Bild erweitern und es mit einem Video im Web verknüpfen. Um dies zu erreichen, lernen wir die Grundlagen der Layar AR-Plattform kennen, entwerfen eine einfache AR-Schicht und entwickeln einen sehr einfachen Webservice, um die AR-Schicht auf Ihrem Smartphone bereitzustellen.

Augmented Reality Magazine Cover

Erstellen Sie digitale Medienerweiterungen auf physischen Bildern, die jeder mit einem Smartphone sehen kann.

Augmented Reality (AR) ist eine unterhaltsame Technologie, die digitale Medien mit der physischen Welt überlagert. Moderne mobile Geräte wie iPhones und Android-Telefone sind mit Sensoren wie GPS, Beschleunigungssensoren und Kameras ausgestattet, die AR ermöglichen. In diesem Projekt werden wir das Cover des MAKE Magazins um ein digitales Bild erweitern und es mit einem Video im Web verknüpfen. Um dies zu erreichen, lernen wir die Grundlagen der Layar AR-Plattform kennen, entwerfen eine einfache AR-Schicht und entwickeln einen sehr einfachen Webservice, um die AR-Schicht auf Ihrem Smartphone bereitzustellen.

Was Sie brauchen: - eine Kopie des MAKE-Magazins (oder eines anderen Magazins, das Sie erweitern möchten) - Zugriff auf einen gehosteten Webserver, auf dem PHP ausgeführt wird, auf den Sie Dateien hochladen können - ein iPhone 3Gs, 4 oder 4s oder ein gleichwertiges Gerät Android-Telefon - Die auf Ihrem Telefon installierte Layar Reality Browser 6.0-App (kostenlos) - ein Layar-Entwicklerkonto (kostenlos) unter http://layar.com/publishing

Hilfreiche Fähigkeiten: - Ein minimales Verständnis von HTML, PHP und JSON ist nützlich, aber nicht erforderlich

Schritt für Schritt: 1. Entwerfen Sie das Projekt und bereiten Sie Medienassets vor. 2. Erstellen Sie einen Web-Service für Ihre Ebene. 3. Richten Sie Ihre Ebene für die Veröffentlichung ein. 4. Testen Sie Ihre AR-Erstellung

1. Projekt entwerfen und Medienassets vorbereiten Wenn Sie physische Objekte mit einer Softwareplattform wie Layar erweitern, benötigen Sie einen Entwurfsplan für Ihre Ebene, der folgende Komponenten enthält: Zielobjekte, Referenzbilder, digitale Erweiterungen und die damit verbundenen Aktionen jede Vergrößerung. Für dieses Projekt halten wir es einfach und verwenden ein Objekt, ein Referenzbild, eine einzelne Erweiterung und eine einzelne Aktion wie folgt:

- Zielobjekt: MAKE Magazin Ausgabe Nr. 28, das physische Objekt - Referenzbild: Ein digitales Bild mit hoher Auflösung der Titelseite. - Erweiterung: Ein niedrig aufgelöstes Digitalbild. Wir verwenden ein Standbild aus dem Video-Trailer für MAKE # 28 - Aktion: Wenn der Betrachter die Erweiterung auf dem Bildschirm antippt, wird der MAKE # 28-Video-Trailer von YouTube abgespielt.

Sehen Sie sich diese beiden kurzen Videos für eine schnelle Einführung in die Funktionsweise von Layar Vision an: Layar Vision Layla Vision Explained

Laden Sie das Referenzbild hier auf Ihren Computer herunter. Wir werden es später verwenden.

2. Erstellen eines Web-Services für Ihre Schicht Layar verwendet eine webbasierte API für die Kommunikation zwischen mobilen Geräten und AR-Services in der Cloud. Machen Sie sich keine Sorgen über die Details. Wir verwenden einen sehr einfachen Web-Service, der aus 3 einfachen PHP-Dateien, einer formatierten Textdatei (im JSON-Format) und den Medienassets aus Schritt 1 besteht.

Greifen Sie mit Ihrem bevorzugten FTP-Dienstprogramm, einem Shell-Programm oder einem Web-Editor wie Dreamweaver auf Ihren gehosteten Webserver zu. Laden Sie dieses Dateiverzeichnis auf Ihren Computer herunter und laden Sie es auf Ihre Website hoch. Die Verzeichnisstruktur bleibt dabei erhalten. Sie sollten diese Dateien später untersuchen, um zu sehen, wie sie funktionieren. Im Moment erhalten Sie jedoch einen minimalen Funktionsschicht-Service.

Sie können Ihren Dienst testen, indem Sie diese URL in einem Browser öffnen (ersetzen Sie dabei Ihre Website-Adresse mit der Adresse www.ihredomain.com/ihr-webverzeichnis): http://www.ihredomain.com/ihr-webverzeichnis/make /index.php. Wenn der Dienst richtig eingerichtet ist, sollte eine Seite mit formatiertem Text angezeigt werden, die wie folgt aussieht:

3. Einrichten der Ebene für die Veröffentlichung Als Nächstes melden wir uns beim Layar-Veröffentlichungsdienst an, richten unsere Ebene ein und laden unser Referenzbild hoch.

Gehen Sie zu http://layar.com/publishing und erstellen Sie ein Entwicklerkonto.

Sobald Sie sich bei Ihrem Konto angemeldet haben, sollten Sie eine Seite sehen, die ungefähr so ​​aussieht:

Klicken Sie auf die Schaltfläche "Eine neue Ebene erstellen!" Und Sie sehen ein Formular, in das Sie Informationen zu Ihrem Projekt eingeben können. Fürs Erste machen wir das notwendige Minimum. Sie können später wiederkommen, um die Veröffentlichungsumgebung zu erkunden.

Geben Sie für "Ebenenname" einen eindeutigen Namen nur in Kleinbuchstaben und Zahlen ein. Geben Sie unter "Titel" einen benutzerfreundlichen Namen für Ihre Ebene ein, der in der App angezeigt wird. Geben Sie unter "Name des Verlegers" Ihren Namen oder ein Pseudonym ein. Geben Sie im Feld "API-Endpunkt-URL" die URL für Ihren Ebenendienst aus Schritt 2 ein. Es wird in etwa wie http://www.IhreDomain.com/Ihr-Webverzeichnis/make/index.php aussehen. "Layer-Typ" sollte auf 3D- und 2D-Objekte im 3D-Raum eingestellt werden. Aktivieren Sie das Kontrollkästchen, um 'Layar Vision' zu aktivieren. Klicken Sie auf die Schaltfläche "Ebene erstellen".

Auf dem nächsten Bildschirm können Sie Ihre neue Ebene detailliert bearbeiten. Sehen Sie sich zunächst den linken Navigationsbereich an und klicken Sie auf "Referenzbilder". Klicken Sie auf "Ein neues Referenzbild hochladen". Klicken Sie im Dialogfeld auf "Datei auswählen" und wählen Sie unser Referenzbild aus Schritt 2, make-reference-image.jpg. Für "Image key" -Typ: make28 Setzen Sie die "Real World Height" auf 0,25 (die Höhe des physischen Make-Magazins in Metern). Klicken Sie auf "Senden" und nach dem Hochladen des Bildes klicken Sie auf "Ich bin fertig mit dem Hochladen von Bildern". Nachdem das Dialogfeld geschlossen wurde, klicken Sie auf "Speichern".

4. Testen Sie Ihre AR-Erstellung Starten Sie auf Ihrem Telefon die Layar-App. Navigieren Sie in der App zu Einstellungen> Konto und melden Sie sich mit Ihren Layar-Entwicklerkontodaten an. Auf diese Weise können Sie Ihre nicht veröffentlichte Ebene testen. Navigieren Sie zurück zu Ebenen, und es sollte ein Bildschirm mit Featured, Popular, New und Test angezeigt werden. Klicken Sie auf Test, und Sie sollten Ihre neue Ebene aufgelistet sehen. Klicken Sie hier, um Ihre Ebene zu starten. Sie befinden sich nun im Live-Videomodus und sollten ein kleines Symbol mit der Nummer 1 sehen (das Referenzbild, das Sie in Schritt 4 hochgeladen haben).Hier ist der Moment der Wahrheit: Sehen Sie sich das Cover Ihrer Kopie von Make # 28 mit Ihrem Telefon an, und in wenigen Sekunden sollten Sie das vergrößerte Bild sehen! Tippen Sie nun auf die Erweiterung, und Sie sollten das YouTube-Video für Make # 28 sehen!

Glückwunsch, Sie sind ein Augmented-Reality-Entwickler!

Natürlich haben wir nur die Oberfläche zerkratzt und es gibt noch viel mehr zu erkunden. Hier sind ein paar gute Ressourcen für einen tieferen Einstieg in die AR:

Die Layar-Entwicklerseite bietet umfangreiche Dokumentationen und Anleitungen für angehende AR-Entwickler.

Für technisch weniger versierte Entwickler gibt es einige einfach zu verwendende Content-Management-Systeme, mit denen Sie ortsbasierte AR-Ebenen ohne Programmieraufwand erstellen können.

Der PorPOIse-Open-Source-Layer-Server von Jens de Smit ist ein umfassendes PHP-Layer-Service-Framework für Entwickler.

Aktie

Leave A Comment